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

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

2、sets网络上关于CSS重置的代码非常多。本段代码是根据EricMeyer s 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

3、, strong,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 summary, time, mark, audio, v

4、ideo 0margin: 0;1 padding: 0;2 border: 0;3 font-size:100%;4 font: inherit;1vertical-align:baseline;3 outline:none;1-webkit-box-sizing: border-box;4-moz-box-sizing: border-box;1box-sizing: border-box;5 1 html height: 101%; 6 body1 font-size:62.5%; line-height:1; font-fami7ly:Arial, Tahoma, sans-serif

5、; 18 article, aside, details, figcaption, figure, footer,1 header, hgroup, menu, nav, section9 display:block; 2ol, ul list-style:none; 02blockquote, q quotes: none; 1 blockquote:before, blockquote:after, q:before,2q:after content: '' content: none; 2 strong font-weight:bold; 23 table4 ; 2img

6、 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; height:20; 3.clearfix disp

7、lay: inline-block; 4<font></font>5htmlxmlns .clearfix display: block; * html .clearfix height: 1%; 3. 升级版的 Clearfix在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有 floats ， 但它们只兼容现代浏览器和传统的IE 6-8 。.clearfix:before, .container:after1 content: "" display: table; <font></font>2.clearf

8、ix:after clear: both; 3/* IE 6/7 */4.clearfix zoom:1; 4. Cross-Browser TransparencyCSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity ，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的 IE 浏览器。1 .transparent filter: alpha(opacity=50);/* internet34explorer */-khtml-opacity:0.5;/* khtml,5old safari */6-moz-opacity:0.5;/* mozilla,netscape

9、 */opacity:0.5;/* fx,safari, opera */5. CSS Blockquote 模板这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。1 blockquote 2 background: #f9f9f9;<3 border-left:10px solid #ccc;4 margin:1.5em 10px;5 padding: .5em 10px;6 quotes:"201C""201D""2018""2019"7 8 blockquote:before

10、9 color: #ccc;10 content: open-quote;11 font-size:4em;12 line-height: .1em;13 margin-right: .25em;14 vertical-align: -.4em;1516blockquote p 17 display:inline;186. 个性化的圆角代码许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！1 #container 10p2 -webkit-border-radius:4px 3px 6px3 x;-moz-border-radius:4px 3px 6px

11、 10px;-o-border-radius:border-radius:4px 3px 6px 10px;4px 3px 6px 10px;/* alternative syntax broken into each 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

12、:-moz-border-radius-topright:-moz-border-radius-bottomright:-moz-border-radius-bottomleft:4px;3px10px;4px;3px;6px;10px;5678910111213141516177. 一般媒体查询这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用 min-device-pixel-ratio 引用到视网膜设备上。1 /* Smartphones (portrait and landscape) 2 */3 media only screen4 a

13、nd (min-device-width :320px) and5 (max-device-width :480px) 6 /* Styles */7 8 /* Smartphones (landscape) */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)17med

14、ia only screen and18(min-device-width :768px) and19(max-device-width :1024px) 20/* Styles */2122<font></font>23/* iPads (landscape) */24media only screen and25(min-device-width :768px) and26(max-device-width :1024px) and27(orientation :landscape) 28/* Styles */2930/* iPads (portrait) */3

