Web开发者不容错过的20段CSS代码.docx

1、Web开发者不容错过的20段CSS代码Web开发者不容错过的20段CSS代码Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。本文将分享20段非常专业的CSS2/CSS3代码供大家使用.Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的

2、惊喜。1. CSS Resets网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyers reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。1234567891011121314151617181920212223242526html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,pre, a, abbr, acronym, address, big, cite,code, del, dfn,

3、 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, s

4、ection, 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

5、-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;bord

6、er-spacing:0; img border:0;max-width:100%; p font-size:1.2em;line-height:1.0em;color:#333; 2.经典的CSS Clearfix这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。12345.clearfix:after content:.;display:block;clear:both;visibility:hidden;line-height:0;height:0; .clearfix display: inlin

7、e-block; htmlxmlns .clearfix display:block; * html .clearfix height:1%; 3.升级版的Clearfix在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。1234.clearfix:before, .container:after content:;display: table; .clearfix:after clear:both; /* IE 6/7 */.clearfix zoom:1; 4. Cross-Browser TransparencyC

8、SS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。123456.transparentfilter: 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模板这段代码主要用在页面上进行分离引用或复制内容，并且给页面

9、文字提供了默认样式。123456789101112131415161718blockquote background:#f9f9f9;border-left:10pxsolid#ccc;margin:1.5em10px;padding: .5em10px;quotes:201C201D20182019;blockquote:before color:#ccc;content:open-quote;font-size:4em;line-height: .1em;margin-right: .25em;vertical-align: -.4em;blockquote p display:inlin

10、e;6. 个性化的圆角代码许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！1234567891011121314151617#container -webkit-border-radius:4px3px6px10px;-moz-border-radius:4px3px6px10px;-o-border-radius:4px3px6px10px;border-radius:4px3px6px10px;/* alternative syntax broken into each line */#container -webkit-border-top-lef

11、t-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. 一般媒体查询这是一段非常好的模板，用于各种零零碎碎的媒

12、体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。1234567891011121314151617181920212223242526272829303132333435363738/* Smartphones (portrait and landscape) - */media onlyscreenand (min-device-width :320px) and (max-device-width :480px) /* Styles */* Smartphones (landscape) - */media onlys

13、creenand (min-width :321px) /* Styles */* Smartphones (portrait) - */media onlyscreenand (max-width :320px) /* Styles */* iPads (portrait and landscape) - */media onlyscreenand (min-device-width :768px) and (max-device-width :1024px) /* Styles */* iPads (landscape) - */media onlyscreenand (min-devic

14、e-width :768px) and (max-device-width :1024px) and (orientation :landscape) /* Styles */* iPads (portrait) - */media onlyscreenand (min-device-width :768px) and (max-device-width :1024px) and (orientation :portrait) /* Styles */* Desktops and laptops - */media onlyscreenand (min-width :1224px) /* St

15、yles */* Large screens - */media onlyscreenand (min-width :1824px) /* Styles */* iPhone 4 - */media onlyscreenand (-webkit-min-device-pixel-ratio:1.5), onlyscreenand (min-device-pixel-ratio:1.5) /* Styles */8. 现代字体栈在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSS Font Stacks。1234567

16、891011121314151617181920212223/* 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,Bi

17、tstream 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 Sc

18、hoolbook,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,Ari

19、al,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 V

20、era 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 Co

21、nsole,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 。123:selection background:#e2eae2; :-moz-selec

22、tion background:#e2eae2; :-webkit-selection background:#e2eae2; 10.隐藏Logo上的H1文本1234567h1text-indent:-9999px;margin:0auto;width:320px;height:85px;background:transparenturl(images/logo.png)no-repeatscroll;11. 为图片创建拍立得效果边框运用下面代码可以在图片上实现拍立得相片效果一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。12345678910img.polar

23、oid background:#000;/*Change this to a background image or remove*/border:solid#fff;border-width:6px6px20px6px;box-shadow:1px1px5px#333;/* Standard blur at 5px. Increase for more depth *-webkit-box-shadow:1px 1px 5px #333;-moz-box-shadow:1px 1px 5px #333;height:200px; /*Set to height of your image o

24、r desired div*/width:200px;/*Set to width of your image or desired div*/12. 锚链接伪类选择器1234a:link color:blue; a:visited color:purple; a:hover color:red; a:active color: yellow; 13. 花俏地CSS3 Pull-QuotesPull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。123456789101112131415161718192021222324252627282930313233.h

25、as-pullquote:before /* Reset metrics. */padding:0;border:none;/* Content */content:attr(data-pullquote);/* Pull out to the right, modular scale based margins. */float: rightright;width:320px;margin:12px-140px24px36px;/* Baseline correction */position:relative;top:5px;/* Typography (30px line-height

26、equals 25% incremental leading) */font-size:23px;line-height:30px;.pullquote-adelle:before font-family:adelle-1,adelle-2;font-weight:100;top:10px!important;.pullquote-helvetica:before font-family:Helvetica Neue,Arial,sans-serif;font-weight:bold;top:7px!important;.pullquote-facit:before font-family:facitweb-1,facitweb-2,Helvetica,Arial,sans-serif;font-weight:bold;top:7px!important;14. CSS3的全屏背景效果如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。1234567html background:url