Blueprint CSS 分析例子.doc

《Blueprint CSS 分析例子.doc》由会员分享，可在线阅读，更多相关《Blueprint CSS 分析例子.doc（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、如有侵权，请联系网站删除，仅供学习与交流Blueprint CSS 分析例子【精品文档】第 20 页英文意思是蓝图、设计图。 BluePrint可以非常方便的实现复杂的网页布局，即能更简单实现自己的蓝图。例子文件:Sample.html这个文件将所有的CSS文件合并到一起，减少了并发连接数。一共包含了以下几个/* reset.css */* typography.css */* forms.css */* grid.css */此外，如果是IE8以下版本则包含/* ie.css */ 作者的注释已经很清晰了，代码也很清晰。跟着我一起理解一遍即可。CSS代码/* - reset.css * Re

2、sets default browser CSS.- */*原文作者注释已经很清晰了*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre ,a, abbr, acronym, address, code ,del, dfn, em, img, q, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption , tbody, tfoot, thead, tr, th, td margin : 0; paddi

3、ng : 0; border : 0; font-weight : inherit; font-style : inherit; font-size : 100%; font-family : inherit; vertical-align : baseline baseline ;/*行高1.5，也就是150%,刚看了淘宝UED的碳酸饮料会杂志，上面有介绍*/body line-height : 1.5;/* Tables still need cellspacing=0 in the markup. */table border-collapse : separate ; border-s

4、pacing : 0; caption , th, td text-align : left ; font-weight : normal ; /*垂直居中*/table, td, th vertical-align : middle ; /* Remove possible quote marks () from , . */blockquote:before, blockquote:after, q:before, q:after content : ; blockquote, q quotes: ; /* 链接内加图片，会有一个难看的border */a img border : non

5、e ; CSS代码/* - typography.css * Sets up some sensible default typography. typography = 文字排版- */* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) 默认12像素 */body font-size : 75%; color : #222 ; background : #fff ; font-family : Helvetica Neue , Arial , Helvetica , sans-s

6、erif ;/* Headings- */*不加粗,非纯黑(将更美观)*/h1,h2,h3,h4,h5,h6 font-weight : normal ; color : #111 ; h1 font-size : 3em; line-height : 1; margin-bottom : 0.5em; h2 font-size : 2em; margin-bottom : 0.75em; h3 font-size : 1.5em; line-height : 1; margin-bottom : 1em; h4 font-size : 1.2em; line-height : 1.25; m

7、argin-bottom : 1.25em; /*H5 H6的字体和正文已经一样了，所以要加粗*/h5 font-size : 1em; font-weight : bold ; margin-bottom : 1.5em; h6 font-size : 1em; font-weight : bold ; h1 img, h2 img, h3 img,h4 img, h5 img, h6 img margin : 0;/* Text elements- */p margin : 0 0 1.5em; p img. left float : left ; margin : 1.5em 1.5em

8、 1.5em 0; padding : 0; p img. right right float : right right ; margin : 1.5em 0 1.5em 1.5em; a:focus,a:hover color : #000 ; a color : #009 ; text-decoration : underline ; blockquote margin : 1.5em; color : #666 ; font-style : italic ; strong font-weight : bold ; em,dfn font-style : italic ; dfn fon

9、t-weight : bold ; sup, sub line-height : 0; abbr,acronym border-bottom : 1px dotted #666 ; address margin : 0 0 1.5em; font-style : italic ; del color : #666 ; pre margin : 1.5em 0; white white-space : pre ; /*代码用等宽字体*/pre , code ,tt font : 1em andale mono , lucida console , monospace ; line-height

10、: 1.5; /* Lists- */*和平时的做法不一样,常用的ul li是有margin的，并保留list-style*/li ul,li ol margin :0 1.5em; ul, ol margin : 0 1.5em 1.5em 1.5em; ul list-style-type : disc ; ol list-style-type : decimal ; dl margin : 0 0 1.5em 0; dl dt font-weight : bold ; dd margin-left : 1.5em;/* Tables- */*表格头加粗加背景，效果应该不错*/table

