关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程，今天给大家分享CSS网页布局全精通教程,希望对大家能有一点小小的帮助。
【 tulaoshi.com - Web开发 】
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.
相关文章：CSS网页布局开发小技巧24则
稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密.
要如何以CSS作出两栏版面布局？
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾.
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）我的愿望是:你能以本章作为指引开始构建一个网站,并发挥本书其他章节之内的方法制作内容.
我们将讨论的四种方法都应用在文档的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
titleCSS Layouts/title
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
/head
body
...方法示范...
/body
/html
为了让你可以了解要达成的版面配置,请看图12-1:这就是我们想要完成的分栏版面布局.
图12-1 两栏布局的框线图
来源:http://www.tulaoshi.com/n/20160219/1629758.html
