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

《Web开发者不容错过的20段CSS代码.doc》由会员分享，可在线阅读，更多相关《Web开发者不容错过的20段CSS代码.doc（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web开发者不容错过的20段CSS代码发表于2013-05-24 17:50|30941次阅读| 来源CSDN|184条评论| 作者张红月CSSHTML前端开发摘要：共享已成为互联网的一种主流，尤其是分享一些非常实用的技术，本文收集了20段非常专业的CSS 2/CSS 3代码片段给大家，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你

2、可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。1. CSS Resets网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyers reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。cssview plaincopy1. 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,i

3、mg,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,video2. margin:0;3.

4、 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. htmlheight:101%;14. bodyfont-size:62.5%;line-height:1;font-family:Arial,Tahoma,sans-serif;15. 16. arti

5、cle,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,sectiondisplay:block;17. ol,ullist-style:none;18. 19. blockquote,qquotes:none;20. blockquote:before,blockquote:after,q:before,q:aftercontent:;content:none;21. strongfont-weight:bold;22. 23. tableborder-collapse:collapse;border-spacing

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

7、splay:inline-block;3. 4. htmlxmlns.clearfixdisplay:block;5. *html.clearfixheight:1%;3.升级版的Clearfix在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。cssview plaincopy1. .clearfix:before,.container:aftercontent:;display:table;2. .clearfix:afterclear:both;3. /*IE6/7*/4. .clearfixzoom:1;4. C

8、ross-Browser TransparencyCSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。cssview plaincopy1. .transparent2. filter:alpha(opacity=50);/*internetexplorer*/3. -khtml-opacity:0.5;/*khtml,oldsafari*/4. -moz-opacity:0.5;/*mozilla,netscape*/5. opacity:0.5;/*fx,safari,opera*/6. 源码地址：5.

9、 CSS Blockquote模板这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。cssview plaincopy1. blockquote2. background:#f9f9f9;3. border-left:10pxsolid#ccc;4. margin:1.5em10px;5. padding:.5em10px;6. quotes:201C201D20182019;7. 8. blockquote:before9. color:#ccc;10. content:open-quote;11. font-size:4em;12. line-height:.1e

10、m;13. margin-right:.25em;14. vertical-align:-.4em;15. 16. blockquotep17. display:inline;18. 查看源码：http:/css-6. 个性化的圆角代码许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！cssview plaincopy1. #container2. -webkit-border-radius:4px3px6px10px;3. -moz-border-radius:4px3px6px10px;4. -o-border-radius:4px3px6px10px

11、;5. border-radius:4px3px6px10px;6. 7. /*alternativesyntaxbrokenintoeachline*/8. #container9. -webkit-border-top-left-radius:4px;10. -webkit-border-top-rightright-radius:3px;11. -webkit-border-bottom-rightright-radius:6px;12. -webkit-border-bottom-left-radius:10px;13. -moz-border-radius-topleft:4px;1

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

13、-width:320px)and(max-device-width:480px)4. /*Styles*/5. 6. /*Smartphones(landscape)-*/7. mediaonlyscreenand(min-width:321px)8. /*Styles*/9. 10. /*Smartphones(portrait)-*/11. mediaonlyscreenand(max-width:320px)12. /*Styles*/13. 14. /*iPads(portraitandlandscape)-*/15. mediaonlyscreenand(min-device-wid

14、th:768px)and(max-device-width:1024px)16. /*Styles*/17. 18. 19. /*iPads(landscape)-*/20. mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape)21. /*Styles*/22. 23. /*iPads(portrait)-*/24. mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)

15、and(orientation:portrait)25. /*Styles*/26. 27. /*Desktopsandlaptops-*/28. mediaonlyscreenand(min-width:1224px)29. /*Styles*/30. 31. /*Largescreens-*/32. mediaonlyscreenand(min-width:1824px)33. /*Styles*/34. 35. /*iPhone4-*/36. mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-

