浅谈DIV+CSS技术在网页设计中的应用

２０１１年第１７期　ＳＣＩＥＮＣＥ＆ＴＥＣＨＮＯＬＯＧＹ　ＩＮＦＯＲＭＡＴＩＯＮ　Ｏ　ＩＴ论￣２０　科技信息　

浅谈ＤＩＶ＋ＣＳＳ技术在网页设计中的应用　

周　

鑫　

（新疆石河子职业技术学院　

新疆

【摘

石河子８３２０００）　

要】ＤＩＶ＋ＣＳＳ是目前比较流行的一种网页布局方式，本文介绍了ＤＩＶ＋ＣＳＳ的特点，并通过一些实例说明了ＣＳＳ样式表的基本用法　

及技巧应用．同时阐述了引入ＤＩＶ＋ＣＳＳ对今后网页设计教学的影响。　

【关键词】ＤＩＶ；ＣＳＳ；表格；网页设计　

一

直以来．网页布局都是采用表格ｆｒａｂｌｅ）布局．因为用Ｔａｂｌｅ进行　

它不需要图像，不需要执行程序，不需要插件，不需要流格式，就像　

布局简单、制作速度快。设计者可以直接通过图像编辑器画图、切图，　

Ｈｔｍｌ指令一样快。　

最最后再由图像编辑器自动生成表格布局的页面。但用Ｔａｂｌｅ布局的　

页面，其源代码存在大量的冗余代码，页面结构与表现混杂在一起，非　

３层叠样式表的添加方法　

常不利于查找和管理信息，更不利于修改信息。ＤＩＶ＋ＣＳＳ的出现弥补　

为网页添加样式表的方法有四种：　

了Ｔａｂｌｅ布局的不足，具有以下三个方面的显著优势：　

３．１　最简单的方法是直接添加在Ｈｔｍｌ的标识符（１ａ　里：　

１）表现与内容相分离：ＤＩＶ＋ＣＳＳ将设计部分剥离出来放在一个独　

＜Ｔａｇ　ｓｔｙｌｅ＝“ｐｒｏｐｅｒｔｉｅｓ”＞网页内容＜Ｒａｇ＞　

立样式文件中．Ｈｔｍｌ文件中只存放文本信息，这样的页面对搜索引擎　

例如：　

更加友好：　

＜Ｐ　ｓｔｙｌｅ＝“ｃｏｌｏｒ：ｂｌａｃｋ：ｆｏｎｔ—ｓｉｚｅ：１６ｐｔ”＞ＣＳＳ实例１　

２）提高页面浏览速度：对于同一个页面视觉效果，采用ＤＩＶ＋ＣＳＳ　

＜，ｐ＞　

重构的页面大小要比Ｔａｂｌｅ编码的页面文件小得多，前者一般只有后　

代码说明：　

者的１／２大小。这样浏览器就不用去解析大量冗长的标签；　

用黑色显示字体大小为１６ｐｔ的“ＣＳＳ实例ｌ”。尽管使用简单、显　

３）易于维护和改版：由于多个页面可以共享一个ＣＳＳ文件，这样　

示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式　

只需简单的修改Ｃｓｓ文件就可以重新布局整个网站的页面。　

表内容结构和格式控制分别保存的优势。　

因此。现在一些比较知名的网站均采用ＤＩＶ＋ＣＳＳ进行网页的排　

３．２添加在Ｈｔｍｌ的头信息标识符＜ｈｅａｄ＞里：　

版布局。ＤＩＶ＋ＣＳＳ已成为一种网页设计标准。相应的，在网页设计教学　

＜ｈｅａｄ＞　

中引用ＤＩＶ＋ＣＳＳ也已是趋势．并将对传统的网页设计教学产生较大　

＜ｓｔｙｌｅ　ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ’’＞　

的影响　

＜！一样式表的具体内容一＞　

１　ＤＩＶ与ＣＳＳ简介　

＜／ｓｔｙｌｅ＞　

＜／ｈｅａｄ＞　

ＤＩＶ＋ＣＳＳ是应用在Ｘｈｔｍｌ中的一种布局方式，在Ｘｈｔｍｌ网站设计　ｔｙｐｅ－－＇“ｔｅｘｔ／ｃｓｓ”表示样式表采用ＭＩＭＥ类型，帮助不支持ＣＳＳ的　

标准中，不再使用Ｔａｂｌｅ定位技术，而是采用ＤＩＶ＋ＣＳＳ的方式实现各　

浏览器过滤掉ＣＳＳ代码，避免在浏览器面前直接以源代码的方式显示　

种定位。　

我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要　

１．１　ＤＩＶ简介　在样式表里加上注释标识符“＜！＿＿注释内容～＞”。　

