html如何将页面分成三列,纯CSS实现的三列布局网页效果实例

本文实例讲述了纯CSS实现的三列布局网页效果。分享给大家供大家参考。具体分析如下：

这是一个比较常用的用DIV+CSS布局的网页，包括头部、中间、一行三列布局、导航条、页面底部等，如果你正在用CSS布局一个网页，那么这段代码正好你能用得上，这种布局方式现在比较常用。

复制代码代码如下:

一个常用的纯CSS布局的网页

*{

font-size:12px;

font-family:verdana;

margin:0px;

padding:0px;

}

a{

text-decoration:none;

}

#header,#footer{

width:85%;

margin:0 auto;

height:50px;

}

#header{

height:70px;

margin-top:5px;

border:solid 1px #000;

background:url() no-repeat right -20px;

}

#header h1{

line-height:40px;

}

#body{

position:relative;

width:85%;

margin:3px auto;

height:100%;

word-wrop:break-word;

word-break:break-all;

}

#sidebar{