使用DIVCSS创建固定宽的布局

下载本文档

ID 444471
格式 doc
大小 117.5 KB
约6页
收藏
点赞(0)
海报
举报

/ 6

下载本文档

文本预览下载提示常见问题

很多Web构建人员倾向于使用固定宽度的布局进行页面设计，因为它们能生成精确且可预知的结果。这种方法与打印布局非常接近，对于设计人员和访问者来说都是一个很重要的舒适因素；另外，对于包含很多大图片和其它元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局也是处理这种内容的最好方法。从table到div近年来，设计人员都使用表（table）来创建固定宽度的布局。表的列和行是对设计人员的布局表格（grid）的一种可行的模拟，所以一点也不奇怪设计人员为什么采用HTML表来完成页面布局。然而，基于表的布局有一个明显的问题。除了语义上不适合用表来进行布局之外，产生的代码也很混乱，难于阅读，甚至难于维护——尤其是在包含合并的表单元格（cell）和嵌套表时。使用div进行页面布局效果要好得多。除了这是推荐使用的最佳方法之外，代码的装载速度会更快，也更易于处理。表及其单元格的格式（formatting）属性被借用到固定宽度布局中，因为指定这些元素的尺寸相当简单。其实通过div可以做到同样的事情，只要确定div精确的维数并使用绝对和相对定位将这些div定位到页面上即可。一个固定宽度的例子图A---本文于网络，仅供参考，勿照抄，如有侵权请联系删除---图A展示了一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。所有元素的宽度都是固定的；在浏览器窗口发布变化时它们的尺寸都不会变化。下面的XHTML标记生成图A所示的页面。（出于简单考虑，内容被截短。）以下为引用的内容：<body><divid="head"><h1>header</h1></div><divid="columns"><divid="side1"><h3>side1</h3><ul><li>Letmenottothemarriageoftrueminds</li><li>Admitimpediments;loveisnotlove</li><li>Whichalterswhenitalterationfinds</li><li>Orbendswiththeremovertoremove</li><li>Oh,no,itisaneverfixedmark</li></ul></div><divid="content"><h2>maincontent</h2><p>Thatlooksontempests...hisheightbetaken.</p><p>Butbearsitout...alterationfinds.</p><p>Whoseworthsunknown,...theremovertoremove.</p></div><divid="side2"><h3>side2</h3><ul><li>Letmenottothemarriageoftrueminds</li><li>Admitimpediments;loveisnotlove</li><li>Whichalterswhenitalterationfinds</li></ul></div></div><divid="foot"><h3>footer</h3><p>Orbendswith...heightbetaken.</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;}分解代码这段标记并不是特别地值得注意——只是在每个主要页面元素的外面（标题、页脚、工具条和主内容）包围着div。每个div有一个id，相应的CSS样式可以使用这个id引用它。只有一个额外的div（divid="columns"）包围着三列内容区域。在InternetExplorer中将页脚放在三列中最长一列的下面是必要的。像平时用法一样，CSS代码完成所有的重要任务。首先它完成一些家务管理。Body样式将页面的边距设为零，h2,h3样式将默认间距设为零。否则的话，这该布局周围就会有一个边距，而在某些浏览器（比如N...

1、当您付费下载文档后，您只拥有了使用权限，并不意味着购买了版权，文档只能用于自身使用，不得用于其他商业用途（如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利）。
2、本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供参考，付费前请自行鉴别。
3、如文档内容存在侵犯商业秘密、侵犯著作权等，请点击“举报”。