Introduction to CSS Framwork, 1st TechParty@UIC, xingzhi

1. 1st TechParty@UIC
xingzhi
CSS框架简介

2. 为什么要用css框架

3. 省事！

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

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

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

7. 1. html标签会有默认样式
2. 不同浏览器默认样式不一样

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

9. /*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;}

10. 网格布局

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

12. 960 grid system

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

14. 960.gs 首页示例

15. 页面宽度：960px
容器：container_12、container_16
网格：grid_N
去除外边距: alpha、omega
定位：push_N 、pull_N
占位：prefix_N 、suffix_N
清除浮动：clear

16. 讲代码。。。

17. 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