16、device-pixel-ratio:1.5)37. /*Styles*/38. 源码地址：http:/css-8. 现代字体栈在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSS Font Stacks。cssview plaincopy1. /*TimesNewRoman-basedserif*/2. font-family:Cambria,HoeflerText,Utopia,LiberationSerif,NimbusRomanNo9LRegular,Times,TimesNewRoman,serif;3.

17、4. /*AmodernGeorgia-basedserif*/5. font-family:Constantia,LucidaBright,Lucidabright,LucidaSerif,Lucida,DejaVuSerif,BitstreamVeraSerif,LiberationSerif,Georgia,serif;6. 7. /*AmoretraditionalGaramond-basedserif*/8. font-family:PalatinoLinotype,Palatino,Palladio,URWPalladioL,BookAntiqua,Baskerville,Book

18、manOldStyle,BitstreamCharter,NimbusRomanNo9L,Garamond,AppleGaramond,ITCGaramondNarrow,NewCenturySchoolbook,CenturySchoolbook,CenturySchoolbookL,Georgia,serif;9. 10. /*TheHelvetica/Arial-basedsansserif*/11. font-family:Frutiger,FrutigerLinotype,Univers,Calibri,GillSans,GillSansMT,MyriadPro,Myriad,Dej

19、aVuSansCondensed,LiberationSans,NimbusSansL,Tahoma,Geneva,HelveticaNeue,Helvetica,Arial,sans-serif;12. 13. /*TheVerdana-basedsansserif*/14. font-family:Corbel,LucidaGrande,LucidaSansUnicode,LucidaSans,DejaVuSans,BitstreamVeraSans,LiberationSans,Verdana,VerdanaRef,sans-serif;15. 16. /*TheTrebuchet-ba

20、sedsansserif*/17. font-family:SegoeUI,Candara,BitstreamVeraSans,DejaVuSans,BitstreamVeraSans,TrebuchetMS,Verdana,VerdanaRef,sans-serif;18. 19. /*Theheavier“Impact”sansserif*/20. font-family:Impact,Haettenschweiler,FranklinGothicBold,Charcoal,HelveticaInserat,BitstreamVeraSansBold,ArialBlack,sans-ser

21、if;21. 22. /*Themonospace*/23. font-family:Consolas,AndaleMonoWT,AndaleMono,LucidaConsole,LucidaSansTypewriter,DejaVuSansMono,BitstreamVeraSansMono,LiberationMono,NimbusMonoL,Monaco,CourierNew,Courier,monospace;源码地址：9. 自定义文本选择一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型

22、的Webkit和Mozilla供应商前缀:selection 。cssview plaincopy1. :selectionbackground:#e2eae2;2. :-moz-selectionbackground:#e2eae2;3. :-webkit-selectionbackground:#e2eae2;10.隐藏Logo上的H1文本cssview plaincopy1. h12. text-indent:-9999px;3. margin:0auto;4. width:320px;5. height:85px;6. background:transparenturl(images/

23、logo.png)no-repeatscroll;7. 11. 为图片创建拍立得效果边框运用下面代码可以在图片上实现拍立得相片效果一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。cssview plaincopy1. img.polaroid2. background:#000;/*Changethistoabackgroundimageorremove*/3. border:solid#fff;4. border-width:6px6px20px6px;5. box-shadow:1px1px5px#333;/*Standardblurat5px.Increa

24、seformoredepth*6. -webkit-box-shadow:1px1px5px#333;7. -moz-box-shadow:1px1px5px#333;8. height:200px;/*Settoheightofyourimageordesireddiv*/9. width:200px;/*Settowidthofyourimageordesireddiv*/10. 源码地址：12. 锚链接伪类选择器cssview plaincopy1. a:linkcolor:blue;2. a:visitedcolor:purple;3. a:hovercolor:red;4. a:ac

