1. CSS Resets
網絡上關於CSS重置的代碼非常多。本段代碼是根據Eric Meyer’s reset codes進行改編的,裏面包含一點響應式圖片和所有核心元素的邊界框設置,這樣就可以保持頁邊距和填充可以很好地對齊。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | html, body, div, span, applet, object, iframe, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , 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, 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, embed , figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin : 0 ;
padding : 0 ;
border : 0 ;
font-size : 100% ;
font : inherit;
vertical-align : baseline ;
outline : none ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; } html { height : 101% ; } body { font-size : 62.5% ; line-height : 1 ; font-family : Arial , Tahoma , sans-serif ; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display : block ; } ol, ul { list-style : none ; } blockquote, q { quotes : none ; } blockquote:before, blockquote:after, q:before, q:after { content : '' ; content : none ; } strong { font-weight : bold ; } table { border-collapse : collapse ; border-spacing : 0 ; } img { border : 0 ; max-width : 100% ; } p { font-size : 1.2em ; line-height : 1.0em ; color : #333 ; } |
2.經典的CSS Clearfix
這個clearfix代碼已在Web開發者之間廣泛流傳,這段類選擇器要應用到持有浮動元素的容器中,確保後面的內容都不會浮動,但會被下推和清除。
1 2 3 4 5 | .clearfix:after { content : "." ; display : block ; clear : both ; visibility : hidden ; line-height : 0 ; height : 0 ; } .clearfix { display : inline- block ; }
<font></font> html[xmlns] .clearfix { display : block ; } * html .clearfix { height : 1% ; } |
3.升級版的Clearfix
在表現上,新版本和經典版本不存在什麼差異,這些類可以有效地清除所有floats,但它們只兼容現代瀏覽器和傳統的IE 6-8。
1 2 3 4 | .clearfix:before, .container:after { content : "" ; display : table; }<font></font> .clearfix:after { clear : both ; } /* IE 6/7 */ .clearfix { zoom: 1 ; } |
4. Cross-Browser Transparency
CSS3裏的許多屬性都與瀏覽器相兼容,但也有特例,比如opacity,需要對它進行一些更新纔可以。附加過濾屬性可以兼容任何老版的IE瀏覽器。
1 2 3 4 5 6 | . transparent {
filter: alpha(opacity= 50 ); /* internet explorer */
-khtml-opacity: 0.5 ; /* khtml, old safari */
-moz-opacity: 0.5 ; /* mozilla, netscape */
opacity: 0.5 ; /* fx, safari, opera */ } |
5. CSS Blockquote模板
這段代碼主要用在頁面上進行分離引用或複製內容,並且給頁面文字提供了默認樣式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | blockquote {
background : #f9f9f9 ;<
border-left : 10px solid #ccc ;
margin : 1.5em 10px ;
padding : . 5em 10px ;
quotes : "\201C" "\201D" "\2018" "\2019" ; } blockquote:before {
color : #ccc ;
content : open-quote ;
font-size : 4em ;
line-height : . 1em ;
margin-right : . 25em ;
vertical-align : -. 4em ; } blockquote p {
display : inline ; } |
6. 個性化的圓角代碼
許多CSS開發者都非常熟悉圓角語法,但如何爲每個角設置不同的值?不如看看下面這段代碼吧!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #container {
-webkit-border-radius: 4px 3px 6px 10px ;
-moz-border-radius: 4px 3px 6px 10px ;
-o-border-radius: 4px 3px 6px 10px ;
border-radius: 4px 3px 6px 10px ; } /* alternative syntax broken into each line */ #container {
-webkit-border-top-left-radius: 4px ;
-webkit-border-top-rightright-radius: 3px ;
-webkit-border-bottom-rightright-radius: 6px ;
-webkit-border-bottom-left-radius: 10px ;
-moz-border-radius-topleft: 4px ;
-moz-border-radius-topright: 3px ;
-moz-border-radius-bottomright: 6px ;
-moz-border-radius-bottomleft: 10px ; } |
7. 一般媒體查詢
這是一段非常好的模板,用於各種零零碎碎的媒體查詢,在移動設備上也可以使用,這段代碼甚至可以通過使用min-device-pixel-ratio引用到視網膜設備上。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px ) and (max-device-width : 480px ) {
/* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px ) {
/* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px ) {
/* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) {
/* Styles */ } <font></font> /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : landscape ) {
/* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px ) and (max-device-width : 1024px ) and (orientation : portrait ) {
/* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px ) {
/* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px ) {
/* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5 ), only screen and (min-device-pixel-ratio: 1.5 ) {
/* Styles */ } |
8. 現代字體棧
在新網頁上設計屬於自己的字體棧還是件比較困難的事情,希望下面這段代碼能給你帶來啓發和開發模板,關於更多字體棧源碼,你可以訪問CSS Font Stacks。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* Times New Roman-based serif */ font-family : Cambria, "Hoefler Text" , Utopia, "Liberation Serif" , "Nimbus Roman No9 L Regular" , Times, "Times New Roman" , serif ;
/* A modern Georgia-based serif */ font-family : Constantia, "Lucida Bright" , Lucidabright, "Lucida Serif" , Lucida, "DejaVu Serif," "Bitstream Vera Serif" , "Liberation Serif" , Georgia, serif ;
/*A more traditional Garamond-based serif */ font-family : "Palatino Linotype" , Palatino, Palladio, "URW Palladio L" , "Book Antiqua" , Baskerville, "Bookman Old Style" , "Bitstream Charter" , "Nimbus Roman No9 L" , Garamond, "Apple Garamond" , "ITC Garamond Narrow" , "New Century Schoolbook" , "Century Schoolbook" , "Century Schoolbook L" , Georgia, serif ;
/*The Helvetica/Arial-based sans serif */ font-family : Frutiger, "Frutiger Linotype" , Univers, Calibri, "Gill Sans" , "Gill Sans MT" , "Myriad Pro" , Myriad, "DejaVu Sans Condensed" , "Liberation Sans" , "Nimbus Sans L" , Tahoma , Geneva, "Helvetica Neue" , Helvetica , Arial , sans-serif ;
/*The Verdana-based sans serif */ font-family : Corbel, "Lucida Grande" , "Lucida Sans Unicode" , "Lucida Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Liberation Sans" , Verdana , "Verdana Ref" , sans-serif ;
/*The Trebuchet-based sans serif */ font-family : "Segoe UI" , Candara, "Bitstream Vera Sans" , "DejaVu Sans" , "Bitstream Vera Sans" , "Trebuchet MS" , Verdana , "Verdana Ref" , sans-serif ;
/*The heavier “Impact” sans serif */ font-family : Impact, Haettenschweiler, "Franklin Gothic Bold" , Charcoal, "Helvetica Inserat" , "Bitstream Vera Sans Bold" , "Arial Black" , sans-serif ;
/*The monospace */ font-family : Consolas, "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco, "Courier New" , Courier , monospace ; |
9. 自定義文本選擇
一些新的Web瀏覽器允許你在網頁上自定義一些突出顯示的顏色,下面代碼的默認顏色是淺藍色,當然,你可以依據個人愛好進行各種顏色設置。下面代碼引用了典型的Webkit和Mozilla供應商前綴::selection 。
1 2 3 | ::selection { background : #e2eae2 ; } ::-moz-selection { background : #e2eae2 ; } ::-webkit-selection { background : #e2eae2 ; } |
10.隱藏Logo上的H1文本
1 2 3 4 5 6 7 | h 1 {
text-indent : -9999px ;
margin : 0 auto ;
width : 320px ;
height : 85px ;
background : transparent url ( "p_w_picpaths/logo.png" ) no-repeat scroll ; } |