【文章摘要】
本文介绍了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 所示。
图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、导航条、文字新闻、课程介绍等内容。
图2 网页框架图
DIV 结构如下
当网页的框架固定下来以后，根据网站需求进行内容架构，其中链接的CSS 文件可以根据不同的需求进行动态更换， 使网页的展示效果变换无穷。
3 盒子的定位技术
早期传统的定位方式，是利用Html 的table 元素所具有的零边框特性，即不显示边框，，将网页中的各个元素按照板式划分后，分别放入表格的各个单元格中，但随着网页和网站信息量的加大、及时修改等因素的增加，将整个网页的元素都包涵在表格中，必然降低网站显示和修改速度，同时也大大提高了维护成本。而采用Css+Div 中的浮动定位则按照布局要求进行显示，用CSS 实现Float 属性如图3 所示。
图3 网页框架定位图
定义结构的样式：定义头部
# C o n t a i n e r .Header {
background-color: #099;
width: 960px;
margin-right: auto;
margin-left: auto;
height: 200px;
float: left;
}
定义主题内容：
#Container .Main .right {
background-color: #CCC;
float: right;
width: 300px;
height: 400px;}
#Container .Main .Left {
background-color: #93C;
float: left;
width: 660px;
height: 400px;}
定义脚部
#Container .footer {022
background-color: #FFC;
height: 200px;
width: 960px;
margin-right: auto;
margin-left: auto;}
当准备工作做好之后，根据早前的页面设计，版式设计，将相应的内容添加到网页当中整个页面的运行效果为：
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.
图 4 网站效果图一
图 5 网站效果图二023
85597153
