Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。
1 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 { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 font-size: 100%; 6 font: inherit; 7 vertical-align: baseline; 8 outline: none; 9 -webkit-box-sizing: border-box; 10 -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, sans-serif; } 15 16 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 17 ol, ul { list-style: none; } 18 19 blockquote, q { quotes: none; } 20 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 21 strong { font-weight: bold; } 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; color: #333; }