css网页布局有哪些常见的方法_css网页布局有什么方法

　　三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。下面由学习啦小编为大家整理的css网页布局的方法，希望大家喜欢!

　　css网页布局的方法

　　一、基本方法

　　基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。

　　二、三栏布局的一个例子

　　请看看用本文所介绍的技术进行三栏布局的例子。

学习啦在线学习网 　　三、XHTML代码：

　　Header

　　Port side text...

　　Starboard side text...

　　Middle column text...

学习啦在线学习网 　　Footer text...

　　css页面布局的代码

　　一、单行一列

学习啦在线学习网 　　body{margin:0px;padding:0px;text-align:center;}

学习啦在线学习网 　　#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　二、两行一列

　　body{margin:0px;padding:0px;text-align:center;}

　　#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　三、三行一列

学习啦在线学习网 　　body{margin:0px;padding:0px;text-align:center;}

　　#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　#content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}

　　四、单行两列

学习啦在线学习网 　　#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

学习啦在线学习网 　　#bodycenter#dv1{float:left;width:280px;}

学习啦在线学习网 　　#bodycenter#dv2{float:right;width:410px;}

　　五、两行两列

　　#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

　　#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

　　#bodycenter#dv1{float:left;width:280px;}

　　#bodycenter#dv2{float:right;width:410px;}

　　六、三行两列

　　#header{width:700px;margin-right:auto;margin-left:auto;}

学习啦在线学习网 　　#bodycenter{width:700px;margin-right:auto;margin-left:auto;}

　　#bodycenter#dv1{float:left;width:280px;}

　　#bodycenter#dv2{float:right;width:410px;}

　　#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

　　css页面布局有哪些优点

　　1、简介：为何使用表格排版是不明智的?

学习啦在线学习网 　　表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。

学习啦在线学习网 　　2、概览：这对我有什么用处?

　　我们将告诉你这样一种工作方式，它会：

　　使你的页面载入得更快

学习啦在线学习网 　　降低你的流量费用

　　让你在修改设计时更有效率而代价更低

学习啦在线学习网 　　帮助你的整个站点保持视觉的一致性

学习啦在线学习网 　　让你的站点可以更好地被搜索引擎找到

　　使你的站点对浏览者和浏览器更具亲和力

　　在世界上越来越多人采用 Web 标准时，它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。

学习啦在线学习网 　　3、表格带来的问题

　　把格式数据混入你的内容中。

　　这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。

　　带宽并非免费。

学习啦在线学习网 　　这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。

学习啦在线学习网 　　这还使我们保持整个站点的视觉的一致性极难，花费也极高。

学习啦在线学习网 　　基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

　　4、过渡性的设计

学习啦在线学习网 　　使用 margin 和 padding 来代替多余的表格单元和间隔 GIF。

　　使用 link 和 @import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。

　　5、结构化标记：所写即所想，所想即所写

　　即便书写 CSS 很简单，使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。

　　我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。

　　我们用

　　标记来标示最重要的头条;次一级的条目则用

　　来标记，以此类推;而段落则放在

　　标记中。

　　这就是我们称之为“结构标记”或“语义标记”的东西。

学习啦在线学习网 　　你的内容将不放在表格和表格元素中，取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class，不过这是为了描述它们的内容或功能，而非它们的外观。