学成在线-Pink老师教

页面布局整体思路

1、必须确定页面的版心（可视区），我们测量可得知、
2、分析页面中的行模块，以及每个行模块中的列模块。是页面布局第一准则。
3、一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
4、制作HTML结构。我们还是遵循先有结构后又样式的原则。结构永远最重要。

确定版心

每个版心都要水平居中对齐，可以定义版心为公共类

.w {
    width: 1200px;
    margin: auto;
}

头部制作

导航栏注意点：
实际开发中，我们不会直接用链接a而是用包含链接（li+a）的做法
1、li+a语义更清晰，一看就是有条理的列表型内容
2、如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑从而影响网站排名
注意：
1、让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
2、这个nav导航栏可以不给宽度，将来可以继续添加其余文字
3、因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

search搜索框：
一个search大盒子里面包含两个表单（文本框+按钮）

banner制作

精品推荐模块

精品推荐大模块

底部模块