ＤＩＶ元素是用来为Ｈｔｍｌ文档内大块（ｂｌｏｃｋ—ｌｅｖｅ１）的内容提供结构　

３＿３链接样式表，同样也是添加在Ｈｔｍｌ的头信息标识符＜ｈｅａｄ＞里：　

和背景的元素。它可以将文档分割成多个有意义的区域或模块，ＤＩＶ　

＜ｈｅａｄ＞　

的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中　

＜ｌｉｎｋ　ｒｅｌ：“ｓｔｙｌｅｓｈｅｅｔ”ｈｒｅｆ＝“　．ＣＳＳ”ｔｙｐｅ＝‘‘ｔｅｘｔ／ｃｓｓ”ｍｅｄｉａ＝　

所包含元素的特性由ＤＩＶ标签的属性来控制。　

“

ｓｃｒｅｅｎ”＞　

１．２　ＣＳＳ简介　

＜／ｈｅａｄ＞　

ＣＳＳ（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　ｓｈｅｅｔｓ。层叠样式表）是一种制作网页的新技　

｝

．

ＣＳＳ是单独保存的样式表文件，其中不能包含＜ｓｔｙｌｅ＞标识符，并　

术，它的全称是级联样式表，即Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ的缩写，又称之　

且只能以ＣＳＳ为后缀。　

为风格样式表单。是用于控制网页样式并允许将样式信息与网页内容　

Ｍｅｄｉａ是可选的属性，表示使用样式表的网页将用什么媒体输　

分离的一种标记性语言。使用ＣＳＳ可以将格式和结构分离，能更好地　

出。　

控制页面布局，从而制作体积更小、下载更快的网页。　

３．４联合使用样式表，同样也是添加在Ｈｔｍｌ的头信息标识符（ｈｃａｄ＞　

２　ＣＳＳ的特点　

里：　

＜ｈｅａｄ＞　

过去的网页通常缺少动感．而且在网页内容的排版布局上也有很　

＜ｓｔｙｌｅ　ｔｙｐｅ－－”ｔｅｘｔ／ｅｓｓ”＞　

多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的　

＜！一＠ｉｍｐｏｒｔ“　．ＣＳＳ”其他样式表的声明～＞　

构思和创意来显示信息。即便是掌握了Ｈｔｍｌ语言精髓的人也要通过　

＜／ｓｔｙｌｅ＞　

多次地测试。才能驾驭好这些信息的排版。样式表就是在这种需求下　

＜／ｈｅａｄ＞　

诞生的。　

以＠ｉｍｐｏｒｔ开头的联合样式表输入方法和链接样式表的方法很　

２．１为网页上的元素精确定位：可以让设计者像导演一样，轻易地控　

相似，但联合样式表输入方式更有优势。因为联合样式表输入法可以　

制文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表　

在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不　

演。　

需要的样式规则。需要注意的是：联合法输入样式表必须以＠ｉｍｐｏｒｔ　

２．２把网页上的内容结构与格式控制相分离：浏览者想要看的是网　

开头。如果同时输入多个样式表有冲突的时候，将按照第一个输入的　

页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格　

样式表对网页排版。当输入的样式表和网页里的样式规则冲突时，使　

式控制来帮忙了。把两者分开方便了网页的设计者。能够对页面的布　

用外部的样式表。　

局施加更多的控制，也就是把ＣＳＳ代码独立出来从另一个角度控制页　

面外观。　

４　ＣＳＳ样式技巧应用介绍　

２．３控制页面的布局：ＣＳＳ可以从总体上有效控制Ｈｔｍ１．并在屏幕上　４．１按钮样式　

精确定位图像的位置。　

按钮样式　，　

２．４制作出体积更小、下载更快的网页：ｃｓｓ样式表只是简单的文本，　

ｂｕｔｔｏｎｅｓｓ｛）｛　

科技信息　ＯＩＴ论ｌｋＯ　ＳＣＩＥＮＣＥ＆ＴＥＣＨＮＯＬＯＧＹ　ＩＮＦＯＲＭＡＴＩＯＮ　２０１１年第１７期　

Ｆｏｎｔ－ｆａｍｉｌｙ：“Ｔａｈｏｍａ”，“宋体”；　

Ｆｏｎｔ－ｓｉｚｅ：１２　ｐｔ：ｃｏｌｏｒ：＃Ｏ０１　０９９；　

Ｂｏｒｄｅｒ：２　ｐｘ＃００１０９９　ｓｏｌｉｄ；　

Ｃｏｌｏｒ：００４２９９；　

５对网页设计教学的影响　

ＤＩＶ＋ＣＳＳ网页布局将成为网页设计的标准。今后的网页设计教学　

