css响应式网页实战

第一节

  • 分析案例页面
  • 编写html结构
  • 编写css宏观样式

Apple.com

  • 页头有导航和大图展示
  • 中间内容由四个小块和一个链接组成
  • 底部由若干个列表组成

编写HTML结构

代码编辑器中展示了Apple.com的大致HTML结构，里面的注释规划的很清楚。


你可以改写成HTML5规范的语义化标签，试试看吧。

编写CSS宏观样式

代码编辑器中展示了Apple.com的HTML结构对应的css样式代码，注意开头要重置浏览器默认样式.


这里为了方便展示先加上固定高度和背景色。

查看结果

点击代码编辑器右上角的 Run 运行
觉得展示区域太小可以点击 全屏展示

如果发现不是理想的结果，请检查css样式命名是否和HTML结构对应。

本节到此结束

下一节：页头细节样式完成