html5标题分栏,网页分栏设计和不同的CSS样式

网页分栏设计

写网页的时候，我们可能觉得自己做出来的东西和真正的网页有所差别，总是“少了点什么”。这很有可能是因为我们的网页没有注意分栏哦。

这里是天猫主页的截图，大家可以观察一下它的分栏设计。

右上角是搜索栏，页眉是导航栏，中间是促销广告，分栏十分清晰。

我们将用CSS来实现一个基本的分栏页面，大致分布如下。

导航栏

导航栏的制作我们在前面一篇文章中已经讲过了，这里只贴代码。

CSS样式：

ul { /*设置导航栏的框框*/

margin: 100px auto; /*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/

margin-bottom: 10px auto;

width: 530px; /*框框的宽度*/

height: 0px auto; /*框框的长度*/

padding: 0px; /*将框框的padding设置为零，不然会导致框框里的内容与框边缘有间隔*/

/*border:1px solid #000;/*添加边框*/

}

li {

<