Introduction to CSS Framwork

197
-1

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
197
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to CSS Framwork

  1. 1. 1st TechParty@UIC xingzhiCSS框架简介
  2. 2. 为什么要用css框架
  3. 3. 省事!
  4. 4. 1. 标准、规范、跨浏览器2. 快速开发3. 统一样式
  5. 5. CSS框架类型元素重置、字体风格、网格布局、表单样式 等等
  6. 6. 为什么要元素重置 (reset.css)
  7. 7. 1. html标签会有默认样式2. 不同浏览器默认样式不一样
  8. 8. reset.css:覆盖浏览器的默认样式
  9. 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. 10. 网格布局
  11. 11. 常见的网格系统:Blueprint: A CSS Grid Framework、960 CSS Grid System、Tripoli Framework、YAML – Yet Another Multicolumn Layout、YUI Grid CSS 等
  12. 12. 960 grid system
  13. 13. “ 960 Grid System的特性是将960像素的网页分为12列的布局和16列布局。12列布局将总宽分成12份,每份的宽度是60px,而16列的布局分成16份,每份的宽度是40px,每部分左右边距都是10px,从而每列产生20px的空隙。”
  14. 14. 960.gs 首页示例
  15. 15. 页面宽度:960px容器:container_12、container_16网格:grid_N去除外边距: alpha、omega定位:push_N 、pull_N占位:prefix_N 、suffix_N清除浮动:clear
  16. 16. 讲代码。。。
  17. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×