2011-03-17 10:26:01| 分类: 计算机与 Interne | 标签: |举报 |字号大中小 订阅
从这个例子开始,我们开始讲左右的布局的CSS,DIV左右布局是CSS中最复杂的。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;}
#container {margin:0 auto; width:900px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#mainContent { margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:#9ff;}
#content { float:right; width:695px; height:500px; background:#cff;}
页面代码如下:
<body>
<div id="container">
<div id="header">这是头部</div>
<div id="mainContent">
<div id="sidebar">这是工具栏</div>
<div id="content">2列固定宽度左窄右宽型+头部</div>
</div>
</div>
</body>
效果下图显示:点击看大图
本居中的关键是一左一右“float:left; float:right;”
部分代码例子由“标准之路www.aa25.cn”提供,感谢!
评论