基于CSS+DIV典型模式高校招生信息网站CSS创建研究.docVIP

基于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、高校招生信息网站及结构 高校招生信息网站基本功能应有招生信息、政策、新生安排等信息的发布、与考生或新生的互动、院系及校外网站的链接、以突出、醒目的方式发布招生计划广告、动态图片新闻的发布、校园风景图片提供浏览等等。 高校招生信息网站页面设计与布局应以清新淡雅风格为主、体现学术氛围，菜单设计合理、