当前位置:编程学习 > html/css >>

用CSS创建一个布局居中的页面

  最近有一个读者问到,怎样用CSS创建一个居中的页面布局。该读者所追求的,是要达到这样一种效果,就如同在一个1024象素宽的页面上设计出一个800象素宽的表格。这是一种使用很广泛的页面设计方法,按照传统,它要靠嵌套表格才能达到这一效果,因此,这位读者追寻一种用CSS来达到这一效果的方法并不让人惊讶。
  用CSS来创建一个居中的页面设计的基本技术相对来说较简单,不过与同类相比,也简单不了太多。让我们看一下,要将这种由来已久的基于表格的设计转变成用CSS,该怎样做。
  传统的做法:居中的布局
  首先,由于是做比较,让我们来看一个例子,它是一种基于一个居中表格的页面设计。图表A中显示了一个例子,以下是这个例子的编码:
  <body>
<p> </p>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="10"bgcolor="#FFFFFF">
 <tr>
  <td colspan="2"><h2 align="center">Header</h2></td>
 </tr>
 <tr>
  <td width="150px" valign="top"><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>
  </td>
  <td valign="top"><p>Main Content -- Love's not
 time's fool...</p></td>
 </tr>
 <tr>
  <td colspan="2"><hr />
   <p>Footer text -- Admit impediments...</p>
  </td>
 </tr>
</table>
<p> </p>
</body>
  < table >这个标签包括了以下一些属性,将其宽度定义为页面宽度的80%,并将该表格置于页面的中间。在表格的前面有一个空白段落,这就使得页面的顶端与表格的顶端之间有一些垂直空间。在表格的后面也有一个空白段落,这就使得页面的底端与表格的底端之间也有一些空间。这个表格包括两列三行。顶端的单元被合并了,用来放置页眉,底端的行也合并了,以安置页脚,而中间那些单元则被分为两列,一个供放置主要内容,另一个则是导航工具栏。
第 1 2 3 4 页
补充:Css教程,样式布局 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,