1、Web開發(fā)者不容錯(cuò)過的20段CSS代碼發(fā)表于2013-05-24 17:50| 30941次閱讀| 來源CSDN| 184 條評(píng)論| 作者張紅月CSSHTML前端開發(fā)摘要：共享已成為互聯(lián)網(wǎng)的一種主流，尤其是分享一些非常實(shí)用的技術(shù)，本文收集了20段非常專業(yè)的CSS 2/CSS 3代碼片段給大家，你可以把它們保存在IDE里、或者存儲(chǔ)在CSS文檔里，這些代碼片段絕對(duì)會(huì)給你帶來意外的驚喜。Web開發(fā)技術(shù)每年都在革新，瀏覽器已逐漸支持CSS3特性，并且網(wǎng)站設(shè)計(jì)師和前端開發(fā)者普遍采用這種新技術(shù)進(jìn)行設(shè)計(jì)與開發(fā)。但仍然有一些開發(fā)者迷戀著一些CSS2代碼。本文將分享20段非常專業(yè)的

2、CSS2/CSS3代碼供大家使用，你可以把它們保存在IDE里、或者存儲(chǔ)在CSS文檔里，這些代碼片段絕對(duì)會(huì)給你帶來意外的驚喜。1. CSS Resets網(wǎng)絡(luò)上關(guān)于CSS重置的代碼非常多。本段代碼是根據(jù)Eric Meyers reset codes進(jìn)行改編的，里面包含一點(diǎn)響應(yīng)式圖片和所有核心元素的邊界框設(shè)置，這樣就可以保持頁邊距和填充可以很好地對(duì)齊。css view plaincopy1. html, body, div, span, applet, object, iframe, h1, h2, 

3、h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt,

4、60;var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, emb

5、ed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video   2.   margin: 0;  3.   padding: 0;  4. 

6、0; border: 0;  5.   font-size: 100%;  6.   font: inherit;  7.   vertical-align: baseline;  8.   outline: none;  9.   -webkit-box-sizing: border-box;  10. &

7、#160; -moz-box-sizing: border-box;  11.   box-sizing: border-box;  12.   13. html  height: 101%;   14. body  font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, 

8、;sans-serif;   15.   16. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section  display: block;   17. ol, ul  list-style: none;  &#

9、160;18.   19. blockquote, q  quotes: none;   20. blockquote:before, blockquote:after, q:before, q:after  content: '' content: none;   21. strong  font-weight: bold;  &

10、#160; 22.   23. table  border-collapse: collapse; border-spacing: 0;   24. img  border: 0; max-width: 100%;   25.   26. p  font-size: 1.2em; line-height: 1.0em; colo

11、r: #333;   2.經(jīng)典的CSS Clearfix這個(gè)clearfix代碼已在Web開發(fā)者之間廣泛流傳，這段類選擇器要應(yīng)用到持有浮動(dòng)元素的容器中，確保后面的內(nèi)容都不會(huì)浮動(dòng)，但會(huì)被下推和清除。css view plaincopy1. .clearfix:after  content: "." display: block; clear: both; visibility: hidden; line-height: 

12、;0; height: 0;   2. .clearfix  display: inline-block;   3.  <font></font>    4. htmlxmlns .clearfix  display: block;   5. * html .clearfix  height: 

13、1%;     3.升級(jí)版的Clearfix在表現(xiàn)上，新版本和經(jīng)典版本不存在什么差異，這些類可以有效地清除所有floats，但它們只兼容現(xiàn)代瀏覽器和傳統(tǒng)的IE 6-8。css view plaincopy1. .clearfix:before, .container:after  content: "" display: table; <font></font>    2. .cle

14、arfix:after  clear: both;   3. /* IE 6/7 */  4. .clearfix  zoom: 1;     4. Cross-Browser Transparency CSS3里的許多屬性都與瀏覽器相兼容，但也有特例，比如opacity，需要對(duì)它進(jìn)行一些更新才可以。附加過濾屬性可以兼容任何老版的IE瀏覽器。css view plaincopy1. .t

15、ransparent   2.     filter: alpha(opacity=50); /* internet explorer */  3.     -khtml-opacity: 0.5;      /* khtml, old safari */  4.   

16、  -moz-opacity: 0.5;       /* mozilla, netscape */  5.     opacity: 0.5;           /* fx, safari, opera */  6. 

17、0;   源碼地址： 5. CSS Blockquote模板這段代碼主要用在頁面上進(jìn)行分離引用或復(fù)制內(nèi)容，并且給頁面文字提供了默認(rèn)樣式。 css view plaincopy1. blockquote   2.     background: #f9f9f9;<  3.     border-left: 10px solid #ccc;  &

18、#160;4.     margin: 1.5em 10px;  5.     padding: .5em 10px;  6.     quotes: "201C""201D""2018""2019"  7.   8. blockquote:before &#

19、160; 9.     color: #ccc;  10.     content: open-quote;    11.     font-size: 4em;  12.     line-height: .1em;  13.     margin

