css.pdf

Transcript

1. CSS框架简介 1st TechParty@UIC xingzhi
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