CSS框架技术在WEB开发中的应用

摘　要：DIV+CSS是目前最流行的网页布局方式之一，优点很多。但由于不同类型、不同版本浏览器对CSS支持的差异，使得DIV+CSS布局给初学者带来很多的因扰。本论文避开网页布局中浏览器的兼容问题，使用960 grid system，探讨了博客中常见的2列、3列布局的实现方法。

关键词：网页布局；框模型； CSS框架； 960 grid system
　　1 、引言
　　表格（TABLE）布局和DIV+CSS布局是常见的网页布局方法。表格布局使用简单、制作速度快，但页面代码冗余、结构与表现混杂在一起，不利于信息查找、管理和修改，目前基本上被淘汰。DIV+CSS布局方法弥补了表格布局的不足，实现了表现与内容的分离，便于维护和修改，大大简化了代码，减少网络带宽资源浪费，对于用户和搜索引擎更加友好，支持浏览器的向后兼容。
　　2 、DIV+CSS布局在WEB开发中存在的问题
　　2.1 div+css简介
　　div是html中的一个元素，用来为大块（block-level）的内容提供结构和背景。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 div+css 是一种有别于传统的table布局的新布局法，可以达到了w3c内容与表现相分离的效果。
　　2.2 DIV+CSS布局在WEB开发中存在的问题
　　2.2.1、WEB开发效率低，不便于修改
　　WEB项目开发中，同一个网站，差不多的内容块，多次使用是很正常的事。这时，HTML、CSS就需要反复重写，且不方便修改。这无疑降低了WEB开发的效率。
　　2.2.2、浏览器兼容性差
　　由于浏览器对市场抢占率的竞争，使得相同的CSS样式在不同类型、不同版本浏览器上的显示存在较大差异。在WEB开发中，需要写大量重复的招数和过滤题来解决这个问题。而如何让前期、后期的各种浏览器兼容，会让你在开发中焦头烂额。
　　2.2.3、css代码不规范，html代码不合理，不便于开发合作
　　在中、大型网站开发中，CSS代码较多，HTML文件较多，可没有规范化的管理。同时由于协同开发，不同人所设计的代码存在很多的重复，久而久之，废弃代码越来越多，互相之间也难以沟通和阅读。
　　3 CSS框架技术介绍
　　CSS框架就是将日常常用的CSS代码进行提炼、加工，汇集为一个CSS代码库。因此CSS框架（CSS frameword）也可以称为CSS技术库（CSS library），它包含一套应用工具、函数库、约定俗成的规则，以及从常用任务中抽象出可以重复使用的通用模块。开发框架的目的是为了减轻设计师重复开发的工作量，提高Web开发的通用性和兼容性，这样设计师就可以把精力集中到任务或项目所特有的内容设计方面，而不再重复开发基本功能问题。
　　4 CSS框架技术在WEB开发中的应用
　　目前为止，已经出现了很多较成熟的CSS框架，如960 grid框架、WYMstyle CSS框架、YAML CSS框架、YUI Grides CSS、Logicss 框架、Clever CSS等。本论文使用960 grid框架，创建较为常见的2列、3列网页布局。
　　4.1 960 grid system介绍
　　960px被证实在1024X768的分辨率能够非常好的展现网页的内容，如Yahoo!、淘宝、新浪、优酷等站点的首页宽度都是950px/960px。960 grid system的网页宽度定为960px，且将960px分成12列或16列，分别由类.container_12和.container_16的决定划分列数，他们可以独立使用或是协同使用。类名grid_n用来表示列数。如，表示该DIV包含4列。
　　4.2 960 grid system用于网页布局
　　在博客类站点中，大部分都采用2列或3列布局，（如新浪博客、搜狐博客等），使用DIV+CSS布局，为了保证在各类型、各版本浏览器的表现尽可能相同，我们需要为每个DIV写大量的CSS。使用960 grid syste，使得网页布局变成一项简单、轻松而又愉快的工作。
　　我们要使用960 grid system，就必须在网页中包含960删格系统的CSS文件，只需要在网页文件的头部加入如下代码，链接到外部样式文件：
　　
　　
　　
　　在身体部分，使用DIV进行布局，我们采用类contanier_12。侧栏（sidebar）与主内容区域（main content）平行，侧栏为4列，主内容区域为8列，加起来刚好12列。代码如下：
　　
　　header
　　sidebar
　　main content
　　footer
　　
　　然后创建自己需要的CSS样式，在每个DIV内加入内容即可。如需要创建3列布局，只需在内多加一个DIV，修改每个DIV的列数分配即可。
　　通过使用CSS框架，解决了浏览器的兼容问题；规范了HTML、CSS代码（没有任何多余的HTML标签）；通过重用CSS代码库，降低了WEB开发难度，提高了WEB开发效率。
　　5 总结
　　CSS框架技术作为WEB开发的前端技术之一，减少了网页设计师的工作负担，大大提高了WEB开发效率。对于初学者而言，避开了WEB开发中浏览器的兼容问题，减少了学习难度，提高了学习者的积极性。但是也有很多人持反对态度，认为CSS框架使WEB开发变得臃肿，使用者过多依赖框架，不能提高WEB开发技术，不能排除bug。任何一门技术，有利必有弊，我们应该扬长避短，学习必要技术的同时，又能使WEB开发变得更加容易。
　　参考文献：
　　. .2009-01-26