20、-right: .25em;   14.     vertical-align: -.4em;  15.    16. blockquote p   17.     display: inline;  18.     查看源碼： http:/css-6. 個(gè)性化的圓角代碼許多CSS開發(fā)者都非常熟悉圓

21、角語法，但如何為每個(gè)角設(shè)置不同的值？不如看看下面這段代碼吧！css view plaincopy1. #container   2.     -webkit-border-radius: 4px 3px 6px 10px;  3.     -moz-border-radius: 4px 3px 6px 10px;  4.    

22、 -o-border-radius: 4px 3px 6px 10px;    5.     border-radius: 4px 3px 6px 10px;  6.   7. /* alternative syntax broken into each line */  8. #container

23、   9.     -webkit-border-top-left-radius: 4px;  10.     -webkit-border-top-rightright-radius: 3px;  11.     -webkit-border-bottom-rightright-radius: 6px;  12.    

24、60;-webkit-border-bottom-left-radius: 10px;  13.     -moz-border-radius-topleft: 4px;  14.     -moz-border-radius-topright: 3px;  15.     -moz-border-radius-bottomright: 6px;  16.

25、    -moz-border-radius-bottomleft: 10px;  17.     7. 一般媒體查詢這是一段非常好的模板，用于各種零零碎碎的媒體查詢，在移動(dòng)設(shè)備上也可以使用，這段代碼甚至可以通過使用min-device-pixel-ratio引用到視網(wǎng)膜設(shè)備上。css view plaincopy1. /* Smartphones (portrait and landscape) - */ 

26、; 2. media only screen    3. and (min-device-width : 320px) and (max-device-width : 480px)     4.   /* Styles */   5.     6. /* Smartphones 

27、(landscape) - */  7. media only screen and (min-width : 321px)   8.   /* Styles */  9.     10. /* Smartphones (portrait) - */  11. media only scr

28、een and (max-width : 320px)   12.   /* Styles */    13.    14. /* iPads (portrait and landscape) - */  15. media only screen and (min-device-width

29、0;: 768px) and (max-device-width : 1024px)   16.   /* Styles */    17.    18. <font></font>    19. /* iPads (landscape) - */  20. media on

30、ly screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)   21.   /* Styles */  22.    23. /* iPads (portrait) -

31、60;*/  24. media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)    25.   /* Styles */  26.    

32、0; 27. /* Desktops and laptops - */  28. media only screen and (min-width : 1224px)   29.   /* Styles */  30.   31. /* Large screens - */  32. me

33、dia only screen and (min-width : 1824px)   33.   /* Styles */  34.    35. /* iPhone 4 - */  36. media only screen and (-webkit-min-device-pixel-ratio:1.5), 

34、;only screen and (min-device-pixel-ratio:1.5)   37.   /* Styles */  38.     源碼地址： http:/css-8. 現(xiàn)代字體棧在新網(wǎng)頁上設(shè)計(jì)屬于自己的字體棧還是件比較困難的事情，希望下面這段代碼能給你帶來啟發(fā)和開發(fā)模板，關(guān)于更多字體棧源碼，你可以訪問CSS Font Stacks。css view plaincopy1. /* Tim

35、es New Roman-based serif */    2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Ro

36、man", serif;    3.     4. /* A modern Georgia-based serif */    5. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida,

37、0;"DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;    6.     7. /*A more traditional Garamond-based serif */    8. fon

38、t-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman N

39、o9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;  

40、60; 9.     10. /*The Helvetica/Arial-based sans serif */    11. font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT",&

41、#160;"Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;  &#

42、160; 12.     13. /*The Verdana-based sans serif */    14. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans&quo

43、t;, "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;    15.     16. /*The Trebuchet-based sans serif */    17. font-

44、family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;  &#

45、160; 18.     19. /*The heavier “Impact” sans serif */    20. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bits

46、tream Vera Sans Bold", "Arial Black", sans-serif;    21.     22. /*The monospace */    23. font-family: Consolas, "Andale Mono WT", "Andale 

47、Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,

48、60;"Courier New", Courier, monospace;    源碼地址： 9. 自定義文本選擇一些新的Web瀏覽器允許你在網(wǎng)頁上自定義一些突出顯示的顏色，下面代碼的默認(rèn)顏色是淺藍(lán)色，當(dāng)然，你可以依據(jù)個(gè)人愛好進(jìn)行各種顏色設(shè)置。下面代碼引用了典型的Webkit和Mozilla供應(yīng)商前綴:selection 。css view plaincopy1. :selection  background: #e2eae2;  &#

49、160;2. :-moz-selection  background: #e2eae2;   3. :-webkit-selection  background: #e2eae2;     10.隱藏Logo上的H1文本css view plaincopy1. h1   2.     text-indent: -9999px;   

50、60;3.     margin: 0 auto;  4.     width: 320px;  5.     height: 85px;  6.     background: transparent url("images/logo.png") no-repeat scrol