11、margin-bottom : 1.4em; width :100%; th font-weight : bold ; thead th background : #c3d9ff ; th,td, caption padding : 4px 10px 4px 5px ; tr.even td background : #e5ecf9 ; tfoot font-style : italic ; caption background : #eee ; /* Misc classes- */. small font-size : .8em; margin-bottom : 1.875em; line

12、-height : 1.875em; . large font-size : 1.2em; line-height : 2.5em; margin-bottom : 1.25em; . hide display : none ; .quiet color : #666 ; . loud color : #000 ; .highlight background : #ff0 ; .added background : #060 ; color : #fff ; .removed background : #900 ; color : #fff ; .first margin-left :0; p

13、adding-left :0; .last margin-right :0; padding-right :0; . top margin-top :0; padding-top :0; . bottom bottom margin-bottom :0; padding-bottom :0; 表单CSS代码/* - forms.css * Sets up some default styling for forms * Gives you classes to enhance your forms Usage: * For text fields, use class .title or .t

14、ext * For inline forms, use .inline (even when using columns)- */label font-weight : bold ; fieldset padding :1.4em; margin : 0 0 1.5em 0; border : 1px solid #ccc ; legend font-weight : bold ; font-size :1.2em; /* Form fields- */*这种方式的selector不错*/inputtype=text, inputtype=password,input.text, input.

15、title,textarea, select background-color : #fff ; border : 1px solid #bbb ;/*获取到焦点时改变边框颜色，不用JS就能实现，很实用*/inputtype=text:focus, inputtype=password:focus,input.text:focus, input.title:focus,textarea:focus, select:focus border-color : #666 ;inputtype=text, inputtype=password,input.text, input.title,texta

16、rea, select margin :0.5em 0;input.text,input.title width : 300px ; padding : 5px ; input.title font-size :1.5em; textarea width : 390px ; height : 250px ; padding : 5px ; /*修正checkbox和radio的位置*/inputtype=checkbox, inputtype=radio,input.checkbox, input.radio position : relative ; top :.25em;form. inl

17、ine line-height :3; form. inline p margin-bottom :0; /* Success, notice and error boxes- */.error,.notice,.success padding : .8em; margin-bottom : 1em; border : 2px solid #ddd ; .error background : #FBE3E4 ; color : #8a1f11 ; border-color : #FBC2C4 ; .notice background : #FFF6BF ; color : #514721 ;

18、border-color : #FFD324 ; .success background : #E6EFC2 ; color : #264409 ; border-color : #C6D880 ; .error a color : #8a1f11 ; .notice a color : #514721 ; .success a color : #264409 ; CSS代码/* - grid.css * Sets up an easy-to-use grid of 24 columns. By default, the grid is 950px wide, with 24 columns

19、spanning 30px, and a 10px margin between columns. If you need fewer or more columns, namespaces or semantic element names, use the compressor script (lib/compress.rb) Note: Changes made in this file will not be applied when using the compressor: make changes in lib/blueprint/grid.css.rb- */* A conta

20、iner should group all your columns.容器宽950,居中*/.container width : 950px ; margin : 0 auto ;/* Use this class on any div.span / container to see the grid.显示grid*/.showgrid background : url ( src /grid.png);/* Columns- */* Sets up basic grid floating and margin.DIV需要float才能排一行*/.column, div.span-1, div

21、.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 float : left

22、; margin-right : 10px ;/* The last column in a row needs this class.右侧的column需要将右边距调为0*/.last, div.last margin-right : 0; /* Use these classes to set the width of a column.最重要的部分,.span-x,为容器占用的column数*/.span-1 width : 30px ;.span-2 width : 70px ;.span-3 width : 110px ;.span-4 width : 150px ;.span-5

