城市网页静态结构与样式练习HTML5示例
黑白风格的城市网页，结构清晰，内容分布合理，用来练习静态页面再合适不过了。HTML5搞定内容结构，CSS搞定样式布局，页面之间用链接串起来，学会了这些，基本功就稳了。header、footer、nav这些标签都用得挺标准，做参考方便。
导航栏用的应该是ul配li那一套，写起来也简单。再加点hover样式，响应也快，视觉效果也到位。如果你刚上手 HTML 和 CSS，这种结构清楚的项目，学起来不容易迷路。
多页面结构也挺实用，每个页面一个html文件，用链接起来就行。比如城市首页跳转到美食页，旅游页，逻辑一目了然，别说你没见过。
页面样式部分估计用了点flexbox或grid，这两个现在是前端排版标配。布局简单点就上flex，要做复杂点的宫格可以用grid，看你怎么取舍了。
响应式设计这一块初学者最好也顺便看看，CSS 里加点@media就能实现手机和电脑的适配，像max-width: 768px这种判断条件，是移动端适配的常客。
顺带提一句，浏览器兼容问题别大意。HTML5 虽然主流浏览器都支持，但有些老版本还会掉链子，用devtools调试下页面，能省不少事。
如果你想把代码管起来，用下Git还是有必要的。哪天想加点JavaScript也方便回滚。反正早点养成版本管理的习惯，准没错。
想拓展练习的话，可以看看这些模板：
都是不错的参考，动手练才是王道。
文件大小：2.54MB
评论区