DIV+CSS技术在网页布局中的应用实现

2014-03-01李双远李阿辉

吉林化工学院学报 2014年3期

李双远，李阿辉

(吉林化工学院信息中心，吉林吉林132022)

DIV全称division意为“区块、分割”，DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域.通过DIV将复杂的页面进行细分块，可以将问题细分一个一个解决，所以通过DIV将页面分块是一个关键的工作，也是决定最终效果与质量的前提.

CSS(Cascading Style Sheet)，中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计并且随即引发了网页设计的潮流，使用CSS设计的优秀页面层出不穷［1-3］.

1 CCS样式的基础应用

1.1 CSS控制页面的方式

·行内样式

＜div style="属性1:值1;属性2:值2;"＞＜/div＞

行内样式一般用于需要单独控制的元素，因为行内样式的优先级是最高的.

·嵌入样式

＜style type="text/css"＞

选择器{属性1:值1;属性2:值2;}

＜/style＞

嵌入样式一般是直接写在html文档头部的一种样式，为了文档的整洁性和易于控制操作性，当需要写大量样式代码的时候，是不用嵌入样式的.

·外部样式

＜link rel="stylesheet"type="text/css"href="url"＞

这段代码是放在html文档头部的，用于调用外部的样式.前面两种样式我们一般都不用于有大量样式代码的情况，那么这种方式当选最为合适.

·导入样式

@import url(外部样式表位置);

·优先级别:

-行内样式表＞其他的样式表

-其他的样式表，优先级一样，按照导入的顺序来确定他们是否起

作用.

1.2 CSS 选择器

CSS控制样式，那么CSS是怎么控制到元素的呢?这点正是因为CSS具有强大且众多的CSS选择器，也正是因为拥有众多选择器，CSS才能够运用自如的承载样式.下面是CSS所拥有的选择器:

·id选择器

-#idname

·类选择器

-.classname

·标签选择器

-tagname

·交叉选择器

-tagname.classname tagname#idname

·群组选择器

-多个选择器用 “，”隔开

·后代选择器(包含选择器)

-父级和子级用空格隔开

·通用选择器

-*{}

·子选择器

-子选择器用于选中元素的直接后代(即儿子)，它的定义符

号是大于号(＞)

body＞p{color:green;}

·相邻选择器

-相邻选择器的定义符号是加号(+)，相邻选择器将选中紧

跟在它后面的一个兄弟元素(这两个元素具有共同的父元素)

h2+p{color:red;}

·属性选择器

-匹配属性

a［name］{color:purple;}

div［border］{border-color:gray;}

2 DIV+CSS布局优势

目前电子商务网站发展很快，也推进了网页布局的发展，对布局的要求更加专业化，规范化，相比表格页面，DIV+CSS有明显的优势.那么在介绍DIV+CSS与表格布局所拥有的优势之前，首先分别用表格和DIV+CSS来简单模拟这样的效果:五个大小全为200pxX300px的块，并且这五个块中字体的颜色全为紫色，大小为14px.

2.1 用表格来实现

＜html＞

＜head＞＜title＞表格页面＜/title＞

＜/head＞

＜body＞

＜table width="200"height="300"border=＇0＇

cellpadding= ＇0＇cellspacing= ＇0＇＞

＜tr width="200"height="300"＞

＜ td width= ＇200＇＞＜ font color= ＇purple＇size=＇2＇＞块中字体1＜ /font＞＜ /td＞

＜ td width= ＇200＇＞＜ font color= ＇purple＇size=＇2＇＞块中字体2＜ /font＞＜ /td＞

＜ td width= ＇200＇＞＜ font color= ＇purple＇size=＇2＇＞块中字体3＜ /font＞＜ /td＞

＜ td width= ＇200＇＞＜ font color= ＇purple＇size=＇2＇＞块中字体4＜ /font＞＜ /td＞

＜ td width= ＇200＇＞＜ font color= ＇purple＇size=＇2＇＞块中字体5＜ /font＞＜ /td＞

＜/tr＞

＜/table＞

＜/body＞

＜/html＞

2.2 用DIV+CSS来布局

＜html＞

＜head＞

＜title＞DIV+CSS页面＜/title＞

＜style type="text/css"＞

div{

padding:0px;

margin:0px;

width:200px;

height:300px;

color:purple;

font-size:14px;

float:left;

}

＜/style＞

＜/head＞

＜body＞

＜div＞块中字体1＜/div＞

