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

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

成都创新互联公司成立与2013年，先为珠晖等服务建站，珠晖等地企业，进行企业商务咨询服务。为珠晖企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

代码

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

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

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

2. Eric Meyer’s CSS Reset

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

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

3. How to Create Multiple Borders in CSS3

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

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

4. Tucked Corners

CSS代码允许你创建类似非常酷的Gravatar首页效果

 
 
 
    
  
  
  
  1. div.tucked-corners { 
    2. 
  
  
  
  2.         background: #f6f6f6; 
    3. 
  
  
  
  3.         height: 380px; 
    4. 
  
  
  
  4.         margin: 50px auto; 
    5. 
  
  
  
  5.         padding: 10px; 
    6. 
  
  
  
  6.         position: relative; 
    7. 
  
  
  
  7.         width: 580px; 
    8. 
  
  
  
  8.         -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); 
    9. 
  
  
  
  9.            -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); 
    10. 
  
  
  
  10.                 box-shadow: 0 1px 7px hsla(0,0%,0%,.2); 
    11. 
  
  
  
  11.     } 
    12. 
  
  
  
  12.     span.tucked-corners { 
    13. 
  
  
  
  13.         background: #c4453c; 
    14. 
  
  
  
  14.         display: block; 
    15. 
  
  
  
  15.         height: 380px; 
    16. 
  
  
  
  16.         position: relative; 
    17. 
  
  
  
  17.         width: 580px; 
    18. 
  
  
  
  18.         -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); 
    19. 
  
  
  
  19.            -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); 
    20. 
  
  
  
  20.                 box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); 
    21. 
  
  
  
  21.     } 
    22. 
  
  
  
  22. 
  
  
  
  23.     /* Top Corner Effect */
    24. 
  
  
  
  24. 
  
  
  
  25.     .top-corners:after, 
    26. 
  
  
  
  26.     .top-corners:before { 
    27. 
  
  
  
  27.         background: #e6e6e6; 
    28. 
  
  
  
  28.         content: ''; 
    29. 
  
  
  
  29.         height: 50px; 
    30. 
  
  
  
  30.         position: absolute; 
    31. 
  
  
  
  31.         top: -25px; 
    32. 
  
  
  
  32.         width: 100px; 
    33. 
  
  
  
  33.         z-index: 10; 
    34. 
  
  
  
  34.         -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
    35. 
  
  
  
  35.            -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
    36. 
  
  
  
  36.                 box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
    37. 
  
  
  
  37.     } 
    38. 
  
  
  
  38.     .top-corners:after { 
    39. 
  
  
  
  39.         left: -50px; 
    40. 
  
  
  
  40.         -webkit-transform: rotate(-45deg); 
    41. 
  
  
  
  41.            -moz-transform: rotate(-45deg); 
    42. 
  
  
  
  42.             -ms-transform: rotate(-45deg); 
    43. 
  
  
  
  43.              -o-transform: rotate(-45deg); 
    44. 
  
  
  
  44.                 transform: rotate(-45deg); 
    45. 
  
  
  
  45.     } 
    46. 
  
  
  
  46.     .top-corners:before { 
    47. 
  
  
  
  47.         right: -50px; 
    48. 
  
  
  
  48.         -webkit-transform: rotate(45deg); 
    49. 
  
  
  
  49.            -moz-transform: rotate(45deg); 
    50. 
  
  
  
  50.             -ms-transform: rotate(45deg); 
    51. 
  
  
  
  51.              -o-transform: rotate(45deg); 
    52. 
  
  
  
  52.                 transform: rotate(45deg); 
    53. 
  
  
  
  53.     } 
    54. 
  
  
  
  54. 
  
  
  
  55.     /* Bottom Corner Effect */
    56. 
  
  
  
  56. 
  
  
  
  57.     .bottom-corners:after, 
    58. 
  
  
  
  58.     .bottom-corners:before { 
    59. 
  
  
  
  59.         background: #e6e6e6; 
    60. 
  
  
  
  60.         content: ''; 
    61. 
  
  
  
  61.         height: 50px; 
    62. 
  
  
  
  62.         position: absolute; 
    63. 
  
  
  
  63.         bottom: -25px; 
    64. 
  
  
  
  64.         width: 100px; 
    65. 
  
  
  
  65.         -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
    66. 
  
  
  
  66.            -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
    67. 
  
  
  
  67.                 box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
    68. 
  
  
  
  68.     } 
    69. 
  
  
  
  69.     .bottom-corners:after { 
    70. 
  
  
  
  70.         left: -50px; 
    71. 
  
  
  
  71.         -webkit-transform: rotate(-135deg); 
    72. 
  
  
  
  72.            -moz-transform: rotate(-135deg); 
    73. 
  
  
  
  73.             -ms-transform: rotate(-135deg); 
    74. 
  
  
  
  74.              -o-transform: rotate(-135deg); 
    75. 
  
  
  
  75.                 transform: rotate(-135deg); 
    76. 
  
  
  
  76.     } 
    77. 
  
  
  
  77.     .bottom-corners:before { 
    78. 
  
  
  
  78.         right: -50px; 
    79. 
  
  
  
  79.         -webkit-transform: rotate(135deg); 
    80. 
  
  
  
  80.            -moz-transform: rotate(135deg); 
    81. 
  
  
  
  81.             -ms-transform: rotate(135deg); 
    82. 
  
  
  
  82.              -o-transform: rotate(135deg); 
    83. 
  
  
  
  83.                 transform: rotate(135deg); 
    84. 
  
  
  
  84.     }
    85.

