学成在线案例

1，CSS属性书写顺序

建议遵循以下顺序：

1，布局定位属性：

display / position / float / clear / visbility / 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...

2，页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

1，必须确定页面的版心（可视区），我们测量可得知

2，分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则

3，一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则

4，制作HTML结构，还是遵循，先有结构，后有样式的原则。结构永远最重要

5，所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累

3，确定版心

.w{

        width：1200px；

        margin： 0  auto；

}

 4，头部制作

1号盒子是版心盒子header 1200*42的盒子水平居中对齐，上下给一个margin值就可以

版心盒子里面包含2号盒子logo

版心盒子里面包含3号盒子nav导航栏

版心盒子里面包含4号盒子search搜索框

版心盒子里面包含5号盒子user个人信息

注意：要求里面的4个盒子必须都是浮动

4，导航栏注意点：

实际开发中，我们不会直接用链接a，而是用li包含链接（li + a）的做法

1，li + a语义更清晰，一看这就是有条理的列表型内容

2，如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

注意：

1，让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示

2，这个nav导航栏可以不给宽度，将来可以继续添加其余文字

3，因为导航栏里面文字不一样多，使用最好给链接a左右padding撑开盒子，而不是指定宽度

5，banner制作

1，1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景

2，2好盒子是版心，要水平居中对齐

3，3号盒子版心内，左对齐subnav侧导航栏

4，4号盒子版心内，右对齐course课程