＜div＞块中字体2＜/div＞

＜div＞块中字体3＜/div＞

＜div＞块中字体4＜/div＞

＜div＞块中字体5＜/div＞

＜/body＞

＜/html＞

2.3 比较总结

从上面的代码比较可以看出，用表格来实现上面的效果代码是多冗余的.首先5个块表格需要设置5次宽高，实现字体的颜色，也要对每个字体加已经不常用的font标签，并且还得重复写5次.那么，如果一个大商城有几十甚至上百个样式相同的内容，用表格还重复写几十遍到上百遍?此时CSS样式的高效率、易于维护、加载速度快等优势便淋漓尽致的展现出来.还有其中想要字体的大小是14px，然而font元素不具有这样具体像素大小的属性，这样字体的大小也不是很顺我们意的实现.那么我们可以总结出DIV+CSS布局的一下优势:

(1)弥补html标签的功能缺陷，可以使页面的美工上升一个高度.

(2)加载速度快，节省更多流量.虽然表面上看加载一次并节省不了多少流量，但是当你的页面被加载10000次呢?节省流量可想而知.

(3)便于维护和管理，节省大量的人力和成本.一个页面不可能一直不变，当想对一个页面做一些更改的时候，如果是表格布局的话就会很让人头疼，大量的冗余代码需要一一更改.然而CSS只需要修改一下样式便可.

(4)页面结构清晰，页面内容和表现分离.外部样式单独存在于一个文件中，互不影响.

另外DIV+CSS布局对搜索引擎更加友好，更有利于抓取和收取您的页面.

3 DIV+CSS技术在网页布局中的应用实现

在前面我们已经叙述了CSS样式的基本应用.那么在网页布局中表格或其他块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，一个CSS盒子也具备这些属性，盒子模型表达的很清楚.我们下面将用一个实例来阐述DIV+CSS在网页中具体应用实现方法.

DIV+CSS设计实例图

图中运用的div+css技术:

(1)网页居中，运用css中margin:0 auto;控制即可以使网页居中，方便快捷.

(2)滑动门技术，体现了css的强大功能.采用css+js和纯css技术均能实现，这里用纯css来实现滑动门技术.

CSS代码:

#nav{

width:303px;

height:200px;

border:1px solid#CCCCCC;

}

#column a{

float:left;

width:100px;

border-right:1px solid#CCC;

border-bottom:1px solid#CCC;

font:bold 14px/30px Arial，Helvetica，sans-serif;

color:#000;

text-decoration:none;

text-align:center;

}

#contant{

width:303px;

height:162px;

overflow:hidden;

}

ul{

margin:0;

padding:0;

list-style-type:none;

padding:4px 0 0 5px;

}

li{

font-size:12px;

overflow:hidden;

padding-left:2px;

line-height:27px;

}

body内部代码:

＜div id="nav"＞

＜div id="column"＞＜a href="#one"＞企业新闻＜/a＞＜a href="#two"＞行业信息＜/a＞＜a href="#three" ＞产品介绍＜/a＞＜/div＞

＜div id="contant"＞

＜ul id="one"＞

＜li＞＜a href="#"＞滑动门1 ＜/a＞＜/li＞

＜li＞＜a href="#"＞滑动门1 ＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门1 ＜/a＞＜/li＞＜/ul＞＜ul id="two"＞＜li＞＜a href="#"＞滑动门2＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门2＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门2＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门2 ＜/a＞＜/li＞＜/ul＞＜ul id="three"＞＜li＞＜a href="#"＞滑动门3＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门3＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门3＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门3＜/a＞＜/li＞＜li＞＜a href="#"＞滑动门3＜/a＞＜/li＞＜/ul＞＜/div＞＜/div＞

(3)图中错综复杂的框架，运用css样式来实现比表格的嵌套简单方便很多，上面已经比较过.

(4)轮播图，运用css+js技术来实现.电子商务网站中都已经离不开轮播图的效果，直观的动态效果，多张图片组合，具有很强的视觉冲击，从而吸引访问者.在这里可以看出css+div技术不仅单独制作网页，而且可以兼容其他网页技术，丰富了建站技术及内容，使页面载入更快;可以降低网站流量费用;设计师在设计时和修改时更有效率，而代价更低;使整个站点保持视觉的一致性.使用CSS的DIV排版方式使得数据与CSS文件完全分离，美工修改页面时不需要关心后台任何操作问题，而表格依赖各个单元格，美工必须在大量后台代码中寻找排版方式