5. iPad-Specific CSS

修改一般的ipad屏幕布局

 
 
 
    
  
  
  
  1. @media only screen and (device-width: 768px) { 
    2. 
  
  
  
  2.   /* For general iPad layouts */
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. 
  
  
  
  5. @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
    6. 
  
  
  
  6.   /* For portrait layouts only */
    7. 
  
  
  
  7. } 
    8. 
  
  
  
  8. 
  
  
  
  9. @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
    10. 
  
  
  
  10.   /* For landscape layouts only */
    11. 
  
  
  
  11. }
    12.

6. Style links depending on file format

修改外部链接，email链接，pdf链接的样式

 
 
 
    
  
  
  
  1. /* external links */
    2. 
  
  
  
  2. a[href^="http://"]{ 
    3. 
  
  
  
  3.     padding-right: 20px; 
    4. 
  
  
  
  4.     background: url(external.gif) no-repeat center right; 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6. 
  
  
  
  7. /* emails */
    8. 
  
  
  
  8. 
  
  
  
  9. a[href^="mailto:"]{ 
    10. 
  
  
  
  10. padding-right: 20px; 
    11. 
  
  
  
  11. 
  
  
  
  12. background: url(email.png) no-repeat center right; 
    13. 
  
  
  
  13. 
  
  
  
  14. } 
    15. 
  
  
  
  15. 
  
  
  
  16. /* pdfs */
    17. 
  
  
  
  17. 
  
  
  
  18. a[href$=".pdf"]{ 
    19. 
  
  
  
  19. padding-right: 20px; 
    20. 
  
  
  
  20. background: url(pdf.png) no-repeat center right;
    21.

#p#

7. Drop Caps

非常棒的跨浏览器代码帮助你使得每段文字的第一个字母更加

 
 
 
    
  
  
  
  1. .firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
    2.

明显CSS3也可以，但是不支持IE9

 
 
 
    
  
  
  
  1. p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
    2.

8. CSS Sticky Footer

CSS实现的置顶sticky页脚效果，支持所有的主流浏览器包括chrome和IE8

CSS：

 
 
 
    
  
  
  
  1. /* 
    2. 
  
  
  
  2. Sticky Footer Solution 
    3. 
  
  
  
  3. by Steve Hatcher  
    4. 
  
  
  
  4. 
  
  
  
  5. http://stever.ca 
    6. 
  
  
  
  6. 
  
  
  
  7. http://www.cssstickyfooter.com 
    8. 
  
  
  
  8. 
  
  
  
  9. */
    10. 
  
  
  
  10. 
  
  
  
  11. * {margin:0;padding:0;}  
    12. 
  
  
  
  12. 
  
  
  
  13. /* must declare 0 margins on everything, also for main layout components use padding, not 
    14. 
  
  
  
  14. vertical margins (top and bottom) to add spacing, else those margins get added to total height 
    15. 
  
  
  
  15. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
    16. 
  
  
  
  16. 
  
  
  
  17. html, body {height: 100%;} 
    18. 
  
  
  
  18. 
  
  
  
  19. #wrap {min-height: 100%;} 
    20. 
  
  
  
  20. 
  
  
  
  21. #main {overflow:auto; 
    22. 
  
  
  
  22.     padding-bottom: 150px;}  /* must be same height as the footer */
    23. 
  
  
  
  23. 
  
  
  
  24. #footer {position: relative; 
    25. 
  
  
  
  25.     margin-top: -150px; /* negative value of footer height */
    26. 
  
  
  
  26.     height: 150px; 
    27. 
  
  
  
  27.     clear:both;}  
    28. 
  
  
  
  28. 
  
  
  
  29. /*Opera Fix*/
    30. 
  
  
  
  30. body:before {/* thanks to Maleika (Kohoutec)*/
    31. 
  
  
  
  31. content:""; 
    32. 
  
  
  
  32. height:100%; 
    33. 
  
  
  
  33. float:left; 
    34. 
  
  
  
  34. width:0; 
    35. 
  
  
  
  35. margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    36. 
  
  
  
  36. } 
    37. 
  
  
  
  37. 
  
  
  
  38. /* IMPORTANT 
    39. 
  
  
  
  39. 
  
  
  
  40. You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher. 
    41. 
  
  
  
  41. 
  
  
  
  42.  
    43. 
  
  
  
  43. 
  
  
  
  44. */
    45.

HTML：

 
 
 
    
  
  
  
    2. 
  
  
  
  2. 
  
  
  
  3.     
    4. 
  
  
  
  4. 
  
  
  
  5.     

  • 9. Image Replacement Technique

    实用的图片替换文字页面元素效果。

     
 
 
      
  
  
  
    1. a.replacement 
      2. 
  
  
  
    2. { 
      3. 
  
  
  
    3.   background: url(dotted-border.png) no-repeat; 
      4. 
  
  
  
    4.   height: 44px; 
      5. 
  
  
  
    5.   width: 316px; 
      6. 
  
  
  
    6.   display: block; 
      7. 
  
  
  
    7.   text-indent: -9999px; 
      8. 
  
  
  
    8.   overflow: hidden;  /*Add this line to the image replacement method*/
      9. 
  
  
  
    9. }
      10.

    10. Set body font-size to 62.5% for Easier em Conversion

    如果你想拥有更加灵活的布局，你应该使用em而不是pixel或者points。通过设置你的字体62.5%，你可以很容易的通过设置em为pixel的1/10来设置文字。

     
 
 
      
  
  
  
    1. body { 
      2. 
  
  
  
    2.   font-size: 62.5%; /* font-size 1em = 10px */
      3. 
  
  
  
    3. } 
      4. 
  
  
  
    4. p { 
      5. 
  
  
  
    5.   font-size: 1.2em; /* 1.2em = 12px */
      6. 
  
  
  
    6. }
      7.

    11. Vertically Align Text

    如果你设置line-height和父元素高度相同，则很容易让文字垂直居中

     
 
 
      
  
  
  
    1. div { width:100px; height:100px; } 
      2. 
  
  
  
    2. div p { line-height:100px; }
      3.

    12. How to Create 3D Text With CSS3

    使用text-shadow属性，你可以只使用CSS3创建3D文字

     
 
 
      
  
  
  
    1. p.threeD 
      2. 
  
  
  
    2. { 
      3. 
  
  
  
    3.     text-shadow: 
      4. 
  
  
  
    4.         -1px 1px 0 #ddd, 
      5. 
  
  
  
    5.         -2px 2px 0 #c8c8c8, 
      6. 
  
  
  
    6.         -3px 3px 0 #ccc, 
      7. 
  
  
  
    7.         -4px 4px 0 #b8b8b8, 
      8. 
  
  
  
    8.         -4px 4px 0 #bbb, 
      9. 
  
  
  
    9.         0px 1px 1px rgba(0,0,0,.4), 
      10. 
  
  
  
    10.         0px 2px 2px rgba(0,0,0,.3), 
      11. 
  
  
  
    11.         -1px 3px 3px rgba(0,0,0,.2), 
      12. 
  
  
  
    12.         -1px 5px 5px rgba(0,0,0,.1), 
      13. 
  
  
  
    13.         -2px 8px 8px rgba(0,0,0,.1), 
      14. 
  
  
  
    14.         -2px 13px 13px rgba(0,0,0,.1) 
      15. 
  
  
  
    15.         ; 
      16. 
  
  
  
    16. }
      17.

    13. Wrapping Long URLs and Text Content with CSS

    这段代码将会帮助你使得一行文字不至于太长，会自动根据内容宽度来折行

     
 
 
      
  
  
  
    1. pre { 
      2. 
  
  
  
    2.     white-space: pre;           /* CSS 2.0 */
      3. 
  
  
  
    3.     white-space: pre-wrap;      /* CSS 2.1 */
      4. 
  
  
  
    4.     white-space: pre-line;      /* CSS 3.0 */
      5. 
  
  
  
    5.     white-space: -pre-wrap;     /* Opera 4-6 */
      6. 
  
  
  
    6.     white-space: -o-pre-wrap;   /* Opera 7 */
      7. 
  
  
  
    7.     white-space: -moz-pre-wrap; /* Mozilla */
      8. 
  
  
  
    8.     white-space: -hp-pre-wrap;  /* HP Printers */
      9. 
  
  
  
    9.     word-wrap: break-word;      /* IE 5+ */
      10. 
  
  
  
    10.     }
      11.

    14. Fancy Ampersand

    使得你的"&"符号更加漂亮

     
 
 
      
  
  
  
    1. .amp { 
      2. 
  
  
  
    2. font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; 
      3. 
  
  
  
    3. font-style: italic; 
      4. 
  
  
  
    4. font-weight: normal; 
      5. 
  
  
  
    5. }
      6.

    15. Pull Quotes for Improved Reading

    使得你的引用更加明显，将引用浮动到左边或者右边，并且包围内容

     
 
 
      
  
  
  
    1. .pullquote { 
      2. 
  
  
  
    2. width: 300px; 
      3. 
  
  
  
    3. float: right; 
      4. 
  
  
  
    4. margin: 5px; 
      5. 
  
  
  
    5. font-family: Georgia, "Times New Roman", Times, serif; 
      6. 
  
  
  
    6. font: italic bold #ff0000 ; }
      7.

    16. Rounded Borders Around Images

    使用CSS3可以很容易的生成图片圆角

     
 
 
      
  
  
  
    1. img { 
      2. 
  
  
  
    2. -webkit-border-radius: 25px; 
      3. 
  
  
  
    3. -moz-border-radius: 25px; 
      4. 
  
  
  
    4. border-radius: 25px; 
      5. 
  
  
  
    5. }
      6.

    17. Image Preloader

    图片加载中先加载一个小图片，这样提示用户预加载图片

     
 
 
      
  
  
  
    1. img 
      2. 
  
  
  
    2. { 
      3. 
  
  
  
    3.     background: url(img/preloader.gif) no-repeat 50% 50%; 
      4. 
  
  
  
    4. }
      5.

    #p#

    18. CSS3 Opacity

    使用opacity属性，帮助你透明看到元素，你可以创建一个分层的纹理背景

     
 
 
      
  
  
  
    1. div.L1 { background:#036; opacity:0.2; height:20px; } 
      2. 
  
  
  
    2. div.L2 { background:#036; opacity:0.4; height:20px; } 
      3. 
  
  
  
    3. div.L3 { background:#036; opacity:0.6; height:20px; } 
      4. 
  
  
  
    4. div.L4 { background:#036; opacity:0.8; height:20px; } 
      5. 
  
  
  
    5. div.L5 { background:#036; opacity:1.0; height:20px; }
      6.

    19. Highlight links that open in a new window

    这段代码允许你通过显示不同的样式清楚地分辨新窗口/标签页打开的link。

     
 
 
      
  
  
  
    1. a[target="_blank"]:before, 
      2. 
  
  
  
    2. a[target="new"]:before { 
      3. 
  
  
  
    3. margin:0 5px 0 0; 
      4. 
  
  
  
    4. padding:1px; 
      5. 
  
  
  
    5. outline:1px solid #333; 
      6. 
  
  
  
    6. color:#333; 
      7. 
  
  
  
    7. background:#ff9; 
      8. 
  
  
  
    8. font:12px "Zapf Dingbats"; 
      9. 
  
  
  
    9. content: "\279C"; 
      10. 
  
  
  
    10. }
      11.

    20. The New Bulletproof @Font-Face Syntax

    跨浏览器的CSS代码片断，帮助你定义font face

     
 
 
      
  
  
  
    1. @font-face { 
      2. 
  
  
  
    2.     font-family: 'MyFontFamily'; 
      3. 
  
  
  
    3.     src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
      4. 
  
  
  
    4.          url('myfont-webfont.woff') format('woff'), 
      5. 
  
  
  
    5.          url('myfont-webfont.ttf')  format('truetype'), 
      6. 
  
  
  
    6.          url('myfont-webfont.svg#svgFontName') format('svg'); 
      7. 
  
  
  
    7.     }
      8.

    21. Flip an Image

    翻转图片的CSS代码片断。特别适合你翻转图标

     
 
 
      
  
  
  
    1. img { 
      2. 
  
  
  
    2.         -moz-transform: scaleX(-1); 
      3. 
  
  
  
    3.         -o-transform: scaleX(-1); 
      4. 
  
  
  
    4.         -webkit-transform: scaleX(-1); 
      5. 
  
  
  
    5.         transform: scaleX(-1); 
      6. 
  
  
  
    6.         filter: FlipH; 
      7. 
  
  
  
    7.         -ms-filter: "FlipH"; 
      8. 
  
  
  
    8. }
      9.

    22. Email Link With An Image

    快速的方法自动添加一个电子邮件图片到你的email链接

     
 
 
      
  
  
  
    1. a[href^="mailto:"] { 
      2. 
  
  
  
    2.      background: url(images/email.png) no-repeat right top; 
      3. 
  
  
  
    3.      padding-right:10px; 
      4. 
  
  
  
    4. }
      5.

    23. Beautiful Blockquotes

    美化你的引用

     
 
 
      
  
  
  
    1. blockquote { 
      2. 
  
  
  
    2.      background:#f9f9f9; 
      3. 
  
  
  
    3.      border-left:10px solid #ccc; 
      4. 
  
  
  
    4.      margin:1.5em 10px; 
      5. 
  
  
  
    5.      padding:.5em 10px; 
      6. 
  
  
  
    6.      quotes:"\201C""\201D""\2018""\2019"; 
      7. 
  
  
  
    7. } 
      8. 
  
  
  
    8. blockquote:before { 
      9. 
  
  
  
    9.      color:#ccc; 
      10. 
  
  
  
    10.      content:open-quote; 
      11. 
  
  
  
    11.      font-size:4em; 
      12. 
  
  
  
    12.      line-height:.1em; 
      13. 
  
  
  
    13.      margin-right:.25em; 
      14. 
  
  
  
    14.      vertical-align:-.4em; 
      15. 
  
  
  
    15. } 
      16. 
  
  
  
    16. blockquote p { 
      17. 
  
  
  
    17.      display:inline; 
      18. 
  
  
  
    18. }
      19.

    24. Browser CSS hacks

    大量的CSS hack帮助你让你的网站在所有浏览器下显示一致

     
 
 
      
  
  
  
    1. /***** Selector Hacks ******/
      2. 
  
  
  
    2. 
  
  
  
    3. /* IE6 and below */
      4. 
  
  
  
    4. * html #uno  { color: red } 
      5. 
  
  
  
    5. 
  
  
  
    6. /* IE7 */
      7. 
  
  
  
    7. *:first-child+html #dos { color: red }  
      8. 
  
  
  
    8. 
  
  
  
    9. /* IE7, FF, Saf, Opera  */
      10. 
  
  
  
    10. html>body #tres { color: red } 
      11. 
  
  
  
    11. 
  
  
  
    12. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
      13. 
  
  
  
    13. html>/**/body #cuatro { color: red } 
      14. 
  
  
  
    14. 
  
  
  
    15. /* Opera 9.27 and below, safari 2 */
      16. 
  
  
  
    16. html:first-child #cinco { color: red } 
      17. 
  
  
  
    17. 
  
  
  
    18. /* Safari 2-3 */
      19. 
  
  
  
    19. html[xmlns*=""] body:last-child #seis { color: red } 
      20. 
  
  
  
    20. 
  
  
  
    21. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
      22. 
  
  
  
    22. body:nth-of-type(1) #siete { color: red } 
      23. 
  
  
  
    23. 
  
  
  
    24. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
      25. 
  
  
  
    25. body:first-of-type #ocho {  color: red } 
      26. 
  
  
  
    26. 
  
  
  
    27. /* saf3+, chrome1+ */
      28. 
  
  
  
    28. @media screen and (-webkit-min-device-pixel-ratio:0) { 
      29. 
  
  
  
    29.  #diez  { color: red  } 
      30. 
  
  
  
    30. } 
      31. 
  
  
  
    31. 
  
  
  
    32. /* iPhone / mobile webkit */
      33. 
  
  
  
    33. @media screen and (max-device-width: 480px) { 
      34. 
  
  
  
    34.  #veintiseis { color: red  } 
      35. 
  
  
  
    35. } 
      36. 
  
  
  
    36. 
  
  
  
    37. /* Safari 2 - 3.1 */
      38. 
  
  
  
    38. html[xmlns*=""]:root #trece  { color: red  } 
      39. 
  
  
  
    39. 
  
  
  
    40. /* Safari 2 - 3.1, Opera 9.25 */
      41. 
  
  
  
    41. *|html[xmlns*=""] #catorce { color: red  } 
      42. 
  
  
  
    42. 
  
  
  
    43. /* Everything but IE6-8 */
      44. 
  
  
  
    44. :root *> #quince { color: red  } 
      45. 
  
  
  
    45. 
  
  
  
    46. /* IE7 */
      47. 
  
  
  
    47. *+html #dieciocho {  color: red } 
      48. 
  
  
  
    48. 
  
  
  
    49. /* Firefox only. 1+ */
      50. 
  
  
  
    50. #veinticuatro,  x:-moz-any-link  { color: red } 
      51. 
  
  
  
    51. 
  
  
  
    52. /* Firefox 3.0+ */
      53. 
  
  
  
    53. #veinticinco,  x:-moz-any-link, x:default  { color: red  } 
      54. 
  
  
  
    54. 
  
  
  
    55. /* FF 3.5+ */
      56. 
  
  
  
    56. body:not(:-moz-handler-blocked) #cuarenta { color: red; } 
      57. 
  
  
  
    57. 
  
  
  
    58. /***** Attribute Hacks ******/
      59. 
  
  
  
    59. 
  
  
  
    60. /* IE6 */
      61. 
  
  
  
    61. #once { _color: blue } 
      62. 
  
  
  
    62. 
  
  
  
    63. /* IE6, IE7 */
      64. 
  
  
  
    64. #doce { *color: blue; /* or #color: blue */ } 
      65. 
  
  
  
    65. 
  
  
  
    66. /* Everything but IE6 */
      67. 
  
  
  
    67. #diecisiete { color/**/: blue } 
      68. 
  
  
  
    68. 
  
  
  
    69. /* IE6, IE7, IE8 */
      70. 
  
  
  
    70. #diecinueve { color: blue\9; } 
      71. 
  
  
  
    71. 
  
  
  
    72. /* IE7, IE8 */
      73. 
  
  
  
    73. #veinte { color/*\**/: blue\9; } 
      74. 
  
  
  
    74. 
  
  
  
    75. /* IE6, IE7 -- acts as an !important */
      76. 
  
  
  
    76. #veintesiete { color: blue !ie; } /* string after ! can be anything */
      77. 
  
  
  
    77. 
  
  
  
    78. /* IE8, IE9 */
      79. 
  
  
  
    79. #anotherone  {color: blue\0/;} /* must go at the END of all rules */
      80.

    25. How To Change The Default Text Selection Color on your Blog

    修改高亮的文字颜色

     
 
 
      
  
  
  
    1. ::selection { 
      2. 
  
  
  
    2.    background: #ffb7b7; /* Safari */
      3. 
  
  
  
    3.         color: #ffffff; 
      4. 
  
  
  
    4.    } 
      5. 
  
  
  
    5. ::-moz-selection { 
      6. 
  
  
  
    6.    background: #ffb7b7; /* Firefox */
      7. 
  
  
  
    7.         color: #ffffff; 
      8. 
  
  
  
    8.    }
      9.

    26. Clearfix

     
 
 
      
  
  
  
    1. .clearfix:after { 
      2. 
  
  
  
    2.     visibility: hidden; 
      3. 
  
  
  
    3.     display: block; 
      4. 
  
  
  
    4.     font-size: 0; 
      5. 
  
  
  
    5.     content: " "; 
      6. 
  
  
  
    6.     clear: both; 
      7. 
  
  
  
    7.     height: 0; 
      8. 
  
  
  
    8. } 
      9. 
  
  
  
    9. 
  
  
  
    10. .clearfix { display: inline-block; } 
      11. 
  
  
  
    11. 
  
  
  
    12. /* start commented backslash hack \*/
      13. 
  
  
  
    13. * html .clearfix { height: 1%; } 
      14. 
  
  
  
    14. .clearfix { display: block; } 
      15. 
  
  
  
    15. /* close commented backslash hack */
      16.

    27. Hide Logo Text With Text Indent

    使得你的logo SEO友好。保证logo文字不显示

     
 
 
      
  
  
  
    1. h1 { 
      2. 
  
  
  
    2.         text-indent:-9999px; 
      3. 
  
  
  
    3.         margin:0 auto; 
      4. 
  
  
  
    4.         width:400px; 
      5. 
  
  
  
    5.         height:100px;  
                新闻名称：30个你应该知道的实用CSS代码片断
                
      
                链接地址：http://www.shufengxianlan.com/qtweb/news14/274914.html
            
      
            
      
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            
      
        
        
      
            
      猜你还喜欢下面的内容
      
            
        
      
    
    
      
        
      
            
      网站建设知识
      
            
        
      
        
      
            
      各行业网站
      
            
        
      
    
      


      
    
      
        绵阳电信机房　　 　成都定制网站建设　　 　标志设计　　 　巴彦网站建设　　 　医药医疗网站建设方案　　 　宜宾网站建设　　 　无边发光字厂家　　 　成都木托盘　　 　小程序开发　　 　重庆水土双线托管　　 　网站推广　　 　成都app软件开发公司　　 　达州网站设计　　 　营销网站定位　　 　抖音短视频　　 　成都网站建设推广　　 　成都铺面装修　　 　眉山主机托管　　 　梦港之夜　　 　西云服务器托管