欢迎来到学术参考网

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

发布时间:2015-12-14 13:55

摘 要: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

上一篇:量子计算机的研究

下一篇:浅谈PPT在钳工教学中的应用