布局流程

一.CSS属性书写顺序（重点）

建议遵循以下顺序：

1. 布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
2. 自身属性：width/height/margin/padding/border/background
3. 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4. 其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient......

二.布局流程

三.页面制作

这个页面的版心是1200像素，每个版心都要水平居中对齐，所以，我们干脆把版心定义为：

3.1头部制作

结构如下：

1. 一号是版心盒子header 1200*42的盒子水平居中对齐，上下给一个margin值就好了
2. 版心盒子里面包含2号盒子logo
3. 版心盒子里面包含3号盒子nav导航栏
4. 版心盒子里面包含4号盒子search搜索框
5. 版心盒子里面包含5号盒子user个人信息
6. 注意，要求里面的4个盒子必须都浮动

3.2banner制作

结构如下：

1. 1号盒子是通栏的大盒子，不给宽度，给高度，给一个蓝色背景
2. 2号盒子是版心，要水平居中对齐
3. 3号盒子版心内，左对齐subnav侧导航栏
4. 4号盒子版心内，右对齐course课程

3.3精品推荐小模块

结构图如下：

1. 大盒子水平居中居中good精品，注意此处有个盒子阴影
2. 1号盒子是标题H3 左侧浮动
3. 2号盒子里面放链接 左侧浮动 距离可以控制链接的 左右外边距
4. 3号盒子 右浮动

3.4精品推荐大模块

1. 1号盒子为最大的盒子box，版心水平居中对齐
2. 2号盒子为上面部分box-hd————里面，左侧标题H3左浮动，右侧链接a右浮动
3. 3号盒子为底下部分box-bd————里面是无序列表有10个小li组成
4. 小li外边距的问题，技巧：给3号盒子margin负值

3.5 底部模块制作

1. 1号盒子通栏大盒子底部footer 给高度 底色是白色
2. 2号盒子版心水平居中
3. 3号盒子版权copyright 左对齐
4. 4号盒子链接组links 右对齐