网页分栏设计

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

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

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

我们将用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 {

list-style-type: none; /* 去掉li前的点 */

float: left; /*将li设置成做浮动，变为联动*/

}

a {

display: block; /*将a变成块状*/

width: 100px; /*设置块的宽度*/

height: 50px; /*设置块的长度*/

font-family: Microsoft Yahei;

line-height: 50px; /*设置字体在块中的高度*/

background-color: #2f4f4f;

margin: 0px 0px; /*块里的高宽通过margin设置*/

color: #fff;

text-align: center; /*字体居中*/

text-decoration: none; /*去掉下划线*/

font-size: 15px;

}

a:hover {

background-color: #2f6f4f;

}

HTML引用

• 首页
• 经典美文
• 名家诵读
• 了解更多

效果

分栏实现

基本的分栏代码框架是这样的

这意味着，我们要定义两个ID名称为left 和middle的CSS类选择器

#left {

width: 120px;

background-color: pink;

/* position:relative; */

margin-left: 100px auto;

float: left;

margin-top: 10px;

}

#middle {

width: 260px;

background-color: gray;

margin-left: 320px auto;

margin-top: 10px;

}

之后在html中引用。

效果如下图：

表格实现

大家看到我们在中间一栏中插入了表格，这到底是如何实现的呢？

HTML

title	author
背影	朱自清

tr 元素定义表格行

th元素定义表头

td元素定义表格单元。

页脚实现

CSS

footer {

width: 90%;

max-width: 430px;

margin-top: 30px;

bottom: 0px;

height: 50px;

background: #111;

color: white;

position: fixed;

}

HTML

这是一个快乐的页脚

position: fixed 不论我们如何拉动浏览器的滚动条，页脚在浏览器中的位置都是不会变化的

固定的标题和右下边框

标题

CSS

h1 {

position: fixed;

top: 0;

width: 500px;

margin: 0 auto;

background: white;

padding: 10px;

}

HTML

An example

效果

可以看到，当下拉浏览器滚动条的时候，标题固定在页面框不动

右下

用这个我们也可以实现右下角有一个小框框，固定不动的效果

联系方式：13529502940

整体页面效果如下：

不同的CSS样式

如何轻易地改变一个网页的风格，又不改变它的内容呢？

答案当然是使用不同的CSS样式啦。

StyleSheet2

StyleSheet1

只要改变不同CSS文件中设定的样式，将同一个HTML文件绑上不同的CSS样式就会有不同的效果。