23、width : 190px ;.span-6 width : 230px ;.span-7 width : 270px ;.span-8 width : 310px ;.span-9 width : 350px ;.span-10 width : 390px ;.span-11 width : 430px ;.span-12 width : 470px ;.span-13 width : 510px ;.span-14 width : 550px ;.span-15 width : 590px ;.span-16 width : 630px ;.span-17 width : 670px ;.

24、span-18 width : 710px ;.span-19 width : 750px ;.span-20 width : 790px ;.span-21 width : 830px ;.span-22 width : 870px ;.span-23 width : 910px ;.span-24, div.span-24 width : 950px ; margin :0; /* Use these classes to set the width of an input. */input.span-1, textarea.span-1, input.span-2, textarea.s

25、pan-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span

26、-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21

27、, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 border-left - width : 1px ! important ; border-right - width : 1px ! important ; padding-left : 5px ! important ; padding-right : 5px ! important ;input.span-1, textarea.span-1 width

28、 : 18px ! important ; input.span-2, textarea.span-2 width : 58px ! important ; input.span-3, textarea.span-3 width : 98px ! important ; input.span-4, textarea.span-4 width : 138px ! important ; input.span-5, textarea.span-5 width : 178px ! important ; input.span-6, textarea.span-6 width : 218px ! im

29、portant ; input.span-7, textarea.span-7 width : 258px ! important ; input.span-8, textarea.span-8 width : 298px ! important ; input.span-9, textarea.span-9 width : 338px ! important ; input.span-10, textarea.span-10 width : 378px ! important ; input.span-11, textarea.span-11 width : 418px ! importan

30、t ; input.span-12, textarea.span-12 width : 458px ! important ; input.span-13, textarea.span-13 width : 498px ! important ; input.span-14, textarea.span-14 width : 538px ! important ; input.span-15, textarea.span-15 width : 578px ! important ; input.span-16, textarea.span-16 width : 618px ! importan

31、t ; input.span-17, textarea.span-17 width : 658px ! important ; input.span-18, textarea.span-18 width : 698px ! important ; input.span-19, textarea.span-19 width : 738px ! important ; input.span-20, textarea.span-20 width : 778px ! important ; input.span-21, textarea.span-21 width : 818px ! importan

32、t ; input.span-22, textarea.span-22 width : 858px ! important ; input.span-23, textarea.span-23 width : 898px ! important ; input.span-24, textarea.span-24 width : 938px ! important ; /* Add these to a column to append empty cols.这个想法很有意思，可以提高了重用度*/.append-1 padding-right : 40px ;.append-2 padding-r

33、ight : 80px ;.append-3 padding-right : 120px ;.append-4 padding-right : 160px ;.append-5 padding-right : 200px ;.append-6 padding-right : 240px ;.append-7 padding-right : 280px ;.append-8 padding-right : 320px ;.append-9 padding-right : 360px ;.append-10 padding-right : 400px ;.append-11 padding-rig

34、ht : 440px ;.append-12 padding-right : 480px ;.append-13 padding-right : 520px ;.append-14 padding-right : 560px ;.append-15 padding-right : 600px ;.append-16 padding-right : 640px ;.append-17 padding-right : 680px ;.append-18 padding-right : 720px ;.append-19 padding-right : 760px ;.append-20 paddi

35、ng-right : 800px ;.append-21 padding-right : 840px ;.append-22 padding-right : 880px ;.append-23 padding-right : 920px ;/* Add these to a column to prepend empty cols. */.prepend-1 padding-left : 40px ;.prepend-2 padding-left : 80px ;.prepend-3 padding-left : 120px ;.prepend-4 padding-left : 160px ;.prepend-5 padding-left : 200px ;.prepend-6 padding-left : 240px ;.prepend-7 padding-left : 280px ;.prepend-8 padding-left : 320px ;.prepend-9 padding-left : 360px ;.prepend-10 padding-left : 400px ;.prepend-11 padding-left : 440px ;.prepend-12 padding-