2011-02-28 13:51:05| 分类: 计算机与 Interne | 标签: |举报 |字号大中小 订阅
第一个例子只是告诉大家如何让页面居中,这个代码的用处一般用来做背景图,示例:http://www.smarter.co.jp/,外围是灰色的,当中页面的正文底是白色的,非常大气。 这个例子主要讲上下两列,这是最常见的,也是最简单的页面表现形式,头部放logo和banner,下面是主体内容。
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;}
#mainContent { height:300px; background:#cff;}
页面代码如下:
<body>
<div id="container">
<div id="header">这是头部</div>
<div id="mainContent">
<p>这是身体</p>
</div>
</div>
</body>
效果下图显示:点击看大图
其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中,宽度由#container决定。
代码例子由“标准之路www.aa25.cn”提供,感谢!
评论