CSS网页布局全精通

在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章：CSS网页布局开发小技巧24则稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 要如何以CSS作出两栏版面布局? 答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾. 我的愿望是:你能以本章作为指引开始构建一个网站,并发挥本书其他章节之内的方法制作内容. 我们将讨论的四种方法都应用在文档的<body>与</body>标签之间,同时我会在开始讨论每种方法之前介绍将会使用的标记语法结构. 为了让你了解围绕着每种方法的页面结构,让我们大致看一下还需要加入些什么: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>CSS Layouts</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>...方法示范...</body></html> 为了让你可以了解要达成的版面配置,请看图12-1:这就是我们想要完成的分栏版面布局. 图12-1 两栏布局的框线图上一页12 3 4 5 6 7 8 9 下一页

　　推荐阅读

　　CSS元素的层叠与z-index设置

　　我们在文章的更新中，特别注重对新手的辅导，但jb51.net面对的是广大的开发人员，大家可能会遇到各种各样的问题，有些问题很不常见，或者应用的很少，但我们依然有必要学习更多的CSS布局知识与技术，以应对可>>>详细阅读

本文标题：CSS网页布局全精通

地址：http://www.17bianji.com/kaifa2/CSS/17303.html

1/2 1