第一个例子只是告诉大家如何让页面居中,这个代码的用处一般用来做背景图,示例:/,外围是灰色的,当中页面的正文底是白色的,非常大气。这个例子主要讲上下两列,这是最常见的,也是最简单的页面表现形式,头部放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决定。
第二个例子是告诉大家如何让页面居中,如何加上头部。这个例子加上了尾部,这也是一种常见的页面表现形式,头部放logo和banner,中间是主体内容,尾部放copyright等内容。
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; margin-bottom:5px;}
#footer { height:60px; background:#6cf;}
页面代码如下:
<body>
<div id="container">
<div id="header">这是头部</div>
<div id="mainContent">
<p>这是主体</p>
</div>
<div id="footer">这是尾部</div>
</div>
</body>
效果下图显示:点击看大图
其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中,宽度由#container决定。
第三个例子是我们在页面布局中加上了尾部,但一个标准的网站都有导航。这个例子加上了导航,这是最常用的页面表现形式,本次例子中还涉及了另三个要点,是很多朋友在CSS定义时经常遇到的问题。
CSS代码如下:
body { font-family:Verdana; font
CSSDIV布局案例 来自淘豆网m.daumloan.com转载请标明出处.
