《Web开发者不容错过的20段CSS代码》由会员分享，可在线阅读，更多相关《Web开发者不容错过的20段CSS代码（26页珍藏版）》请在金锄头文库上搜索。
1、Web开发者不容错过的20段CSS弋码Web开发技术每年都在革新，浏览器已逐渐支持CSS3特 性，并且网站设计师和前端开发者普遍采用这种新技术进行 设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。本文将分享20段非常专业的CSS2/CSS3弋码供大家使用Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设 计与开发。但仍然有一些开发者迷恋着一些CSS2代码。本文将分享20段非常专业的CSS2/CSS3代码供大家使用， 你可以把它们保存在IDE里、或者存储在 CSS文档里，这些 代码片段绝对会给你带来意外的惊喜。1. CSS Rese
2、ts网络上关于CSS重置的代码非常多。本段代码是根据EricMeyers reset codes 进行改编的，里面包含一点响应式图 片和所有核心元素的边界框设置，这样就可以保持页边距和 填充可以很好地对齐。1 html, body, div, span, applet, object, iframe, h1, h2,2 h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,3 address, big, cite,code, del, dfn, em, img, ins,4 kbd, q, s, samp, small, strike, st
3、rong,sub, sup,5 tt, var, b, u, i,center, dl, dt, dd, ol, ul, li,6 fieldset, form, label, legend, table,caption,7 tbody, tfoot, thead, tr, th, td, article, aside,8 canvas, details, embed, figure, figcaption, footer,9 header, hgroup, menu, nav, output, ruby, section,1 summa ry, time, mark, audio, vide
4、o 0margin: 0;1 padding: 0;1 border: 0;1 font-size:100%;2 font: inherit;1vertical-align:baseline;3 outline: none;1 -webkit-box-sizing: border-box;4 -moz-box-sizing: border-box;1 box-sizing: border-box;5 1html height:101%; 6 body1 font-size: 62.5%; line-height: 1; font-fami7 ly: Arial, Tahoma, sans-se
5、rif; 18 article,aside, details, figcaption, figure, footer,1 header, hgroup, menu, nav, section9 display: block; 2ol, ul list-style: none; 02 blockquote, q quotes: none; collapse; border-spacing:1 blockquote:before, blockquote:after, q:before,2 q:after content:; content:none; 2 strong font-weight:bo
6、ld; 23 table2 border-collapse:4 ; 2img border: 0; max-width: 100%; 52p6 font-size: 1.2em; line-height: 1.0em; color : #333; 2. 经典的 CSS Clearfix这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都 不会浮动，但会被下推和清除。.clearfix:after content:.; display:block; clear:both;1visibility:hidden; line-height:0
7、; height:20; 3.clearfix display: inline-block; 45htmlxmlns .clearfix display:block; * html .clearfix height:1%; 3. 升级版的 Clearfix 在表现上，新版本和经典版本不存在什么差异，这些类可以 有效地清除所有 floats ，但它们只兼容现代浏览器和传统的IE 6-8 。.clearfix:before, .container:after1 content: ; display: table; 2.clearfix:after clear: both; 3/* IE 6/7 *
8、/4.clearfix zoom: 1; 4. Cross-Browser TransparencyCSS3里的许多属性都与浏览器相兼容，但也有特例，比如 opacity ，需要对它进行一些更新才可以。附加过滤属性可 以兼容任何老版的 IE 浏览器。1.transparent 3explorer */4 -khtml-opacity: 0.5; /* khtml, 5old safari */6 -moz-opacity: 0.5; /* mozilla, netscape */opacity: 0.5; /* fx, safari, opera */5. CSS Blockquote 模板
9、这段代码主要用在页面上进行分离引用或复制内容，并且给 页面文字提供了默认样式。1 blockquote 2 background:#f9f9f9;3 border-left:10px solid #ccc;4 margin: 1.5em 10px;5 padding: .5em10px;quotes: 201C201D20182019;8 blockquote:before 9color: #ccc;10 content: open-quote;11 font-size: 4em;12 line-height: .1em;13 margin-right: .25em;14 vertical-a
10、lign: -.4em;15 16blockquote p 17 display: inline; 186. 个性化的圆角代码许多css开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！1 #container 10p2 -webkit-border-radius: 4px 3px 6px3 x;-moz-border-radius:4px 3px 6px 10px;-o-border-radius:border-radius:4px 3px 6px 10px;4px 3px 6px 10px;/* alternative syntax broken into ea
11、ch line */#container 6px;-webkit-border-top-left-radius:-webkit-border-top-rightright-radius:-webkit-border-bottom-rightright-radius:-webkit-border-bottom-left-radius:-moz-border-radius-topleft:-moz-border-radius-topright:-moz-border-radius-bottomright:-moz-border-radius-bottomleft:4px;3px10px;4px;3
12、px;6px;10px;5678910111213141516177. 一般媒体查询 这是一段非常好的模板，用于各种零零碎碎的媒体查询，在 移动设备上也可以使用，这段代码甚至可以通过使用 min-device-pixel-ratio 引用到视网膜设备上。1 /* Smartphones (portrait and landscape) 2 */3 media only screen4 and (min-device-width : 320px) and5 (max-device-width :480px) 6 /* Styles */7 8 /* Smartphones (landscape)
13、 */9 media only screen and (min-width : 321px) 10 /* Styles */1112/* Smartphones (portrait) */13media only screen and (max-width : 320px) 14 /* Styles */*/15 16/* iPads (portrait and landscape)17media only screenand18(min-device-width :768px) and19(max-device-width :1024px) 20 /* Styles */212223/* i
14、Pads (landscape) */24media only screenand25(min-device-width :768px) and26(max-device-width :1024px) and27(orientation : landscape) 28 /* Styles */2930/* iPads (portrait) - */31media only screenand32(min-device-width :768px) and33(max-device-width :1024px) and34(orientation : portrait) 35 /* Styles */3637/* Desktops and laptops - */1224px) 38media only screen and (min-width :
