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

新客网 XKER.COM 2006-05-21 来源：收藏本文

下面是将页面设计为固定宽度布局的 CSS 代码。

以下是引用片段：
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}
h2,h3 {
    margin-top: 0px;
    padding-top: 0px;
}
div#head {
    position: absolute;
    width:750px;
    height:100px;
    left:0px;
    top: 0px;
    background-color: #FFFF66;
}
div#columns {
    position: relative;
    width: 750px;
    top: 100px;
    background-color: #CCCCCC;
}
div#side1 {
    position:absolute;
    width:150px;
    top: 0px;
    left:0px;
    background-color: #FF6666;
}
div#content {
    position: relative;
    width: 450px;
    top: 0px;
    left: 150px;
    background-color: #999999;
}
div#side2 {
    position:absolute;
    width:150px;
    top: 0px;
    left: 600px;
    background-color: #00FF66;
}
div#foot {
    position: relative;
    width: 750px;
    clear: both;
    margin-top: 100px;
    background-color: #99FFFF;
}

分解代码

这段标记并不是特别地值得注意——只是在每个主要页面元素的外面（标题、页脚、工具条和主内容）包围着 div。每个 div 有一个 id，相应的 CSS 样式可以使用这个 id 引用它。只有一个额外的 div（div id="columns"）包围着三列内容区域。在 Internet Explorer 中将页脚放在三列中最长一列的下面是必要的。

像平时用法一样，CSS 代码完成所有的重要任务。首先它完成一些家务管理。Body样式将页面的边距设为零，h2, h3样式将默认间距设为零。否则的话，这该布局周围就会有一个边距，而在某些浏览器（比如 Netscape 和 Mozilla）中标题将会在在主内容和页脚的上面产生一个空白区域。

样式div#head为标题 div 设置一个明确的高度和宽度。标题使用 position: absolute, top: 0px和 left: 0px规则显式地定位在页面的左上角。规则 position: absolute是非常重要的，因为定位属性（top、left、right、bottom）在常规（静态）定位时会被忽略。然而要记住，任何绝对定位的元素都会从常规的页面流中被移除掉，而属于页面流的元素将会像绝对定位元素不存在一样被定位到页面上。

样式 div#columns控制 div 的格式，使其充当三个列的容器。它使用 position: relative创建属于常规页面流的一个元素（它会根据其内容进行扩展和适应，因而影响其它元素的定位），但是它将从其常规位置偏移。规则 top: 100px提供一个偏移量，将列容器向下推，使其覆盖标题。

共3页: 上一页 [1] [2] [3] 下一页

上一篇：手写样式表：CSS语法全攻略（上）下一篇：CSS让表格的溢出内容隐藏起来

【收藏】【评论】【推荐】【投稿】【打印】【关闭】