《css框架研究》PPT课件

《《css框架研究》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS框架研究CSS框架的介绍、研究及项目实用性的探讨余果第一部分CSS框架是什么？什么是框架？框架实现了对具体实现细节的反向控制，实现者无需考虑框架已经实现好的细节框架是一组组件，供你选用完成自己的系统框架就是别人搭好的舞台，你来做表演一般来说，框架是成熟的、不断升级的JS框架我们对于CSS框架这个词比较陌生，但对于JS库就比较熟悉了JavaScriptlibrary就是JavaScriptframework比如：常用的JavaScript库：jQueryjQuery是什么jQuery是一种以方便开发者的编码为主要目的的库，比

2、如原生的JavaScript代码写Ajax就需要一大坨代码，要考虑浏览器兼容性、语言本身的粒子性用jQuery的话往往一句链式代码就能完成大量工作何乐而不为？优点：方便；不用例会跨浏览器的细节；操作粒度更大，专注于主要逻辑缺点：性能不是最佳；依赖API，无法像原生一样灵活CSS框架是什么与JavaScript框架类似，CSS框架是一些原生的CSS代码，然后给用户一些接口（类名），用户操作类名而无需理会实现细节，通过操作类名来改变页面样式和结构为什么CSS框架没有像JS框架一样流行起来？为什么CSS框架没有像JS框架一样流行起来？

3、CSS框架没有被大家接受的一个重要原因是：JavaScript是基于逻辑的，JavaScript框架能简化逻辑中的琐碎细节，给开发者带来方便CSS是基于设计的，每个设计都完全不相同，所以可复用程度很小本PPT的目的是分析现阶段著名的、被广泛使用的CSS框架选取其中适合的部分用在自己的项目中本次研究涉及的CSS框架第二部分CSS框架能做什么？Reset其实我们常用的CSSreset就是一种框架，只不过这种框架是不提供接口的，它就在那儿，我们将它引用到页面中，就会重置浏览器差异最有名的reset是YUI的reset，几乎已经成为业界

4、标准NEWsetNewset是我发明的一个词，表示reset的一个还原操作Reset把一切归于0，newset文件再把元素还原到一个很美观的程度WhileResetremovesandneutralizestheinconsistentdefaultstylingofHTMLelements,BaseappliesaconsistentstylefoundationforcommonHTMLelementsacrossA-gradebrowsers【YUIbase.css】OOCSS：content.cssBlueprint：T

5、ypography.cssNEWset+NEWset++既然需要把reset的文件再重新定义一遍，那为什么不定义得更好看一些呢？Bluetrip：NEWset++Bluetrip：由上到下分别是success、error、notice布局所有的CSS框架都提供了布局的功能，一般叫做grids.css存在在include文件中，基于布局原理的不同分为两大类：1.基于自适应的2.基于栅格的自适应Yahoo!首页自适应通过Firebug修改最外层宽度为100%自适应Oocss把布局分为大的布局（template.css）和小范围布局（

6、grids.css）Oocss把页面分为head、body和footBody中分为边栏和主内容Template是用来定边栏宽度，然后内容区会自由伸缩边栏和主内容在html中出现顺序无关边栏可以有0~2个Oocss中的grids.cssGrids.css用来定义小栏目，它跟template最大的不同是它是利用百分比来布局的。Oocss的自适应So……修改oocss布局的container宽度的时候：1.边栏宽度固定或随之被修改，这取决与你的边栏宽度单位是%还是px/em2.主内容区域随之被修改，内部unit按比例放大或缩小布局上的

7、自适应不是那么实用为什么我认为大型网站在页面布局上（而非模块）自适应不实用：1.项目改版不会只改变宽度2.每一个栏目都做到自适应成本较大Yahoo!的边栏被拉宽之后的效果Awful,isn’tit?基于栅格（网格）的布局系统！为什么是960像素？几乎所有大型网站都是950像素和960像素宽的，为什么？原因1：苹果电脑1027x768分辨率下打开Firefox，自然状态下，Firefox窗体的大小约为974x650.减掉左右两边7px的边框，网页的实际大小为960x650.原因2：960是很多数的公分母简单的说，960能被整分成6

8、份、8份、12份、16份、20份、24份……报纸的栏目就是按这些比例来排版的950像素呢？950像素呢？因为习惯性的把Gutter设定为10px，所以，margin就是Gutter的一半：5px960-5-5=950彪叔算出的950px……栅格化设计的好处1.一