1.案例准备工作
本次我们采取结构与样式分离思想：
- 创建study目录文件--用于存放我们这个页面的相关内容。
- study内新建一个images文件夹--保存图片。
- 新建首页文件index.html。
- 新建style.css样式文件，本次采用外链样式表。
- 将样式引入到html页面文件中。
<link rel="stylesheet" href="style.css"> - 样式表写入清除内外边距的样式，来检测样式表是否引入成功。
2.页面布局思路
- 确定页面的版心（可视区）。
- 分析页面中的行模块，以及每个行模块中的列模块。
- 一行中的列模块经常浮动，先确定每个列的大小，之后确定列的位置。
- 制作html结构。遵循“先有结构，后有样式”原则。
- 先理清布局结构再写代码。
3.头部制作
- 1号是版心盒子header1200*42 的盒子水平居中对齐，上下给一个margin值即可。
- 版心盒子里包含2号logo盒子、3号nav导航栏、4号search框、5号user个人信息。
注：4个盒子必须都是浮动。制作导航栏时，我们不会直接用链接a而是用li包含（li+a）的做法，如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑，从而影响网站排名。nav导航栏可以不给宽度，将来可以继续添加其余文字。因为导航栏里文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。
4.banner制作
- 1号盒子是通栏的大盒子banner，不给宽度给高度，给一个蓝色背景。
- 2号盒子是版心，要水平居中对齐。
- 3号盒子版心内，左对齐subnav侧导航栏。
- 4号盒子版心内，右对齐course课程。
5.精品推荐小模块
- 大盒子水平居中goods精品，注意此处有个盒子阴影
- 1号盒子是标题h3左侧浮动
- 2号盒子里面放链接左侧浮动，good-item距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
- 3号盒子右浮动mod修改
6.精品推荐大模块
- 1号盒子为最大的盒子，box版心水平居中对齐
- 2号盒子为上面部分，box-hd里面左侧标题h3左浮动，右侧链接a右浮动
- 3号盒子为底下部分，box-bd里面是无序列表，有10个li组成
- li外边距问题：给box-hd宽度为1215就可以一行装5个li
7.底部模块
- 1号盒子是通栏大盒子，底部footer给高度，底色是白色
- 2号盒子版心水平居中
- 3号盒子版权copyright左对齐
- 4号盒子链接组links右对齐
