当前位置: 主页 > 论文下载 > 工学论文 >

Css+Div 技术在资源平台网站中的应用

作者：张娅日期：2014-06-20 10:37 来源：《电子制作》

宜宾职业技术学院电子信息工程系 644000
【文章摘要】
本文介绍了css+div 技术的概念，
以及此种技术在网页设计中的优势。
以技术资源平台网站制作为示例，介
绍了如何利用css+div 进行布局和结
构，以及在使用该技术在网页制作过
程中的难点和注意事项。
【关键词】
CSS+DIV ；资源平台网站；网页设计
0 引言
伴随着互联网的发展，传统的表格排
版定位技术遇到了前所未有的挑战，越来
越多的网站在开发过程中采用Css+Div
进行排版定义，Css+Div 使网页结构和
表现分离，通过将网页内容模块化，解决
了制作流程复杂，制作周期常及后期维护
不便等相关问题。
1 Css+Div 技术介绍
Css+Div 是WEB 标准中常用术语之
一，DIV 容器为网站中各部分内容划分
到不同的区块，然后用CSS 来定义盒子模
型的相关表现如：字体大小，颜色边框、
位置、内外边距、排版方式、背景等。它是
DIV+CSS 网页布局的核心，CSS 盒子模
型主要有四种属性：内容(content)、填充
(padding)、边框(border)、边界(margin)。如
图1 所示。
常规使用的CSS 样式类型包括类选
择符、标识选择符、重定义HTML 标签、
超链接的CSS 样式等。
1.1 类选择符
在一个网页中可以为不同的类型的
对象定义相同的雷鸣，也可以实现吧相同
样式的对象统一为一类，在使用中要为每
个元素第一一个class 属性。如图2 所示。
1.2 标识选择器
标识选择又可以称为ID 选择器，它
是唯一的，不同元素的ID 值是不能重复
的，它为不同的对象定义不同的样式，方
便用户更加精细的控制页面，它的名字以
英文（#）开头。
1.3 重定义HTML 标签
通过CSS 重新定义HTML 标签的外
观和功能。
<style type="text/css">
body p {
font-size: 14px;
line-height: 1.5em;
color: #03F;
background-color: #FFF;}
</style>
</head>
<body>
<p> 通过CSS 重新定义HTML 标签
的外观和功能。</p>
1.4 超链接的CSS 样式
当在网页中建立了超链接之后，文字
等效果会发生变化，默认的是：文字变为
蓝色，并出现下划线，同时我们可以利用
CSS 样式对超链接进行改变。
2 在资源平台网站中使用Css+Div 技
术
运用Css+Div 技术，可以大大提高设
计网页和开发网站的效率，同时也减少了
网站的代码量和代码的复杂性，当网站需
要修改时能够及时的进行更改。
资源平台的搭建根据资源平台的内
容进行需求分析，对需要展示的内容进行
合理的规划。通常包括：网站LOGO、导
航条、文字新闻、课程介绍等内容。
当网页的框架固定下来以后，根据
网站需求进行内容架构，其中链接的CSS
文件可以根据不同的需求进行动态更换，
使网页的展示效果变换无穷。
3 盒子的定位技术
早期传统的定位方式，是利用Html
的table 元素所具有的零边框特性，即不
显示边框，，将网页中的各个元素按照板
式划分后，分别放入表格的各个单元格
中，但随着网页和网站信息量的加大、及
时修改等因素的增加，将整个网页的元素
都包涵在表格中，必然降低网站显示和修
改速度，同时也大大提高了维护成本。而
采用Css+Div 中的浮动定位则按照布局
要求进行显示，用CSS
实现Float 属性如图3
所示。
图3 网页框架定位图
定义结构的样
式：定义头部当准备工作做好之后，根据早前的页
面设计，版式设计，将相应的内容添加到
网页当中整个页面的运行效果为：
4 浏览器兼容解决
浏览器在解释程序的时候，和变
量赋值是一样的，后面会覆盖前面。因
此我们在定义的时候一定要把通用的
放前面，专业的放后面。对于ie7、ie6、
FF 而言通用的width:300px ；ie7 专用
*+width:300px;ie6 专用_width:300px ；
ie7、ie6 共用*width:300px;ie6、FF 则是
共用width:300px!important。
部分DIV 无法自适应高度，在浏览
器上会显示错位，这个产生的主要原因是
float 没有真正闭合。一般一DIV 包涵多
个DIV，如果父DIV 没有设置，而子DIV
设置了float ：right，则父DIV 无法包住
整个DIV，这时在浏览器上显示时就会出
现错位。在网站建设中我们通过给父DIV
加上float 属性即可，当然我们还有很多
解决方式如：通过设置overflow:auto 或者
在所有子DIV 后加一个空的DIV 等方式
也可以解决浏览器错位问题。
5 Css+Div 技术总结
在资源平台网站设计制作中Css+Div
布局有下列优点：易于网站的改版和维
护，只需要加载别的CSS 文件就可以重
新设计网页；使的Web 网页的内容和
表现分离，Html 中只存放内容信息，具
体表现则放在一个独立样式表文件中；
CSS 使站点也更容易被收索引擎找到；
采用技术的页面容量要比传统表格排版
的文件容量小1/2 左右。提高网页载入速
度；代码更加清晰简洁；易于保持网站整
体风格的一致。
随着网页制作技术的发展与成熟，
Css+Div 布局逐步替代了Table 成为当今
网站的主流技术，Css+Div 布局模式脱
离了传统设计模式的局限性，实现了结构
与设计的分离，在网页需要修改风格或更
新内容时，只需要调整相应的地方，大大
减少了网站维护者的工作量，提高了网站
开发的效率。
6 结语
通过网站的制作可以看出,DIV+CSS
技术在资源平台网站页面设计中具有明
显的优势, 代码简介、后期维护和更新更
加方便, 为制作其他的资源平台网站提
供借鉴。
【参考文献】
[1] 温谦.CSS 设计彻底研究[M]. 北
京：人民邮电出版社，2009.
[2] 曾顺. 精通CSS+DIV 网页样式与
布局[M]. 北京：人民邮电出版社，
2009.
[3] 朱印宏.CSS 商业网站布局之
道[M]. 北京：清华大学出版社，
2008.