也会随之有很大的变化．主要表现：　

５，１转变网页制作的思路传统的前台网页设计首先考虑外观、色彩　

Ｂｏｒｄｅｒ－－ｂｏｔｔｏｍ：＃１２ｂｅｅ２　１　ｐｘ　ｓｏｌｉｄ；　

Ｂ０ｒｄｅｒ～ｌｅｆｔ：＃１２ｂｅｅ２　１　ｌａＸ　ｓｏｌｉｄ；　

Ｂｏｒｄｅｒ－－ｒｉｇｈｔ：＃１２ｂｅｅ２　１　ｐｘ　ｓｏｌｉｄ；　

Ｂｏｒｄｅｒ－－ｔｏｐ：＃１２ｂｅｅ２　ｌｐｘ　ｓｏｈｄ；　

搭配，而改用ＣＳＳ布局后首先考虑页面内容的语义和结构，因此在教　

学中要转变网页设计的思路。　

５．２转变教学重点采用ＤＩＶ＋ＣＳＳ布局后，表格将回到基本功能，即　

显示和组织数据，不再作为网页布局的重要工具。那么教学重点就要　

转向ＣＳＳ样式。虽然ＣＳＳ一直都是比较重要的内容，但其作用仅是增　

强网页特效，ＣＳＳ用于布局后，要求学生对ＣＳＳ要有更深刻的理解。　

Ｘｈｔｍｌ语言也是一个重点，采用ＣＳＳ布局后，网页布局就需要完全的　

手工编写代码，这需要学生熟练掌握Ｘｈｔｍｌ语言。　

当然，并不是说ＤＩＶ＋ＣＳＳ能完全取代表格，ＣＳＳ也有不足之处：　

完全用手工编写代码，开发速度慢。对初学者来说，完全用ＣＳＳ操　

纵网页．甚至用ＣＳＳ来描绘完美的设计图，是件非常难的事。对于刚刚　

Ｂａｃｋｇｒｏｕｎｄ－－ｉｍａｇｅ：ｕｒｌ＜・・・／ｉｍａｇｅｓ／ｂｔｕｅｂｕｔｔｏｎｂｇ．ｇｉＯ；　

Ｂａｃｋｇｒｏｕｎｄ－－ｃｏｌｏｒ：＃ｅ６ｆ５ｆｆ；　

Ｃｕｒｓｏｒ：ｈａｎｄ；　

Ｆｏｎｔ－－ｓｔｙｌｅ：ｎｏｒｍａｌ；　

Ｗｉｄｔｈ：５０　ｐｘ；　

Ｈｅｉｇｈｔ：２５　ｐｘ；　

ｊ　

４，２图片替换技巧　

接触网页设计的学生来说，传统的表格布局能让学生很容易的掌握基　

我们一般都建议用标准的Ｈｔｍｌ来显示文字，而不要使用图片，这　

本的网页设计技术。　

样不但快，也更具有可读性。但是如果你想用一些特殊字体时，就只能　

ＤＩＶ＋ＣＳＳ还没有实现所有浏览器的统一兼容，也就是说不是所有　

用图片了。比如你想用一个卖东西的图标，你就用了这个图片：　

的浏览器都支持ＣＳＳ布局的页面，因此使用范围有一定的局限性。　

＜ｈｌ＞＜ｉｍｇ　ｓｒｃ＝　．．｝一／ｗｉｄｇｅｔ－－ｉｍａｇｅ．Ｇｉｆ　ａｈ＝　Ｂｕｙ　ｗｉｄｇｅｔｓ”／＞＜／ｈｉ＞　

这当然可以，但对搜索引擎来说，和正常文字相比，它们对ａｌｔ里　

面的替换文字几乎没有兴趣．这是因为许多设计者在这里放许多关键　

词来骗得搜索引擎。所以最佳的方法应该是这样的：　

＜ｈ１＞Ｂｕｙ　ｗｉｄｇｅｔｓ＜／ｈｌ＞　

【参考文献Ｊ　

［１］张志洁，李书明，赵玲．ＣＳＳ技术在网页设计中的应用探析ｌ　Ｊ１．电脑知识与技　

术：学术交流，２００７（１　ｏ１：３０—３６．　

但这样就没有特殊字体了。要想达到同样效果．可以这样设计　

社．２００２：２３０—２６０．　

ＣＳＳ：　

［２］网星工作室．ＤＲＥＡＭＷＥＡＶＥＲ　ＭＸ完全自学手册【Ｍ】．北京：希望电子出版　

［３］朱俊，汪舒银．ＣＳＳ在网页设计中的应用『ＪＪ．安徽水利水电职业技术学院学　

