CSS框架简介

1st TechParty@UICxingzhi

为什么要用css框架

省事！

1. 标准、规范、跨浏览器2. 快速开发3. 统一样式

CSS框架类型元素重置、字体风格、网格布局、表单样式 等等

为什么要元素重置（reset.css)

1. html标签会有默认样式

2. 不同浏览器默认样式不一样

reset.css：覆盖浏览器的默认样式

/*reset.css from YUI*/html{font: 12px/24px "微软雅黑","宋体","arial","Verdana";color:

#000;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,

fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;

padding:0}table{border-collapse:collapse;border-spacing:0}

fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,

var{font-style:normal;font-weight:normal}ol,ul{list-style:none}

caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-

weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;

font-variant:normal}sup{vertical-align:text-top}sub{vertical-

align:text-bottom}input,textarea,select{font-family:inherit;font-

size:inherit;font-weight:inherit}input,textarea,select{*font-

size:100%}legend{color:#000}a{text-decoration: none;}

网格布局

常见的网格系统：Blueprint: A CSS Grid Framework、960 CSS Grid System、Tripoli Framework、YAML – Yet Another Multicolumn Layout、YUI Grid CSS 等

960 grid system

“ 960 Grid System的特性是将960像素的网页分为12列的布局和16列布局。12列布局将总宽分成12份，每份的宽度是60px，而16列的布局分成16份，每份的宽度是40px，每部分左右边距都是10px，从而每列产生20px的空隙。”

960.gs 首页示例

页面宽度：960px

容器：container_12、container_16网格：grid_N去除外边距: alpha、omega

定位：push_N 、pull_N占位：prefix_N 、suffix_N清除浮动：clear

讲代码。。。

36 个 CSS 框架推荐http://www.oschina.net/news/22591/36-css-frameworks-for-designers

精选国外15个CSS框架http://www.cnblogs.com/ywqu/archive/2009/08/24/1552635.html

栅格系统网站设计流程http://www.ziluobo.com/960gs-use.html