51、l;   7.     11. 為圖片創(chuàng)建拍立得效果邊框運(yùn)用下面代碼可以在圖片上實(shí)現(xiàn)拍立得相片效果一大片白色邊框和細(xì)微的陰影。你需要修改圖片的寬度/高度值來與你的網(wǎng)站布局相匹配。css view plaincopy1. img.polaroid    2.     background:#000; /*Change this to a background image 

52、;or remove*/   3.     border:solid #fff;  4.     border-width:6px 6px 20px 6px;  5.     box-shadow:1px 1px 5px #333; /* Standard blur at 5px

53、. Increase for more depth *  6.     -webkit-box-shadow:1px 1px 5px #333; 7.     -moz-box-shadow:1px 1px 5px #333;  8.     height:200px; /*Set to 

54、height of your image or desired div*/  9.     width:200px; /*Set to width of your image or desired div*/   10.     源碼地址： 12. 錨鏈接偽類選擇器css view plaincop

55、y1. a:link  color: blue;   2. a:visited  color: purple;    3. a:hover  color: red;    4. a:active  color: yellow;     源碼地址： 13. 花俏地CSS3 Pull-QuotesPull-quo

56、tes不同于頁面里的blockquote，它們通常用在文章中來引用文本。css view plaincopy1. .has-pullquote:before    2.     /* Reset metrics. */  3.     padding: 0;  4.     border: none;   &

57、#160;5.     /* Content */  6.     content: attr(data-pullquote);  7.     /* Pull out to the right, modular scale based margins. */    8

58、.     float: rightright;  9.     width: 320px;  10.     margin: 12px -140px 24px 36px;  11.     /* Baseline correction */  12.  &#

59、160;  position: relative;  13.     top: 5px;   14.     /* Typography (30px line-height equals 25% incremental leading) */   15.     font-siz

60、e: 23px;  16.     line-height: 30px;   17.    18. .pullquote-adelle:before   19.     font-family: "adelle-1", "adelle-2"  20.     font-

61、weight: 100;  21.     top: 10px !important;  22.    23.   24. .pullquote-helvetica:before   25.     font-family: "Helvetica Neue", Arial, sans-serif; 

62、 26.     font-weight: bold;  27.     top: 7px !important;  28.   29. .pullquote-facit:before    30.     font-family: "facitweb-1", "facitweb-2&qu

63、ot;, Helvetica, Arial, sans-serif;  31.     font-weight: bold;  32.     top: 7px !important;  33.     源碼地址： 14. CSS3的全屏背景效果如果你想使用大圖片作為網(wǎng)站背景，并希望在頁面滾動(dòng)時(shí)保持固定，該代碼片段非常適合，不過這段代碼無法在舊的瀏

64、覽器上工作。css view plaincopy1. html    2.     background: url('images/bg.jpg') no-repeat center center fixed;    3.     -webkit-background-size: cover;   4.  

65、60;  -moz-background-size: cover;  5.     -o-background-size: cover;  6.     background-size: cover;  7.     源碼： http:/css-15. 內(nèi)容垂直集中相對(duì)于內(nèi)容在水平位置，內(nèi)容在垂直方向是不好把控的，尤其當(dāng)考慮到滾動(dòng)條這些因素時(shí)。這段純CSS代

66、碼可以很好的工作。css view plaincopy1. .container   2.     min-height: 6.5em;  3.     display: table-cell;   4.     vertical-align: middle;  5.     源碼地址： 

67、/Style/Examples/007/center16. 垂直滾動(dòng)條這段代碼將確保你的HTML元素總是稍微高于瀏覽器滾動(dòng)條所停留的位置。 css view plaincopy1. html  height: 101%     17. CSS3 Gradients模板css view plaincopy1. #colorbox   2.     background: #62

68、9721;  3.     background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721);  4.     background-image: -webkit-linear-gradient(top, #83b842, #629721);

69、60;  5.     background-image: -moz-linear-gradient(top, #83b842, #629721);  6.     background-image: -ms-linear-gradient(top, #83b842, #629721);  7.     background-image: -o-l

70、inear-gradient(top, #83b842, #629721);  8.     background-image: linear-gradient(top, #83b842, #629721);  9.     18. Font-Face模板使用font-face可以把TTF/OTF/SVG/WOFF文件嵌入到網(wǎng)站，并生成自定義font families。css view plaincopy1. fon

71、t-face   2.     font-family: 'MyWebFont'   3.     src: url('webfont.eot'); /* IE9 Compat Modes */   4.     src: url('webfont.eot?#iefix

72、') format('embedded-opentype'), /* IE6-IE8 */  5.     url('webfont.woff') format('woff'), /* Modern Browsers */  6.     url('webfont.ttf')  format(&#

73、39;truetype'), /* Safari, Android, iOS */   7.     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */  8.   9. body   10.     font-family: 'MyWebFont', Arial, sans-serif;  11.