divcss布局技术在网页设计中的应用

《divcss布局技术在网页设计中的应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、万方数据第21卷笔1期2009笮3嚣葳汉工程职业技术学院学报]omnalofWuhanEng)neermg]nsttttlteVol21NoIMarch：f}09DIV+CSS布局技术在网页设计中的应用梁静琳(武汉工程职业技术学院湖北武汉：430080)摘要DlV+CSS是目前比较流行的一种髓页布局方式，本文介绍了DlV+CSS的特点，并通过一个实例说明了DIV+CSS布局的基本用法及核心技术，同时阐述了引入DIV+CSS对今后网页设计教学的影响。关键词DIV；CSS)布局；两荑设许中图分类号：TP393文献标识码：A文章编号：1671—3524(2009)01—0042—04一直以来，网页布

2、局都是采用表格(TABLE)布局，因为用TABLE进行布局简单、制作速度快。设诗者霹瑷直接通过图像编辑器蘧躁、切图，最艨弄壹图像编辑器自动生成表格布局的页面。但用TA—BLE布局的页面，其源代码存在大量的冗余代码，页甏结枣每与表现混杂在一起，菲常不剩予查找信惠。和管理，更不涮于修改。DIV+CSS的出现弥补了W出LE布局的不足，具有以下三个方面的显著优势：(1)表现穰蠹容稳分离DlV+CSS将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息，这样的页面对搜索引擎更加友好；(2)提高页蘧测览速度对于同一个页嚣视觉效果，采用DIV十CSS重构的页面大小要比TABLE编码的页面文

3、件小得多，前者一般只有后者的1／2大小，这样测蹩器就不蔫去解柝大爨冗长的标签；(3)易于维护和改版由于多个页面可以共享一个CSS文件，这样只需简单的修改CSS文件就可以重耨布局整个阏蛄的页瑟。因此，现在一些比较知名的网站均采用DIV+CSS进行网页的排版布局，DIV+CSS已成为一种嗣贾设计标准。相应的，在网页设计教学中引用DIV+CSS也已是趋势，并将对传统的网页设计教学产生较大的影响。1DIV+CSS简介ⅨV+CSS是应用在XHTM乙中的一种布局救疆丑期：2009—02-16侔毒篙奔：粱静琳(1981～)t发。鲂教。E-maili§l@wgxy．net方式，在XHTML网站设计标准中，不再

4、使用TA—BLE定位技术，而是采用DIV十CSS的方式实现各种定位。1．王DlV简介DIV元素是用来为HTML文档内大块(block--level)的内容提供结构翻背景的元素。它可以将文档分割成多个有意义的区域或模块，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块麴，其中所雹含元素的特性由DIV标签的羼魏栗控制。1．2CSS简介CSS(CascadingStyleSheet)译捧滋叠样式袭，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS可以将格式和结构分离，能更好魏控裁夏瑟布蜀，及两剿箨津积菱小、下载照快的网页。1．2．1CSS语法CSS样式基本语法：

5、Selector{Property：val—ue；)，其中Selector是选择符，Property为属性，val—ue为值。属性和属性值之阅用冒号(：)隔开，多个定义之闽用分号(；)隔开。搠如：p{COLOR：#FF0000；BACKGROUND：#FFFFFF}此铡效采是将段落审的文字颜色设秀#FF0000，段落的背景颜色没为#FFFFFF。1。2．2CSS选择符CSS样式的强大、灵活蓠先体现在选择符上。万方数据粱静琳：DIV+CSS布局技术在网页设计中的应用43灵活选用选择符是布局的基础，这里介绍几种基础的选择符。(1)id选择符用CSS来布局网页主要通过”div”标签来实现，而div的

6、样式通常是通过id选择符定义的。例如，定义一个div：<／div>然后在样式表中定义id的属性：#main{height：380px；width：778px；)要注意的是网页文档中的每个元素的id值不能重复，只能是唯一的。(2)类型选择符类型选择符就是网页元素本身，定义时直接使用元素名称。如在样式表中给body元素定义样式：body{／*<定义页面属性>"X-／)(3)通用选择符通用选择符是一种特殊的选择符，用-R-符号表示，用来定义所有元素对象的样式。例如：-R-{text—align：center；font—size：12px)上面的样式将文档中的所有文字居中，

7、大小设为12px。(4)分组选择符分组选择符并不是一种选择符类型，而是一种选择符使用方法，用于同时对多个对象定义相同的样式。例如：td，div，a{font—size：14px；)将单元格，块内以及超链接中的文字大小设为14px。(5)包含选择符包含选择符用于给一个元素的子元素定义样式。如：#siderbara{text—decoration：none；back-ground—color：#FFF