网页布局基础
摘要:网页布局是进行网页制作的基础.
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(固定定位)
-
SQL的SUBSTR 函数的使用方法介绍
SUBSTR函数是用来截取数据库某一列字段中的一部分。在各个数据库的函数名称不一样(真是蛋疼,后发明的`数据库难道不能同先发明的一样吗?)复制代码代码如下:MySQL:SUBSTR(),SUBSTRING()Oracle:SUBSTR()SQLServer:SUBSTRING();常用的方式是:SBUSTR(str,pos);就是从pos...
-
讲解HTML中iframe和frame的区别
不知道你在项目中用过frameset属性没有,frameset这个属性是在去年我在一个在线客服系统制作中用过,因为客服系统要有固定的布局,上面一块,下面一块等等,当时就是用的frameset和frame。在我用完了这些属性之后,我才明白了iframe和frame的`区别。因为在这之前,我项目中...
-
怎么使用Javascript获取距今n天前的日期
复制代码代码如下:functionTest(day){vartoday=newDate();varbeforMilliseconds=ime()-1000*3600*24*day;varbeforday=newDate();ime(beforMilliseconds);varstrYear=ullYear();varstrDay=ate();varstrMonth=onth()+1;if(strMonth<10){strMonth="0"+strMonth;}...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...