教学之友,学习之友。

站长教学网

当前位置: 站长教学网 > 前端开发 > CSS教程 >

你应该知道的30个实用CSS代码

时间:2012-03-25 20:25来源:未知 作者:ken 点击:

CSS是大家在web开发中常用的语言,但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。

幸运的是,网络上大家可以找到很多不错的CSS代码片断,能够有效地帮助大家解决一般性的或者设计问题。这里我们收集了30个CSS的代码片断帮助大家调试。希望大家喜欢!

代码

1. Chris Poteet’s CSS浏览器重置代码

这个代码能够有效地帮助大家解决跨浏览器问题。虽然不支持IE6,但是对于这种美国占有率低于1%的浏览器,大家大可以放弃。

  1. /*  
  2.  
  3. Reset Default Browser Styles  
  4. - Place first in the listing of external style sheets for cascading.  
  5. - Be sure to explicitly set margin/padding styles.  
  6. - Styles are not reset that have to do with display (block, inline) are not reset.  
  7.  
  8. By: Chris Poteet & various influences  
  9.  
  10. */ 
  11.  
  12. * {  
  13. vertical-alignbaseline;  
  14. font-family: inherit;  
  15. font-style: inherit;  
  16. font-size100%;  
  17. bordernone;  
  18. padding0;  
  19. margin0;  
  20. }  
  21. body {  
  22. padding5px;  
  23. }  
  24. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {  
  25. margin20px 0;  
  26. }  
  27. li, dd, blockquote {  
  28. margin-left40px;  
  29. }  
  30. dt {  
  31. font-weightbold;  
  32. }  
  33. table {  
  34. border-collapsecollapse;  
  35. border-spacing0;  

2. Eric Meyer’s CSS Reset

Eric的CSS代码片断可能是最受欢迎的代码之一。甚至支持Blueprint CSS Framework.

  1. /* http://meyerweb.com/eric/tools/css/reset/  
  2.    v2.0 | 20110126  
  3.    License: none (public domain)  
  4. */ 
  5.  
  6. html, body, div, span, applet, object, iframe,  
  7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  8. a, abbr, acronym, address, big, cite, code,  
  9. del, dfn, em, img, ins, kbd, q, s, samp,  
  10. small, strike, strong, sub, sup, tt, var,  
  11. b, u, i, center,  
  12. dl, dt, dd, ol, ul, li,  
  13. fieldset, form, label, legend,  
  14. table, caption, tbody, tfoot, thead, tr, th, td,  
  15. article, aside, canvas, details, embed,  
  16. figure, figcaption, footer, header, hgroup,  
  17. menu, nav, output, ruby, section, summary,  
  18. time, mark, audio, video {  
  19.     margin0;  
  20.     padding0;  
  21.     border0;  
  22.     font-size100%;  
  23.     font: inherit;  
  24.     vertical-alignbaseline;  
  25. }  
  26. /* HTML5 display-role reset for older browsers */ 
  27. article, aside, details, figcaption, figure,  
  28. footer, header, hgroup, menu, nav, section {  
  29.     displayblock;  
  30. }  
  31. body {  
  32.     line-height1;  
  33. }  
  34. ol, ul {  
  35.     list-stylenone;  
  36. }  
  37. blockquote, q {  
  38.     quotesnone;  
  39. }  
  40. blockquote:before, blockquote:after,  
  41. q:before, q:after {  
  42.     content'';  
  43.     contentnone;  
  44. }  
  45. table {  
  46.     border-collapsecollapse;  
  47.     border-spacing0;  

3. How to Create Multiple Borders in CSS3

非常酷的方式创建box阴影,允许你创建多个边框

  1. box-shadow:  
  2.     0 0 0 2px #000,  
  3.     0 0 0 3px #999,  
  4.     0 0 0 9px #fa0,  
  5.     0 0 0 10px #666,  
  6.     0 0 0 16px #fd0,  
  7.     0 0 0 18px #000;  

(责任编辑:ken)

TAG标签:
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
注册登录:不允许匿名留言,登录后留言无需输入验证码。
栏目列表
最新内容