- 相关推荐
网页布局基础
摘要：网页布局是进行网页制作的基础.
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种定位机制：
标准文档流
浮动
绝对定位
标准文档流，特点：
从上到下，从左到右，输出文档内容
由块级元素和行级元素组成
块级元素，特点：
从左到右撑满页面，独占一行
到页面边缘时，会自动换行
div\ul\li\dl\dt\p...
行级元素，特点：
能在同一行内显示
不会改变HTML文档结构
span\strong\img\input...
大部分表单元素
块级元素和行级元素都是盒子模型。
盒子模型
盒子模型=网页布局的基石，由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(固定定位)
【网页布局基础】相关文章：
网页设计的布局12-06
常见的网页布局设计04-21
网页设计中美丽的布局03-19
关于网页设计布局的分析03-30
常见的网页布局设计有哪些03-27
如何用css进行网页布局03-20
网页设计要明确的那些布局细节12-20
关于网页的基础知识11-29