2011-04-14 09:10:12| 分类: 计算机与 Interne | 标签: |举报 |字号大中小 订阅
本例子将DIV3列并排居中配上头部和尾部,这是国外BLOG经常使用的格式。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px;line-height:30px}
#mainContent { height:300px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:300px; background:#9ff;}
#sidebar2 { float:right; width:200px; height:300px; background:#9ff;}
#content { margin:0 205px; height:300px; background:#cff;}
#footer { height:60px; background:#6cf;}
页面代码如下:
<body>
<div id="container">
<div id="header">这是头部</div>
<div id="menu">这是导航</div>
<div id="mainContent">
<div id="sidebar">这是左列</div>
<div id="sidebar2">这是右列</div>
<div id="content">3列固定宽度居中+头部+尾部</div>
</div>
<div id="footer">这是尾部</div>
</div>
</body>
效果下图显示:点击看大图
本例中的关键是先写左右,再写中间。
部分代码例子由“标准之路www.aa25.cn”提供,感谢!
评论