Blueprint_CSS_分析例子6356.pdf

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

1、.Blueprint 英文意思是蓝图、设计图。BluePrintCSS 可以非常方便的实现复杂的网页布局，即能更简单实现自己的蓝图。例子文件:Sample.html .blueprintcss.org/tests/parts/sample.html 这个文件将所有的 CSS 文件合并到一起，减少了并发连接数。一共包含了以下几个 CSS/*reset.css*/*typography.css*/*forms.css*/*grid.css*/此外，如果是 IE8 以下版本则包含/*ie.css*/作者的注释已经很清晰了，代码也很清晰。跟着我一起理解一遍即可。CSS 代码/*-reset.css *

2、Resets 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;padding:0;border:0;font-weight:inherit;font-sty

3、le: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-spacing:0;caption,th,td text-align:left;font-weight:normal;/*垂直居中*/

4、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:none;CSS 代码/*-typography.css *Sets up some sensible default typography.typography=文字排版 -*/*Default font settin

5、gs.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-serif;./*Headings -*/*不加粗,非纯黑(将更美观)*/h1,h2,h3,h4,h5,h6 font-weight:normal;color:#111;h1 font-size:3em;line-height:1;margin-bottom:0.5em;h2 fo

6、nt-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;margin-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 mar

7、gin:0;/*Text elements -*/p margin:0 0 1.5em;p img.left float:left;margin:1.5em 1.5em 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-we

8、ight:bold;em,dfn font-style:italic;dfn font-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:

9、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 margin-botto

10、m: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-height:1.875em;.large font-size:1.2em;line-heigh

11、t: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;padding-left:0;.last margin-right:0;padding-right:0;.top margin-top:0;padding-top:0;.bottom bottom

12、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.text *For inline forms,use.inline(even when using columns)-*/.label font-weight:bold;fieldset padding:1.4em;margin:0 0 1.5

13、em 0;border:1px solid#ccc;legend font-weight:bold;font-size:1.2em;/*Form fields -*/*这种方式的 selector 不错*/inputtype=text,inputtype=password,input.text,input.title,textarea,select background-color:#fff;border:1px solid#bbb;/*获取到焦点时改变边框颜色，不用 JS 就能实现，很实用*/inputtype=text:focus,inputtype=password:focus,inpu

14、t.text:focus,input.title:focus,textarea:focus,select:focus border-color:#666;inputtype=text,inputtype=password,input.text,input.title,textarea,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

15、和 radio 的位置*/inputtype=checkbox,inputtype=radio,input.checkbox,input.radio position:relative;top:.25em;form.inline 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;co

16、lor:#8a1f11;border-color:#FBC2C4;.notice background:#FFF6BF;color:#514721;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 defau

17、lt,the grid is 950px wide,with 24 columns 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/

18、blueprint/grid.css.rb -*/*A container 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 才能排一行 */

19、.column,div.span-1,div.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;ma

20、rgin-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 width:190px;.span-

21、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;.span-18 width:710px;.span-19 width:750px;.span-20 width:7

22、90px;.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.span-2,input.span-3,textarea.span-3,input.span-4,textarea.span-4,input.span-5,textarea.s

23、pan-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-12,textarea.span-12,input.span-13,textarea.span-13,input.span-14,textarea.span-14,input.span-15,textarea.

24、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,textarea.span-21,input.span-22,textarea.span-22,input.span-23,textarea.span-23,input.span-24,textarea.span-24 border-left-w

25、idth:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;input.span-1,textarea.span-1 width: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!im

26、portant;.input.span-5,textarea.span-5 width:178px!important;input.span-6,textarea.span-6 width:218px!important;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

27、:378px!important;input.span-11,textarea.span-11 width:418px!important;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,text

28、area.span-16 width:618px!important;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!important;

29、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-right:80px;.append-3 padding-

30、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-right:440px;.append-12 padding-right:480px;.append-13 padd

31、ing-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 padding-right:800px;.append-21 padding-right:840px;.append-22 padding-right:880px;.appe

32、nd-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

33、-left:320px;.prepend-9 padding-left:360px;.prepend-10 padding-left:400px;.prepend-11 padding-left:440px;.prepend-12 padding-left:480px;.prepend-13 padding-left:520px;.prepend-14 padding-left:560px;.prepend-15 padding-left:600px;.prepend-16 padding-left:640px;.prepend-17 padding-left:680px;.prepend-1

34、8 padding-left:720px;.prepend-19 padding-left:760px;.prepend-20 padding-left:800px;.prepend-21 padding-left:840px;.prepend-22 padding-left:880px;.prepend-23 padding-left:920px;/*Border on right hand side of a column.右侧的 border,此外还会加右边距和右补白 */div.border padding-right:4px;margin-right:5px;border-right

35、:1px solid#eee;/*Border with more whitespace,spans one column.比 border 空的更多*/div.colborder padding-right:24px;margin-right:25px;border-right:1px solid#eee;/*Use these classes on an element to push it into the next column,or to pull it into the previous column.可以把元素拉回上一行或者推入下一行 */.pull-1 margin-left:

36、-40px;.pull-2 margin-left:-80px;.pull-3 margin-left:-120px;.pull-4 margin-left:-160px;.pull-5 margin-left:-200px;.pull-6 margin-left:-240px;.pull-7 margin-left:-280px;.pull-8 margin-left:-320px;.pull-9 margin-left:-360px;.pull-10 margin-left:-400px;.pull-11 margin-left:-440px;.pull-12 margin-left:-4