15、1media only screen and32(min-device-width :768px) and33(max-device-width :1024px) and34(orientation :portrait) 35/* Styles */361224px) 37/* Desktops and laptops */38media only screen and (min-width :/* Styles */* Large screens */media only screen and (min-width :1824px) /* Styles */* iPhone 4 */medi

16、a 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 /* Times New Roman-based serif */2 font-family: Cambria, "Hoefler Text",4 Regular",

17、Times,3 Utopia, "Liberation Serif", "Nimbus Roman No9 L"Times New Roman", serif;6 /* A modern Georgia-based serif */7 font-family: Constantia,"Lucida Bright",8 Lucidabright, "Lucida Serif", Lucida,"DejaVu9 Serif," "Bitstream Vera Serif"

18、;, "Liberation10Serif", Georgia, serif;11 12/*A more traditional Garamond-based serif */13font-family:"Palatino Linotype", Palatino,14Palladio, "URW Palladio L", "Book Antiqua",15Baskerville, "Bookman Old Style", "Bitstream16Charter", "

19、;Nimbus Roman No9 L", Garamond, "Apple 17Garamond", "ITC Garamond Narrow", "New Century 18Schoolbook", "Century Schoolbook", "Century 19Schoolbook L", Georgia, serif;20 21/*The Helvetica/Arial-based sans serif */22font-family: Frutiger,"Fru

20、tiger Linotype",23Univers, Calibri, "Gill Sans", "Gill SansMT", "Myriad Pro", Myriad, "DejaVu SansCondensed", "Liberation Sans","Nimbus SansL", Tahoma, Geneva,"HelveticaNeue", Helvetica, Arial, sans-serif;/*The Verdana-based

21、sans serif */font-family: Corbel, "Lucida Grande", "LucidaSans Unicode", "Lucida Sans","DejaVuSans", "Bitstream Vera Sans","LiberationSans", Verdana, "Verdana Ref", sans-serif;/*The Trebuchet-based sans serif */font-family:"S

22、egoe UI", Candara, "Bitstream VeraSans","DejaVu Sans","Bitstream VeraSans","Trebuchet MS",Verdana, "VerdanaRef", sans-serif;/*The heavier “Impact ” sans serif */font-family: Impact, Haettenschweiler,"FranklinGothic Bold", Charcoal, &qu

23、ot;HelveticaInserat", "Bitstream Vera Sans Bold","ArialBlack", sans-serif;"Andale Mono WT", "Andale/*The monospace */font-family: Consolas,Mono", "Lucida Console", "Lucida SansTypewriter", "DejaVu Sans Mono", "Bitstream

24、Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;9. 自定义文本选择一些新的 Web»U览器允许你在网页上自定义一些突生显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的 Webkit和 Mozilla 供应商前缀:selection 。1:selection background: #e2eae2; 2:-moz-sele

25、ction background: #e2eae2; 3:-webkit-selection background: #e2eae2; 10. 隐藏 Logo 上的 H1 文本h1 1 text-indent:-9999px;2 margin: 0 auto;3 width:320px;4 height:85px;5 background:transparent url("images/logo.6 png") no-repeat scroll;711. 为图片创建拍立得效果边框运用下面代码可以在图片上实现拍立得相片效果一大片白色边框和细微的阴影。你需要修改图片的宽度/ 高

26、度值来与你的网站布局相匹配。1 img.polaroid 2 background:#000;/*Change this to a3 background image or remove*/4 border:solid #fff;5 border-width:6px 6px 20px 6px;6 box-shadow:1px 1px 5px #333;/* Standard7 blur at 5px. Increase for more depth *8 -webkit-box-shadow:1px 1px 5px #333;9 -moz-box-shadow:1px 1px 5px #333

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

28、.has-pullquote:before /* Reset metrics. */3 padding: 0;4 border: none;5 /* Content */based6 content: attr(data-pullquote);7 /* Pull out to the right, modular scale8 margins. */9 float: rightright;1width: 320px;0margin: 12px -140px 24px 36px;1 /* Baseline correction */2 position:relative;3 top: 5px;4

29、 /* Typography (30px line-height equals 25%1 incremental leading) */3font-size:23px;1line-height:30px;4 1 .pullquote-adelle:before 5font-family:"adelle-1","adelle-2"1font-weight:100;6top: 10px !important;181 .pullquote-helvetica:before 8font-family:"Helvetica1 Neue", Ar

30、ial, sans-serif;9font-weight:bold;2top: 7px !important;0 "facitweb-2",2.pullquote-facit:before 1 font-family:"facitweb-1",2 Helvetica, Arial, sans-serif;3 font-weight:bold;4 top: 7px !important;5 2 4252627293031323314. CSS3 的全屏背景效果如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在

31、旧的浏览器上工作。1html 2background: url('images/bg.jpg') no-repea3t center center fixed;4 -webkit-background-size: cover;5 -moz-background-size: cover;6 -o-background-size: cover;background-size: cover;15. 内容垂直集中相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS弋码可以很好的工作。1 .container 2 min-height:6.5em;

32、3 display: table-cell;4 vertical-align:middle;516. 垂直滚动条这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。1html height: 101% 17. CSS3 Gradients 模板#colorbox background: #629721;background-image:-webkit-gradient(linear,left top, left bottomb1ottom, from(#83b842), to(#629721);2background-image:#83b842,#629721);3-webki

33、t-linear-gradient(top, 4background-image:5-moz-linear-gradient(top, 6#83b842,#629721);background-image:7-ms-linear-gradient(top,8#83b842,#629721);background-image:9-o-linear-gradient(top,#83b842,#629721);background-image:linear-gradient(top,#83b842,#629721);18. Font-Face 模板使用font-face可以把TTF/OTF/SVG/WOF文件嵌入到网站，并生成自定义font families 。font-face font-family:'MyWebFont'1 src:url('webfont.eot');/* IE9 Compat2 Modes */3 src:url('webfont.eot?#iefix')format('e4 mbedded-opentype'),/*