| 用CSS创建一个布局居中的页面 |
|
| 日期：2007-6-20 9:33:37 人气：77 [大 中 小] |
|
|
|
|
|
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
注意一下所有那些陈述的格式，原来它们被包括在<table>和<td>标签中，现在已经被移走了。而那些位于表格前面和后面的空白段落也都不见了。CSS格式会处理所有的格式化以及空间的问题。
以下是CSS的编码，就是这些编码，将页面设计成一种居中的样式，这种设计与前面所说的基于表格的设计很类似：
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
图表B显示了结果，即用CSS执行的一个居中页面的版面设计。
解析CSS编码
与基于表格的版面设计比起来，它的主体样式并没有什么变化。它只不过设置了一下背景颜色，默认正文字体以及尺寸大小。
div#outer是其中的一种样式，它是这一技术的关键。这就是前面提到过的以div取代表格的样式，它创建了居中的盒子，而这个盒子成了包容该页面所有内容的容器。将宽度设置为80%的规则设定了该div的宽度，就跟表格标签的相应属性规定该表格的宽度一样。与此相类似，background-color:#FFFFFF为div建立了一个白色的背景，就如同表格中bgcolor="#FFFFFF"属性为表格设置白色背景一样。margin-top: 50px and margin-bottom: 50px则用顶端和底端的空白来取代表格中用来造成垂直空间的空白段落。 |
|
|
| 出处：本站原创 作者：佚名 |
|
|