ｈｌ｛ｂａｃｋｇｒｏｕｎｄ：ｕｒｌ（ｗｉ　

ｔｅｘｔ－ｉｎｄｅｎｔ：１０００ｐｘ）　

［４］杜涛．ＣＳＳ技术在网页设计中的应用与优化册．长治学院学报，２００７（５）：２０—２５．　

注意把ｉｍａｇｅ　ｈｅｉＳｈｔ换成真的图片的高度。这里，图片会当作背景　

［５］逗逗．ＣＳＳ如何控制网页字体ｆＪ］．网络与信息，２００７（１１）：３１—３５．　

ｈｅｉｇｈｔ　ｉｍａｇｅ　ｈｅｉｇｈｔ　

报．２００７（１１：４Ｏ—４７．　

６］刘娜．网页制作中ＣＳＳ样式表的运用ｆＪ】．大学时代（Ｂ版），２００６（１）：１８—２０．　

显示出来，而真正的文字由于设定了１０００像素这个缩进，它们会出现　

［

［７］袁自海．ＣＳＳ在网页设计中的应用明．电脑知识与技术，２００８（８）：１４３６—１４３９　

在屏幕右边１０００点的地方，就看不见了。但这对于关闭图片的人来　

说，可能全部看不到了，这点要注意。　

［责任编辑：常鹏飞］　

（上接第１０６页）冲洗，直到系统清洁度比设计要求低一到二个等级，　

Ｃ．自检合格后联系甲方或监理就地取样送有资质的单位化验　

再将ｌＯｐ￣ｍ滤芯更换为５ｐＬｍ滤芯或３ｐ，ｍ滤芯对系统进行冲洗。　

经检验达到清洁度要求后，油冲洗结束。　

５）气液混合　

３．４冲洗效果　

采取往主管路冲洗液中吹人氮气的方法，利用具有较强冲击力的　

氮气参与冲洗，形成气液混合的紊流，通过强力冲洗，在较短时间内达　

到理想冲洗效果。由于高压冲洗回路压力高，掺混氮气难度大，只在低　

压冲洗回路实施气液混合。　

为了避免出现异常振动，通入氮气的流量为３０Ｌ／ｍｉｎ，压力略高于　

冲洗泵出口压力，每次通气时间５—１０秒，视回路不同而不等。　

６）高低压结合　

管道冲洗高压系统、低压系统相结合，以阀台为界，阀台前Ｐ（压　

力管）、Ｔ（回油管）、Ｙ（泄油管）及阀台后管径较大的管子构成大冲洗　

回路，用低压大流量冲洗泵组冲洗；阀台后ＭＢ管构成小冲洗回路，用　

序号　

ｌ　

２　

系统名称　

卷取辅助液压系统　

卷取伺服液压系统　

设计清洁度　以往平均冲洗　实际冲洗　

时间　时间　

ＮＡＳ　７　

ＮＡＳ　５　

１０天　

ｌ０天　

７　５天　

７天　

３　

４　

５　

６　

７　

热卷箱液压系统　

运输区液压系统　

粗轧辅助液压系统　

粗轧伺服液压系统　

精轧机辅助液压系统　

ＮＡＳ　７　

ＮＡＳ　７　

ＮＡＳ　７　

ＮＡＳ　５　

ＮＡＳ　７　

９天　

９天　

１Ｏ天　

１Ｏ天　

ｌ５天　

６　５天　

６．５天　

７．５天　

８天　

１２．５天　

高压小流量冲洗泵组冲洗，所有阀台共用一套主冲洗管路，为提高冲　

洗速度，支管路上均设置阀门，以便于进行控制。冲洗时遵循先主管后　

支管，先远端后近端的次序，保证每一主管和支管均能冲洗到。　

８　精轧机伺服液压系统　ＮＡＳ　５　１Ｏ天　８天　

Ａ．各回路必须单独冲洗，其它回路用球阀断开。　

Ｂ．冲洗支路时，应在冲洗管线的焊缝、拐弯、死角处敲打，将附着　

４结束语　

在管路内壁的颗粒物振下随油流冲走。　

采用“高低压结合、气液混合”在线油冲洗，大大地加快ｒ施工进　

７）冲洗要求　

度．为确保既定试车节点创造了有利条件，同时提高了施工质量，减少　

Ａ．冲洗作业连续进行．每隔半小时检查油温及电机温度一次，冲　

ＡＩ２￣Ａ，缩短了施工周期，从而提高了安装工程的经济效益。　

洗首天每隔１小时沿管路巡检一次。　

Ｂ．定期检查滤芯前后压差或回流情况．更换滤芯时必须确认阀　

门关闭情况后方可进行。　

［责任编辑：张慧］