html网页制作网页布局教程,网页布局入门教程 如何用CSS进行网页布局

一、基础概念

W3C标准：由万维网联盟制定的一系列标准：包括：

结构化标准语言(HTML和XML)；

表现标准语言(CSS)；

行为标准语言(DOM和ECMAScript)。

倡导结构，样式，行为分离。

CSS中的定位机制：

1、标准文档流(Normal flow)：从上到下，从左到右，输出文档内容，由块级元素(从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。常见块级元素：div、lu、li、d、dt、p……)和行级元素(能在同一行内显示，不会改变HTML文档结构。常见行级元素：span、strong、img、input……)组成。

2、浮动(Floats)：

3、绝对定位(Absolute positioning)：

盒子模型：网页布局的基石，有四部分组成：

边框(border)、外边距(margin)、内边距(padding)、盒子中的内容(content)。如下图：

盒子的尺寸=边框+外边距+内边距+盒子中的内容尺寸

注：块级元素和行级元素都是盒子模型。

盒子3D模型：

常见页面布局及解决方案：

二、自动居中一列布局

关键词：标准文档流，块级元素，margin属性

自动居中一列布局需要设置margin左右值为auto，而且一定要设置宽度为一个定值。

auto会根据浏览器的宽度自动地设置两边的外边距

如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动和绝对定位属性

代码示例：

一列布局固定：

XML/HTML Code复制内容到剪贴板

一列布局

body{ margin:0; padding:0; font-size:30px}

div{ text-align:center; font-weight:bold}

.head, .main, .footer{ width:960px; margin:0 auto} /*margin属性及具体的宽度*/

.head{ height:100px; background:#ccc}

.main{ height:600px; background:#FCC}

.footer{ height:50px; background:#9CF}

head