25、tivecolor:yellow;源码地址：13. 花俏地CSS3 Pull-QuotesPull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。cssview plaincopy1. .has-pullquote:before2. /*Resetmetrics.*/3. padding:0;4. border:none;5. /*Content*/6. content:attr(data-pullquote);7. /*Pullouttotheright,modularscalebasedmargins.*/8. float:rightright;9. wid

26、th:320px;10. margin:12px-140px24px36px;11. /*Baselinecorrection*/12. position:relative;13. top:5px;14. /*Typography(30pxline-heightequals25%incrementalleading)*/15. font-size:23px;16. line-height:30px;17. 18. .pullquote-adelle:before19. font-family:adelle-1,adelle-2;20. font-weight:100;21. top:10px!

27、important;22. 23. 24. .pullquote-helvetica:before25. font-family:HelveticaNeue,Arial,sans-serif;26. font-weight:bold;27. top:7px!important;28. 29. .pullquote-facit:before30. font-family:facitweb-1,facitweb-2,Helvetica,Arial,sans-serif;31. font-weight:bold;32. top:7px!important;33. 源码地址：14. CSS3的全屏背景

28、效果如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。cssview plaincopy1. html2. background:url(images/bg.jpg)no-repeatcentercenterfixed;3. -webkit-background-size:cover;4. -moz-background-size:cover;5. -o-background-size:cover;6. background-size:cover;7. 源码：http:/css-15. 内容垂直集中相对于内容在水平位置，内容在垂

29、直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。cssview plaincopy1. .container2. min-height:6.5em;3. display:table-cell;4. vertical-align:middle;5. 源码地址：http:/www.w3.org/Style/Examples/007/center16. 垂直滚动条这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。cssview plaincopy1. htmlheight:101%17. CSS3 Gradients模板cssview plainc

30、opy1. #colorbox2. background:#;3. background-image:-webkit-gradient(linear,lefttop,leftbottombottom,from(#83b842),to(#);4. background-image:-webkit-linear-gradient(top,#83b842,#);5. background-image:-moz-linear-gradient(top,#83b842,#);6. background-image:-ms-linear-gradient(top,#83b842,#);7. backgro

31、und-image:-o-linear-gradient(top,#83b842,#);8. background-image:linear-gradient(top,#83b842,#);9. 18. Font-Face模板使用font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站，并生成自定义font families。cssview plaincopy1. font-face2. font-family:MyWebFont;3. src:url(webfont.eot);/*IE9CompatModes*/4. src:url(webfont.eot?#iefix)for

32、mat(embedded-opentype),/*IE6-IE8*/5. url(webfont.woff)format(woff),/*ModernBrowsers*/6. url(webfont.ttf)format(truetype),/*Safari,Android,iOS*/7. url(webfont.svg#svgFontName)format(svg);/*LegacyiOS*/8. 9. body10. font-family:MyWebFont,Arial,sans-serif;11. 源码地址：http:/css-19.创建缝合效果cssview plaincopy1.

33、p2. position:relative;3. z-index:1;4. padding:10px;5. margin:10px;6. font-size:21px;7. line-height:1.3em;8. color:#fff;9. background:#ff0030;10. -webkit-box-shadow:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);11. -moz-box-shadow:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);12. box-shadow:0004px#ff0030,2

34、px1px6px4pxrgba(10,10,0,.5);13. -webkit-border-radius:3px;14. -moz-border-radius:3px;15. border-radius:3px;16. 17. p:before18. content:;19. position:absolute;20. z-index:-1;21. top:3px;22. bottombottom:3px;23. left:3px;24. rightright:3px;25. border:2pxdashed#fff;26. 27. pa28. color:#fff;29. text-decoration:none;30. 31. pa:hover,pa:focus,pa:active32. text-decoration:underline;33. 20. CSS3 斑马线效果当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。cssview plaincopy1. tbodytr:nth-child(odd)2. background-color:#ccc;3. 源码地址：http:/css-