浅谈CSS+DIV在网页制作中的应用(全文)

开篇：润墨网以专业的文秘视角，为您筛选了一篇浅谈CSS+DIV在网页制作中的应用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要：css+div是一种网页布局方法,这种网页布局方法有别于传统的表格布局,真正地达到了内容与样式相分离。使用DIV搭建框架，使用CSS定制、改善网页的显示效果。本文通过对CSS+DIV与传统页面布局方法进行比较，阐述了CSS+DIV在实际应用中的优势。

关键词：CSS+DIV；网页制作

中图分类号：TP393.092 文献标识码：A文章编号：1007-9599(2012)02-0000-02

CSS + DIV Usage in Web Production

Che Kaisen

(Hubei Finance&Taxation College,Wuhan430064,China)

Abstract:CSS + DIV is a page layout approach,this method of page layout is different from the traditional form layout,to achieve the content and style of the phase separation.DIV build the framework,use CSS to customize and improve page display.In this paper,CSS + DIV with traditional page layout on the advantages of CSS + DIV in practical applications.

Keywords:CSS + DIV;Web production

如今利用传统表格进行页面布局的弊端逐渐暴露，web标准和重要性越来越被人们。CSS+DIV的排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行DIV的分块，然后对各个块进行CSS设计，最后再在各个块中添加相应的内容。CSS+DIV的网页布局方法可以使外观与结构分离，使站点的访问及维护更加容易，通过CSS+DIV排版的页面，更新十分的容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。

一、网页制作流程

（一）页面布局

页面布局即页面的版式设计，如同我们要装修一幢大楼，需要先划分好其中的区域。页面布局就是对页面进行区域划分，以便将不同的元素放置在指定的位置。

（二）添加网页元素

进行页面布局后，网页框架搭建完成，将相应的内容添加至相应的区域中。

（三）美化网页

页面基本完成后，对网页进行美化处理。对网页中的各部分及元素的显示效果进行调整。

（四）网页测试

制作完一个网页，必须保证网页能够被正常浏览和使用。需对网页中的图片、文字、相关链接等进行检查，对浏览器的兼容性进行检测。

二、CSS

CSS（Cascading Style Sheet），中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的引入就是为了使得HTML语言能够更好发适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。

CSS样式一般是作用在DIV上的，可以为每个DIV区域定义独特的CSS，这样我们就可以将网页中指定的DIV部分变成我们所需要的风格、样式，而网页又是由多个DIV构成，从而达到美化网页的作用。

在CSS还没有被引入页面设计之前，传统的HTML语言要实现页面美工上的设计是十分麻烦的，如下面一段代码：

页面标题

网页布局

CSS+DIV

var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '.省略']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.省略/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model01'; WebPageSpeed =344; UrchinTrack();

若要将这段代码中的标题（网页布局）变成红色，并对字体进行相应的设置，则需要引入标记：

网页布局

此时，修改并不是很麻烦，但当页面的内容不仅仅只有一段，而是大段代码时，修改起来就相当繁琐和复杂。

如下所示。

页面标题

网页布局1

CSS+DIV 1

网页布局2

CSS+DIV 2

网页布局3

CSS+DIV 3

网页布局4

CSS+DIV 4

我们看到，将上面一段代码中的4个标题都改成红色，在HTML语言中需要对每个标题的标记都进行修改。

同样，将4个标题都改成红色，引入CSS来对页面进行修改，如下所示。

页面标题

h2{

font-family：黑体；

color：red；

}

-->

网页布局1

CSS+DIV 1

网页布局2

CSS+DIV 2

网页布局3

CSS+DIV 3

网页布局4

CSS+DIV 4

用CSS进行处理，仅需要创建一个针对h2的标记选择器，对h2的样式进行设置，那么整个页面中的所有h2就可以一次性全部调整。代码简单，结构清晰。

相比传统HTML，CSS技术具有以下优点：

1.维护方便。当对某类对象进行样式修改时，只需针对某个特殊标记创建样式，不需花费很多时间，尤其对于整个网站而言，后期修改和维护的成本都有所降低。

2.样式丰富。HTML本身的标记比较少，特别是美工样式的标记远不够使用，比如文字间距、段落缩进等，这些在CSS里都可以进行设置。

3.页面结构清晰。CSS统一对各种风格样式进行控制并且代码相对简单。

4.定位容易。

CSS对于网页的整体控制较单纯的HTML语言有了突破性的进展，并且后期修改和维护都十分方便。不仅如此，CSS还提供各种丰富的格式控制方法，使得网页设计者能够轻松地应对各种页面效果。

三、DIV

（division）是一个区块窗口标记，即与之间相当于一个容器，可以容纳段落、标题、表格、图片等各种HTML元素。因此，可以把与中的内容视为一个独立的对象。

我们知道，网页布局就是对网页的结构划分，将一个网页划分成若干个区域。网页布局常用的方法有表格、布局表格、层、框架，DIV是网页的众多布局方法中的一种。

网页就是放置网络效果的平台，在其中，展示的信息需要美观、有逻辑性地排列，这就好比在店铺里，不能把所有的都没规则地堆放在一起，因为那样就会使我们的店铺杂乱不堪，而且商品也不容易被很快的找到，所以就需要在特定区域里放置定制商品，需要在商铺里精心设计好诸多区域的位置，这样就能够使我们的店铺看起来整齐、有序，而且方便我们快速找到其中的每一个商品。

在网页中，同样需要定义好各个区域，比如哪里放广告、哪里放导航菜单、哪里放主体内容，DIV在这里起的作用就是将整个页面分成若干个小区域，每个DIV在页面中占据一定的位置，而在这个位置上能够放置特定的内容。

四、CSS+DIV排版技术相对传统表格排版的优点：

HTML中的也可以将整个页面划分成各个区域，如果某个区域需要再划分，则可以用嵌套表格来实现。相对于表格布局，CSS+DIV布局的优点如下：

首先，利用表格排版的页面升级困难，如果要对某个区域的位置进行调整则需要再重新用表格进行布局，而用CSS+DIV排版，每个区域（DIV）是一个整体，可以用CSS对各个块进行定位，从而轻松地移动各个块，完成页面的整体设计。

其次，利用表格排版的页面在下载时必须等整个表格的内容都下载完毕之后才会一次性显示出来，利用DIV块的CSS排版的页面在下载时，各个块可以分别下载显示，从而提高页面的下载速度，搜索引擎的排名也会因此而提高。

第三，用DIV排版的页面，美工在修改页面时不需要关心任何后台操作的问题。而表格由于依赖各个单元格，美工必须在大量的后台代码中寻找排版方式。

五、结语

DIV+CSS布局，现在已经广泛地应用在网页设计上了。如果布局合理，可以让页面更加美观，还可以让访问都精确地定位到网页的某一功能，这都对网页的开发提供了更便捷的方法。

参考文献：

[1]何丽.精通DIV+CSS网页样式与布局[J].北京:清华大学出版社,2011,4

[2]曾顺.前沿科技,精通CSS+DIV网页样式与布局.北京:人民邮电出版社,2007.8

浅谈CSS+DIV在网页制作中的应用

常用范文

优秀范文

精选范文