使用DIV+CSS布局页面——1

1.什么是div

        div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上时个容器,例如使用

段落的标签。

段落

       

标签作为一个容器,其中放入了内容。同样的,div也是一个容器,能够放置内容,例如:

	
文档内容

        在传统的表格样式的布局当中,之所以能进行页面的排版布局设计,完全依赖于表格对象 table。在页面当中绘制一个有多个但愿个组成的表格,在相应的表格中放置内容,通过表格单元的位置控制,到达实现布局的目的,这是表格布局的核心。这里介绍的则是一种全新的布局方式——CSS布局。div是这种布局的核心,只用CSS布局的页面排版不需要依赖表格,做一个简单的布局只需要依赖DIV与CSS,因此也可以称为DIV+CSS布局。

2.插入DIV

        与其他HTML对象一样,只需要在代码中应用

...
这样的标签样式,将内容放置其中,便可以应用div标签。

        div对象出了可以直接放入文本和其他标签,也可以将多个Div标签进行嵌套使用,最终的目的是合理标识出页面的区域。

        在使用DIV对象的时候,同其他HTML对象一样,可以加入其他属性,如:id、class、align、style等,而在CSS页面布局方面,为了实现内容与表现分离,不应将align对齐属性,以及style行间样式表属性编写在HTML页面的DIV标签中,因此,div代码只能拥有以下两种形式:

	

        使用id属性,可以为当前这个DIV指点一个id名称,在CSS中使用id选择器进行样式进行编写。同样使用class属性,在CSS中使用class选择器进行编写。

提示

同一名称的id值在当前HTML页面中,只允许使用一次,不管是应用到DIV中,还是应用到其他对象的id中,而class则可以重复使用。

3.div的嵌套和固定格式

        div可以进行多行嵌套使用,嵌套的目的为了实现更为复杂的页面排版,例如,当设计一个网页时,首先需要有整体布局,需要产生头部、中部和底部,这也许产生一个福州市的div结构。
	

     在diamante中,每个div定义了id名称已提供识别。可以看到id为top、main、bottom的3个对象,它们之间属于并列关系,一个接一个,在网页的布局结构中如果以垂直方向布局为例,代表的是如图一所示一种布局关系。而在main中,为了内容需要,有可能使用左右栏的布局样式,因在main中增加两个id分别为left和right的div。这两个div本身是并列关系,而他们都处于main中。因此他们与main形成了一种嵌套关系哦,如果left和right被样式控制为左右显示的话,那么他们最终的布局应是图2所示。

使用DIV+CSS布局页面——1_第1张图片   使用DIV+CSS布局页面——1_第2张图片

            图一                                                图二

        网页布局则由这些嵌套的DIV来构成,无论是多么复杂的布局方法,都可以使用DIV之间的并列与嵌套来实现。



CSS布局定位

1.浮动定位

    浮动定位是CSS排版中非常重要的手断。浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边缘。应为浮动框不在文档的普通流中,所以文档中的块框表现得就像浮动框不存在一样。float可选参数如下图:

float可选参数

使用DIV+CSS布局页面——1_第3张图片


提示:

        为什么要设置float属性呢?因为在网页中分行内元素和块元素,行内元素是可以显示在同行上的元素,例如;

块元素是占据正行的空间元素,例如

。如果需要将两个
显示在同一行上,就需要使用float属性。


2.position定位

        在使用DIV+CSS布局制作网页的过程,都是通过CSS的定位属性元素完成位置和大小进行控制的。定位就是精确地定位HTML元素在页面中的位置,可以页面的决对位置,也可以是相对于附近元素或许另一个元素的相对位置。

        position属性是最主要的定位属性,position属性即可以元素的绝对位置,又可以定义元素的相对位置。position属性的语法格式如下:

position:static| absolute | fixed | relative

position可选参数下图

position可选参数

使用DIV+CSS布局页面——1_第4张图片

3.相对定位

        如果对一个元素进行相对定位(relative),那么在它所在的位置上,通过设置垂直或水平位置,让这个元素相对于起点进行移动。如果将top设置为40像素,那么相对定位的框架出现原位置顶部下面40像素的位置。如果将left设置为40像素,那么会在元素左边创建40像素的空间,也就是将元素向有移动。代码如下:

#main{
		width:400px;
		height: 400px;
		float: left;	
		border: 1px solid #FB0A0E;
		position: relative;
		left: 40px;
		top: 40px;

4.绝对定位

        相对定位实际被看作普通流定位模型的一部分,因此元素的位置相对于它在普通流中的位置。与之相反,绝对定位(absolute)使用了绝对之后,对象就浮在网页的上面。代码如下:

#main{
		width:400px;
		height: 400px;
		float: left;	
		border: 1px solid #FB0A0E;
		position: absolute;
		left: 40px;
		top: 40px;
	}

        与相对定位的框一样,决定定位的框可以从他的包含向上、下、左、右移动这提供了很大的灵活性,可以直接将元素定位在页面上的任何位置。

5.悬浮定位

        设置position属性为fixed,即可将元素的定位方式设置 为固定(fixed)。固定位和决定位比较相似,它是绝对定位的一种特殊形式,固定定位的容器不会随着拖动滚动条而变化位置。在视线中,固定定位的容器不会改变的。固定定位可以把一些特性效果固定在浏览器的视线位置。

        在CSS样式中设置了position属性后,还可以对其他的位置进行设置,包括width、height、z-index、top、right、bottom、left、overflow和clip,其中top、right、boottom和left只有position属性中使用才起作用。

(1)top、right、bottom和left

        top属性用于设置元素垂直距顶部的距离;right属性用于设置元素水平距离右部的距离;bottom属性用于设置元素水平水平距左部的距离。

(2)z-index

            z-index属性用于设置元素层叠顺序。

(3)width和height

        width属性用于设置元素的宽度;height属性用于设置元素的高度。

(4)overflow

           overflow属性用于设置元素内容溢出的处理方法。

(5)clip

        clip属性用于设置元素的剪切方法









 

你可能感兴趣的:(使用DIV+CSS布局页面——1)