相关文章
网站设计实现Title动态效果JS脚本
北京网页设计用Dreamweaver批量做web网页
北京网站制作网页特效：滑动展开与折叠效果
网页设计javascript技术讲座-创建新对象
网站制作网页设计配色应用实例剖析——黑色系
网站建设方法汇总 禁止查看网页源代码全攻略
做GOOGLE月入一万RMB提示交流
北京网站建设十大网站设计错误
网站建设网页设计三部曲之三:艺术处理原则
网页设计40种网页常用小技巧
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站制作网页设计使用 DIV+CSS 创建固定宽度的布局
北京网站制作网页设计使用 DIV+CSS 创建固定宽度的布局
我最近的几篇专栏文章讨论了使用 XHTML 和 CSS 实现两列或三列页面布局的各个方面。到目前为止，所有例子都使用流式布局（也就是布局会自动扩展和适应浏览器窗口的宽度）。现在是时候考虑另外一种主要的页面布局方法了，这种布局方法是固定宽度布局。 网站设计
Www@Chinaz@com
很多 Web 构建人员倾向于使用固定宽度的布局进行页面设计，因为它们能生成精确且可预知的结果。这种方法与打印布局非常接近，对于设计人员和访问者来说都是一个很重要的舒适因素；另外，对于包含很多大图片和其它元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局也是处理这种内容的最好方法。
Www@Chinaz@com
北京网站建设从table 到 div
Chinaz^com
近年来，设计人员都使用表（table）来创建固定宽度的布局。表的列和行是对设计人员的布局表格（grid）的一种可行的模拟，所以一点也不奇怪设计人员为什么采用 HTML 表来完成页面布局。 Chinaz
然而，基于表的布局有一个明显的问题。除了语义上不适合用表来进行布局之外，产生的代码也很混乱，难于阅读，甚至难于维护——尤其是在包含合并的表单元格（cell）和嵌套表时。 中.国站长站
使用 div 进行页面布局效果要好得多。除了这是推荐使用的最佳方法之外，代码的装载速度会更快，也更易于处理。
中国站.长.站
表及其单元格的格式（formatting）属性被借用到固定宽度布局中，因为指定这些元素的尺寸相当简单。其实通过 div 可以做到同样的事情，只要确定 div 精确的维数并使用绝对和相对定位将这些 div 定位到页面上即可。
一个固定宽度的例子
中.国.站.长.站
中国站长.站
图A [中国站长站]
图A展示了一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。所有元素的宽度都是固定的；在浏览器窗口发布变化时它们的尺寸都不会变化。 Chinaz_com
下面的 XHTML 标记生成图 A 所示的页面。（出于简单考虑，内容被截短。）
Chinaz@com
| 以下为引用的内容：网站设计 <body>网页设计 Chinaz_com 网站制作<li>Which alters when it alteration finds</li>北京网站制作 <li>Or bends with the remover to remove</li>北京网站设计 <li>Oh, no, it is an ever fixed mark</li>网站设计 </ul>网站设计 </div>企通互联 <div id="content">网站制作 <h2>main content</h2>企通互联 <p>That looks on tempests ... his height be taken.</p>企通互联 <p>But bears it out ... alteration finds.</p>北京网站建设 <p>Whose worth's unknown, ... the remover to remove.</p>北京网站设计 </div>网站设计 <div id="side2"> Chinaz^com 北京网站制作<h3>side2</h3>网站设计 <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>网站制作 <div id="foot">网站设计 <h3>footer</h3>北京网页设计 <p>Or bends with ... height be taken. </p>网页设计 </div>网站制作 </body> 中国.站长站
|
下面是将页面设计为固定宽度布局的 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; 中.国.站长站 北京网站制作} |
分解代码 Chinaz@com
这段标记并不是特别地值得注意——只是在每个主要页面元素的外面（标题、页脚、工具条和主内容）包围着 div。每个 div 有一个 id，相应的 CSS 样式可以使用这个 id 引用它。只有一个额外的 div（div id="columns"）包围着三列内容区域。在 Internet Explorer 中将页脚放在三列中最长一列的下面是必要的。
Www^Chinaz^com
像平时用法一样，CSS 代码完成所有的重要任务。首先它完成一些家务管理。Body样式将页面的边距设为零，h2, h3 www.qitongnet.com样式将默认间距设为零。否则的话，这该布局周围就会有一个边距，而在某些浏览器（比如 Netscape 和 Mozilla）中标题将会在在主内容和页脚的上面产生一个空白区域。 Www@Chinaz@com
样式div#head为标题 div 设置一个明确的高度和宽度。标题使用 position: absolute, top: 0px和 left: 0px规则显式地定位在页面的左上角。规则 position: absolute是非常重要的，因为定位属性（top、left、right、bottom）在常规（静态）定位时会被忽略。然而要记住，任何绝对定位的元素都会从常规的页面流中被移除掉，而属于页面流的元素将会像绝对定位元素不存在一样被定位到页面上。 网页设计 Www~Chinaz~com
样式 div#columns控制 div 的格式，使其充当三个列的容器。它使用 position: relative创建属于常规页面流的一个元素（它会根据其内容进行扩展和适应，因而影响其它元素的定位），但是它将从其常规位置偏移。规则 top: 100px提供一个偏移量，将列容器向下推，使其覆盖标题。
Chinaz
规则 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是一个很重要的细节，它防止页脚被上面的列所覆盖。这些列在页面流中从它们的常规位置偏移，从而为绝对定位的标题以及需要相应偏移的页脚腾出空间。 Www@Chinaz@com
居中样式的变化
在固定宽度页面布局中最常见且主要的变化可能是固定宽度的内容块漂在浏览器窗口的中间，而不是粘附于浏览器窗口的左边。你可以很容易地实现这一效果，方法是在其余标记周围（也就是 body 标签内）添加一个包装器（wrapper）div，并创建一个 CSS 样式来居中那个 div。
Www~Chinaz~com
图B
北京网站设计例如，图B是在图 A 的基础上添加了一个标签（<div id="wrapper">）和一个相应的 CSS 样式后的结果。下面是新添加的 CSS 样式的代码： Chinaz_com
| 以下为引用的内容：北京网页设计 div#wrapper {网站建设 中.国.站长站
|
这种方法之所以能用，是因为所有的布局 div 都是相对于它们的父元素相对定位的。在图 A 中，标题、内容列和页脚所在 div 的父元素是 body 标签，但是在图 B 中，它们的父元素是 wrapper div。这种居中方法在“Creating a centered page layout with CSS（使用 CSS 创建居中页面布局）”一文中有详细的解释。
Www@Chinaz@com