37、80px;.pull-13 margin-left:-520px;.pull-14 margin-left:-560px;.pull-15 margin-left:-600px;.pull-16 margin-left:-640px;.pull-17 margin-left:-680px;.pull-18 margin-left:-720px;.pull-19 margin-left:-760px;.pull-20 margin-left:-800px;.pull-21 margin-left:-840px;.pull-22 margin-left:-880px;.pull-23 margin

38、-left:-920px;.pull-24 margin-left:-960px;.pull-1,.pull-2,.pull-3,.pull-4,.pull-5,.pull-6,.pull-7,.pull-8,.pull-9,.pull-10,.pull-11,.pull-12,.pull-13,.pull-14,.pull-15,.pull-16,.pull-17,.pull-18,.pull-19,.pull-20,.pull-21,.pull-22,.pull-23,.pull-24 float:left;position:relative;/*左右用像素,上下用相对定位*/.push-

39、1 margin:0-40px 1.5em 40px;.push-2 margin:0-80px 1.5em 80px;.push-3 margin:0-120px 1.5em 120px;.push-4 margin:0-160px 1.5em 160px;.push-5 margin:0-200px 1.5em 200px;.push-6 margin:0-240px 1.5em 240px;.push-7 margin:0-280px 1.5em 280px;.push-8 margin:0-320px 1.5em 320px;.push-9 margin:0-360px 1.5em 3

40、60px;.push-10 margin:0-400px 1.5em 400px;.push-11 margin:0-440px 1.5em 440px;.push-12 margin:0-480px 1.5em 480px;.push-13 margin:0-520px 1.5em 520px;.push-14 margin:0-560px 1.5em 560px;.push-15 margin:0-600px 1.5em 600px;.push-16 margin:0-640px 1.5em 640px;.push-17 margin:0-680px 1.5em 680px;.push-1

41、8 margin:0-720px 1.5em 720px;.push-19 margin:0-760px 1.5em 760px;.push-20 margin:0-800px 1.5em 800px;.push-21 margin:0-840px 1.5em 840px;.push-22 margin:0-880px 1.5em 880px;.push-23 margin:0-920px 1.5em 920px;.push-24 margin:0-960px 1.5em 960px;.push-1,.push-2,.push-3,.push-4,.push-5,.push-6,.push-7

42、,.push-8,.push-9,.push-10,.push-11,.push-12,.push-13,.push-14,.push-15,.push-16,.push-17,.push-18,.push-19,.push-20,.push-21,.push-22,.push-23,.push-24 float:right right;position:relative;/*Misc classes and elements -*/*In case you need to add a gutter above/below an element*/.prepend-top margin-top

43、:1.5em;.append-bottom bottom margin-bottom:1.5em;/*Use a.box to create a padded box inside a column.*/.box padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;/*Use this to create a horizontal ruler across a column.*/hr background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:

44、0 0 1.45em;border:none;hr.space background:#fff;color:#fff;./*Clearing floats without extra markup Based on How To Clear Floats Without Structural Markup by PiE content:0020;display:block;height:0;clear:both;visibility:hidden;overflow:hidden;.clearfix,.container display:block;/*Regular clearing appl

45、y to column that should drop below previous ones.*/.clear clear:both;CSS 代码/*-ie.css Contains every hack for Internet Explorer,so that our core files stay sweet and nimble.IE 问题集 -可以解决好多莫名其妙的 IE 兼容性问题 -*/*Make sure the layout is centered in IE5 兼容 IE5.*/body text-align:center;.container text-align:l

46、eft;/*Fixes IE margin bugs*/*html.column,*html div.span-1,*html div.span-2,*html div.span-3,*html div.span-4,*html div.span-5,*html div.span-6,*html div.span-7,*html div.span-8,*html div.span-9,*html div.span-10,*html div.span-11,.*html div.span-12,*html div.span-13,*html div.span-14,*html div.span-

47、15,*html div.span-16,*html div.span-17,*html div.span-18,*html div.span-19,*html div.span-20,*html div.span-21,*html div.span-22,*html div.span-23,*html div.span-24 overflow-x:hidden;/*Elements -*/*Fixes incorrect styling of legend in IE6.*/*html legend margin:0px -8px 16px 0;padding:0;/*Fixes incor

48、rect placement of ol numbers in IE6/7.*/ol margin-left:2em;/*Fixes wrong line-height on sup/sub in IE.*/sup vertical-align:text-top;sub vertical-align:text-bottom;/*Fixes IE7 missing wrapping of code elements.*/htmlbody p code *white white-space:normal;/*IE 6&7 has problems with setting proper margi

49、ns.*/hr margin:-8px auto 11px;/*Explicitly set interpolation,allowing dynamically resized images to not look horrible*/img -ms-interpolation-mode:bicubic;/*Clearing -*/*Makes clearfix actually work in IE*/.clearfix,.container display:inline-block;*html.clearfix,*html.container height:1%;/*Forms -.*/

50、*Fixes padding on fieldset*/fieldset padding-top:0;/*Fixes rule that IE 6 ignores*/input.text,input.title background-color:#fff;border:1px solid#bbb;input.text:focus,input.title:focus border-color:#666;input.text,input.title,textarea,select margin:0.5em 0;input.checkbox,input.radio position:relative