摘 要：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列布局，只需在
