Web開發者不容錯過的20段CSS程式碼
Web開發技術每年都在革新，瀏覽器已逐漸支援CSS3特性，並且網站設計師和前端開發者普遍採用這種新技術進行設計與開發。但仍然有一些開發者迷戀著一些CSS2程式碼。
本文將分享20段非常專業的CSS2/CSS3程式碼供大家使用，你可以把它們儲存在IDE裡、或者儲存在CSS文件裡，這些程式碼片段絕對會給你帶來意外的驚喜。
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, h1,
h2, 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, 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。
.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 {
|