网页布局基础

摘要：网页布局是进行网页制作的基础.

　　1、页面尺寸:

一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高页面尺寸越大。网页的高度不易超过三屏。

　　2、页头:

页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

　　3、文本:

文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的'可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着Dhtml的兴起,文本已经可以按照自己的要求放置到页面的任何位置。

　　4、页脚:

页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。

　　5、图片

图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

了解完上述5个基本要素再深入了解DIV+CSS布局网页的要点

　　流式布局、浮动布局、绝对定位布局。

标准文档流、例子模型、FLOAT属性、POSITION属性。

自动居中——列布局安全——例子模型的使用方法。

浮动布局案例——float属性、解决浮动影响的方法。

绝对定位布局案例——绝对定位实现横向两列或多列布局。

　　W3C标准

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

表现标准语言(CSS)

行为标准语言(DOM和ECMAScript)

倡导结构、样式、行为分离

　　CSS中3种定位机制：

标准文档流

浮动

绝对定位

　　标准文档流，特点：

从上到下，从左到右，输出文档内容

由块级元素和行级元素组成

　　块级元素，特点：

从左到右撑满页面，独占一行

到页面边缘时，会自动换行

divullidldtp...

　　行级元素，特点：

能在同一行内显示

不会改变HTML文档结构

spanstrongimginput...

大部分表单元素

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

　　盒子模型

盒子模型=网页布局的基石，由4个部分组成：

边框(border)

外边距(margin)

内边距(padding)

　　盒子中的内容(content)

上右下左

上(左右)下

(上下)(左右)

(上下左右)

　　样式表：(就近样式)

外部样式

内部样式

行内样式

　　盒子模型三维立体图：

border

content+padding

background-image

background-color

margin

自动居中一列布局

　　三个技能点：

标准文档流

块级元素

margin属性

#wrap{width:770px; margin:0 auto;}

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

(浏览器的宽度-外包含层的宽度)/2=外边距

浮动布局

CSS中规定的第二种定位机制

能够实现横向多列布局

通过设置float属性实现

　　float属性，值：

left——左浮动

right——右浮动

none——不浮动

特点：元素会左移、右移，直到触碰到窗口为止

设置了浮动的元素，仍旧处于标准文档流中

当元素没有设置宽度值，面设置了浮动属性，元素的宽度随内容的变化面变化

当元素设置了浮动属性后，会对相邻的元素产生影响，相邻的元素特指紧邻后面的元素

　　清除浮动的常用方法：

clear属性——常用clear:both;

clear:left; 或者 clear:right

同时设置width:100%;(或固定宽度) + overflow:hidden;

　　横向两列布局：

网页布局最觉的方式之一

　　主要应用技能

float属性——使纵向排列的块级元素，横向排列

margin属性——设置两列之间的间距

position属性

拥有3种定位形式：1静态定位 2相对定位 3绝对定位

　　可设置4个属性值

static(静态定位)

relative(相对定位)

absolute(绝对定位)

fixed(固定定位)