基于CSS+DIV典型模式高校招生信息网站CSS创建分析

摘要：展示高校形象，加强对外宣传已是各高等院校一项重要任务。高校招生信息网站通过互联网的宣传展示尽可能详细、丰富的信息，以增强学生、家长和社会对学院的了解。本文以高校招生信息网站为例对CSS+DIV典型模式进行分析研究，以加快建站速度、提高网站质量。

关键词：CSS+DIV 典型模式

中图分类号：TP393 文献标识码：A 文章编号：1007-9416（2012）10-0167-02

1、CSS+DIV

CSS是一系列样式的集合，使用CSS可以有效分离页面的内容与格式，从而减少网页设计的工作量。CSS层叠样式表，在网页制作过程中必用到的技术，对网页的整体布局、字体、图像、颜色、背景和链接等元素实现更加精确的操作控制，只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式，完成使用HTML不能实现的任务。同时采用CSS+DIV布局，页面结构清晰，容易被搜索引擎搜索到；缩短网站改版时间，只要简单地修改CSS文件内容就可以重新设计改版一个有成百上千页面的站点。

2、盒子模型

盒子模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正的布局网页中各个元素的位置。

盒子模型由四个独立部分组成，分别是边界（margin）、边框（border）、填充（padding）、内容区域。填充、边框和边界分为上、下、左、右四个参数，可以分别定义也可以统一定义。在用CSS定义的长、高度不是内容区域、填充、边框和边界所占的总区域，而是内容区域content的width和height.，正确计算盒子所占实际宽度区域应为左边界+左边框+左填充+内容宽度+右填充+右边框+右边界，实际高度区域应为上边界+上边框+上填充+内容高度+下填充+下边框+下边界。

3、布局典型模式

网页的布局通常是将网页中的各个板块放置在合适的位置。CSS+DIV布局最常用和流行，其布局类型有固定宽度、自适应等。

列式布局是布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定像素。在浏览器中浏览时，无论怎么改变浏览器窗口大小，div宽度都不会改变。当出现两列或更多固定宽度列时，在并排排列时需使用float属性，它是CSS布局中非常重要的属性，用于控制对象的浮动布局方式，大部分div布局都是通过float的控制来实现，例如在创建两列布局时，让其在水平线中并排显示，在定义CSS样式代码时，两个div对应的CSS代码中都需增加一句“float：left；”。

自适应布局是在网页设计中常见的一种布局形式，自适应的布局能够根据浏览器窗口大小而自动改变宽度或高度，较好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。自适应布局将宽度或高度设置为百分比，如“width：60%；height：60%；”这里是将宽度和高度值都设置为“60%”。

综合应用上述布局类型，在实际应用中，有时候需要左栏固定，右栏根据浏览器窗口大小自动适应，那么在定义CSS时，只需要设置左栏宽度为固定值，右栏不设置任何宽度值，同时不设置浮动即可。使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以完成。但当有一个三列式布局，其中左栏、右栏都要求固定宽度，并居左和居右显示，中间栏要求在左右栏之间变化自动适应，这时需要使用另一种定位方式，绝对定位，使用position属性来完成，该属性有如下参数：static，relative，absolute，fixed。Static：静态定位。如果没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变，但IE6并不支持此属性。

4、高校招生信息网站及结构

高校招生信息网站基本功能应有招生信息、政策、新生安排等信息的、与考生或新生的互动、院系及校外网站的链接、以突出、醒目的方式招生计划广告、动态图片新闻的、校园风景图片提供浏览等等。

高校招生信息网站页面设计与布局应以清新淡雅风格为主、体现学术氛围，菜单设计合理、板块分布协调，主题链接图片大小合适、设计精致，字体大小及颜色应考虑视觉上的统一和谐。根据不同的内容及功能要求，设置相关板块：学院概况、信息公告、图片新闻、招生动态、招生计划、招生政策、院系专业、新生指南、考生咨询、考生查询、奖助学金、校园风景、友情链接、联系我们、重点专业、精品课程。网站设计效果如图1所示。

5、基于高校招生信息网站建设CSS分析实现

网页栏目以上头部，主体容器部分设置其固定宽度，和自适应高度，是为了更好的切合主体部分装载排列的各区块部分元素；头部主体背景区块，由于图片在制作时宽高已定好因此在设置链接图片的宽度、高度时应为固定值，位置采用position：relative属性，对其进行相对定位，它将出现在它所在的位置上，不会发生偏移。居于头部背景图片上，需增加茶杯图片等，这时图片位置应设置为position：absolute，进行绝对定位，相对于它的包含块头部背景图片右框距离10像素，上框距离240像素。部分代码如下：

.top {margin：0 auto 0 auto；width：990px； height：100%； overflow：hidden；}

.top_bg {background：url（../images/banner.png） no-repeat；width：990px；height：442px；margin：0 auto 0 auto； position：relative；}

.top_tea{width：98px；height：90px；background：url（../images/tea.png） no-repeat； position：absolute；right：10px；top：240px；_background：none；_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src="../images/tea.png"，sizingMethod="crop"）；}

栏目部分，由九个栏目排列组成，每个栏目区块均可使用position：relative属性，对其进行相对定位，它将出现在它所在的位置上，不发生偏移。部分代码如下：

#chn0 {width：100px； height：35px； background：url（../images/channels/0.png） no-repeat； position：relative； display：block；}

#chn00{width：100px；height：35px； cursor：pointer； background：url（../images/channels/0-1.png） no-repeat； position：relative；}

对于页面栏目以下主体部分，为使编辑结构简单明了分为上、中、下三大区块，上区块又分为“招生动态”、“图片新闻”、“奖助学金”单元；中区块分为“院系专业”、“招生政策”、“热点问题”、“招生计划”、“历年招生”、“链接列表”、“录取查询”、“专本连读”单元；下区块分为“成果荣誉”、“魅力校园”图片展示以及三个“链接列表”单元。在各大区块中首先定义创建主容器，再将各小单元以绝对定位形式排列于其中。部分CSS代码如下：

#main {background：url（../images/all_bg.png） repeat-y； width：990px； height：939px； margin：0 auto； overflow：hidden；}

.main_top { width：900px； height：160px； margin：10px 0 3px 45px； position：relative；}

.main_top_left {width：330px； height：152px； background：url（../images/annouc.png） no-repeat； position：absolute； left：10px；}

.main_mid_left { width：190px； height：390px； background：url（../images/ml.png） no-repeat； position：absolute； left：10px；}

.main_bottom{ width：900px； height：350px； position：relative； top：15px； left：45px；}

.m_btm1 { width：880px； height：165px； position：absolute； left：10px； }

.pic_left{width：425px；height：160px；position：absolute；left：0px；background：url（../images/pic.png） no-repeat； }

.pic_left_tit { width：120px； height：32px； background：url（../images/icos/cgry.jpg） no-repeat； position：absolute； left：12px； top：12px； cursor：pointer；}

6、结语

基于CSS+DIV典型模式排版设计高校招生信息网站时，需把握好该网站的整体结构、局部结构和各单元元素之间的关联和位置，以及需要重点突出的单元，在排列时，注意其宽高数值的计算与固定或自适应设置，以及相对、绝对位置的正确应用。

参考文献

[1]汤建军.当代中国网页设计的本土化初探[D].中央民族大学，2010年.

[2]卫捷.“留白”理念在现代网页设计中的映射[D].河南大学，2011年.

[3]赵清华，林学华.基于DIV+CSS的网页布局技术应用研究[J].现代计算机（专业版），2010年.