使用CSS创建固定宽度的布局(2)

规则 div#side1控制第一个工具条列的样式。它设置该列的宽度（width: 150px）并使用绝对定位将该列放置在其父元素的左上角。父元素是该列的 div，如果该元素使用相对于 body 元素的相对定位，那么它将解释 top: 0px规则而非你所期望的 100px设置。规则 div#side2以同样的方式设置左工具条所用的列。div#side1和 div#side2唯一不同之处是背景色和 left: 600px规则，后者将该列定位在其它两列的右边。

样式 div#content中的主内容所用的列的样式控制与其它两列的样式控制相似。它显式地设计宽度（width: 450px）并使用 left: 150px和 top: 0px规则在其父元素（包围着三个列的 div）内定位该列。主要的不同之处在于 position: relative规则。我们使用相对定位使主内容列可以影响其父元素（包围着三个列的 div）的尺寸并因此影响页脚元素的尺寸。

样式 div#foot设置页脚的宽度（width: 750px），该样式还包含一个 clear: both规则，该规则保证它接在其它元素下面，而不是旁边。由于它使用相对定位，所以它在页面上的位置是由其它元素的流所决定的，在这里具体是由包围着三个列的 div 所决定的。规则 margin-top: 100px是一个很重要的细节，它防止页脚被上面的列所覆盖。这些列在页面流中从它们的常规位置偏移，从而为绝对定位的标题以及需要相应偏移的页脚腾出空间。

居中样式的变化

在固定宽度页面布局中最常见且主要的变化可能是固定宽度的内容块漂在浏览器窗口的中间，而不是粘附于浏览器窗口的左边。你可以很容易地实现这一效果，方法是在其余标记周围（也就是 body 标签内）添加一个包装器（wrapper）div，并创建一个 CSS 样式来居中那个 div。

例如，图 B 是在图 A 的基础上添加了一个标签（<div id="wrapper">）和一个相应的 CSS 样式后的结果。下面是新添加的 CSS 样式的代码：

div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:750px;
background-color: #CCCCCC;
}

这种方法之所以能用，是因为所有的布局 div 都是相对于它们的父元素相对定位的。在图 A 中，标题、内容列和页脚所在 div 的父元素是 body 标签，但是在图 B 中，它们的父元素是 wrapper div。这种居中方法在“Creating a centered page layout with CSS（使用 CSS 创建居中页面布局）”一文中有详细的解释。

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有