欢迎来到淘文阁 - 分享文档赚钱的网站! | 帮助中心 好文档才是您的得力助手!
淘文阁 - 分享文档赚钱的网站
全部分类
  • 研究报告>
  • 管理文献>
  • 标准材料>
  • 技术资料>
  • 教育专区>
  • 应用文书>
  • 生活休闲>
  • 考试试题>
  • pptx模板>
  • 工商注册>
  • 期刊短文>
  • 图片设计>
  • ImageVerifierCode 换一换

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

    • 资源ID:60091831       资源大小:110.50KB        全文页数:11页
    • 资源格式: DOC        下载积分:20金币
    快捷下载 游客一键下载
    会员登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录   QQ登录  
    二维码
    微信扫一扫登录
    下载资源需要20金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

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

    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代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。1. CSS Resets网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyers reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。css view 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, 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;   2.经典的CSS Clearfix这个clearfix代码已在Web开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。css view plaincopy1. .clearfix:after  content: "." display: block; clear: both; visibility: hidden; line-height: 0; height: 0;   2. .clearfix  display: inline-block;   3.  <font></font>    4. htmlxmlns .clearfix  display: block;   5. * html .clearfix  height: 1%;     3.升级版的Clearfix在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。css view plaincopy1. .clearfix:before, .container:after  content: "" display: table; <font></font>    2. .clearfix:after  clear: both;   3. /* IE 6/7 */  4. .clearfix  zoom: 1;     4. Cross-Browser Transparency CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。css view plaincopy1. .transparent   2.     filter: alpha(opacity=50); /* internet explorer */  3.     -khtml-opacity: 0.5;      /* khtml, old safari */  4.     -moz-opacity: 0.5;       /* mozilla, netscape */  5.     opacity: 0.5;           /* fx, safari, opera */  6.     源码地址: 5. CSS Blockquote模板这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。 css view plaincopy1. 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   9.     color: #ccc;  10.     content: open-quote;    11.     font-size: 4em;  12.     line-height: .1em;  13.     margin-right: .25em;   14.     vertical-align: -.4em;  15.    16. blockquote p   17.     display: inline;  18.     查看源码: http:/css-6. 个性化的圆角代码许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!css view plaincopy1. #container   2.     -webkit-border-radius: 4px 3px 6px 10px;  3.     -moz-border-radius: 4px 3px 6px 10px;  4.     -o-border-radius: 4px 3px 6px 10px;    5.     border-radius: 4px 3px 6px 10px;  6.   7. /* alternative syntax broken into each line */  8. #container   9.     -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;  14.     -moz-border-radius-topright: 3px;  15.     -moz-border-radius-bottomright: 6px;  16.     -moz-border-radius-bottomleft: 10px;  17.     7. 一般媒体查询这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。css view plaincopy1. /* Smartphones (portrait and landscape) - */  2. media only screen    3. and (min-device-width : 320px) and (max-device-width : 480px)     4.   /* Styles */   5.     6. /* Smartphones (landscape) - */  7. media only screen and (min-width : 321px)   8.   /* Styles */  9.     10. /* Smartphones (portrait) - */  11. media only screen and (max-width : 320px)   12.   /* Styles */    13.    14. /* iPads (portrait and landscape) - */  15. media only screen and (min-device-width : 768px) and (max-device-width : 1024px)   16.   /* Styles */    17.    18. <font></font>    19. /* iPads (landscape) - */  20. media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)   21.   /* Styles */  22.    23. /* iPads (portrait) - */  24. media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)    25.   /* Styles */  26.      27. /* Desktops and laptops - */  28. media only screen and (min-width : 1224px)   29.   /* Styles */  30.   31. /* Large screens - */  32. media only screen and (min-width : 1824px)   33.   /* Styles */  34.    35. /* iPhone 4 - */  36. media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5)   37.   /* Styles */  38.     源码地址: http:/css-8. 现代字体栈在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks。css view plaincopy1. /* Times New Roman-based serif */    2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;    3.     4. /* A modern Georgia-based serif */    5. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;    6.     7. /*A more traditional Garamond-based serif */    8. 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 Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;    9.     10. /*The Helvetica/Arial-based sans serif */    11. 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, Arial, sans-serif;    12.     13. /*The Verdana-based sans serif */    14. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;    15.     16. /*The Trebuchet-based sans serif */    17. font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;    18.     19. /*The heavier “Impact” sans serif */    20. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;    21.     22. /*The monospace */    23. font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "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 。css view plaincopy1. :selection  background: #e2eae2;   2. :-moz-selection  background: #e2eae2;   3. :-webkit-selection  background: #e2eae2;     10.隐藏Logo上的H1文本css view plaincopy1. h1   2.     text-indent: -9999px;    3.     margin: 0 auto;  4.     width: 320px;  5.     height: 85px;  6.     background: transparent url("images/logo.png") no-repeat scroll;   7.     11. 为图片创建拍立得效果边框运用下面代码可以在图片上实现拍立得相片效果一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。css view plaincopy1. img.polaroid    2.     background:#000; /*Change this to a background image or remove*/   3.     border:solid #fff;  4.     border-width:6px 6px 20px 6px;  5.     box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth *  6.     -webkit-box-shadow:1px 1px 5px #333; 7.     -moz-box-shadow:1px 1px 5px #333;  8.     height:200px; /*Set to height of your image or desired div*/  9.     width:200px; /*Set to width of your image or desired div*/   10.     源码地址: 12. 锚链接伪类选择器css view plaincopy1. a:link  color: blue;   2. a:visited  color: purple;    3. a:hover  color: red;    4. a:active  color: yellow;     源码地址: 13. 花俏地CSS3 Pull-QuotesPull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。css view plaincopy1. .has-pullquote:before    2.     /* Reset metrics. */  3.     padding: 0;  4.     border: none;    5.     /* Content */  6.     content: attr(data-pullquote);  7.     /* Pull out to the right, modular scale based margins. */    8.     float: rightright;  9.     width: 320px;  10.     margin: 12px -140px 24px 36px;  11.     /* Baseline correction */  12.     position: relative;  13.     top: 5px;   14.     /* Typography (30px line-height equals 25% incremental leading) */   15.     font-size: 23px;  16.     line-height: 30px;   17.    18. .pullquote-adelle:before   19.     font-family: "adelle-1", "adelle-2"  20.     font-weight: 100;  21.     top: 10px !important;  22.    23.   24. .pullquote-helvetica:before   25.     font-family: "Helvetica Neue", Arial, sans-serif;  26.     font-weight: bold;  27.     top: 7px !important;  28.   29. .pullquote-facit:before    30.     font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;  31.     font-weight: bold;  32.     top: 7px !important;  33.     源码地址: 14. CSS3的全屏背景效果如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。css view plaincopy1. html    2.     background: url('images/bg.jpg') no-repeat center center fixed;    3.     -webkit-background-size: cover;   4.     -moz-background-size: cover;  5.     -o-background-size: cover;  6.     background-size: cover;  7.     源码: http:/css-15. 内容垂直集中相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。css view plaincopy1. .container   2.     min-height: 6.5em;  3.     display: table-cell;   4.     vertical-align: middle;  5.     源码地址: http:/www.w3.org/Style/Examples/007/center16. 垂直滚动条这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。 css view plaincopy1. html  height: 101%     17. CSS3 Gradients模板css view plaincopy1. #colorbox   2.     background: #;  3.     background-image: -webkit-gradient(linear, left top, left bottombottom, 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.     background-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。css view plaincopy1. font-face   2.     font-family: 'MyWebFont'   3.     src: url('webfont.eot'); /* IE9 Compat Modes */   4.     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  5.     url('webfont.woff') format('woff'), /* Modern Browsers */  6.     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */   7.     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */  8.   9. body   10.     font-family: 'MyWebFont', Arial, sans-serif;  11.     源码地址: http:/css-19.创建缝合效果css view plaincopy1. p    2.     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: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  11.     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  12.     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);  13.     -webkit-border-radius: 3px;  14.     -moz-border-radius: 3px;  15.     border-radius: 3px;  16.   17. p:before   18.     content: ""  19.     position: absolute;  20.     z-index: -1;  21.     top: 3px;  22.     bottombottom: 3px;  23.     left :3px;  24.     rightright: 3px;  25.     border: 2px dashed #fff;  26.       27. p a   28.     color: #fff;  29.     text-decoration:none;  30.   31. p a:hover, p a:focus, p a:active    32.     text-decoration:underline;  33.     20. CSS3 斑马线效果当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。css view plaincopy1. tbody tr:nth-child(odd)   2.     background-color: #ccc;  3.     源码地址: http:/css-

    注意事项

    本文(Web开发者不容错过的20段CSS代码.doc)为本站会员(飞****2)主动上传,淘文阁 - 分享文档赚钱的网站仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知淘文阁 - 分享文档赚钱的网站(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于淘文阁 - 版权申诉 - 用户使用规则 - 积分规则 - 联系我们

    本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

    工信部备案号:黑ICP备15003705号 © 2020-2023 www.taowenge.com 淘文阁 

    收起
    展开