日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
分享10個(gè)很實(shí)用的CSS的代碼片段

 介紹

發(fā)展壯大離不開(kāi)廣大客戶長(zhǎng)期以來(lái)的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及木屋等，在成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開(kāi)發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。

以下是10個(gè)來(lái)自于網(wǎng)絡(luò)收集的非常實(shí)用且重要的CSS代碼片段

CSS重置

這是CSS瀏覽器重置的基本和常見(jiàn)的CSS代碼段

 
 
 
 
    
  
  
  
  
  1. 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. 
  
  
  
  
  2.      margin: 0;
    3. 
  
  
  
  
  3.      padding: 0;
    4. 
  
  
  
  
  4.      border: 0;
    5. 
  
  
  
  
  5.      font-size: 100%;
    6. 
  
  
  
  
  6.      font: inherit;
    7. 
  
  
  
  
  7.      vertical-align: baseline;
    8. 
  
  
  
  
  8.      outline: none;
    9. 
  
  
  
  
  9.      -webkit-box-sizing: border-box;
    10. 
  
  
  
  
  10.      -moz-box-sizing: border-box;
    11. 
  
  
  
  
  11.      box-sizing: border-box;
    12. 
  
  
  
  
  12. }
    13. 
  
  
  
  
  13.  html {
    14. 
  
  
  
  
  14.      height: 101%;
    15. 
  
  
  
  
  15. }
    16. 
  
  
  
  
  16.  body {
    17. 
  
  
  
  
  17.      font-size: 62.5%;
    18. 
  
  
  
  
  18.      line-height: 1;
    19. 
  
  
  
  
  19.      font-family: Arial, Tahoma, sans-serif;
    20. 
  
  
  
  
  20. }
    21. 
  
  
  
  
  21.  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    22. 
  
  
  
  
  22.      display: block;
    23. 
  
  
  
  
  23. }
    24. 
  
  
  
  
  24.  ol, ul {
    25. 
  
  
  
  
  25.      list-style: none;
    26. 
  
  
  
  
  26. }
    27. 
  
  
  
  
  27.  blockquote, q {
    28. 
  
  
  
  
  28.      quotes: none;
    29. 
  
  
  
  
  29. }
    30. 
  
  
  
  
  30.  blockquote:before, blockquote:after, q:before, q:after {
    31. 
  
  
  
  
  31.      content: '';
    32. 
  
  
  
  
  32.      content: none;
    33. 
  
  
  
  
  33. }
    34. 
  
  
  
  
  34.  strong {
    35. 
  
  
  
  
  35.      font-weight: bold;
    36. 
  
  
  
  
  36. }
    37. 
  
  
  
  
  37.  table {
    38. 
  
  
  
  
  38.      border-collapse: collapse;
    39. 
  
  
  
  
  39.      border-spacing: 0;
    40. 
  
  
  
  
  40. }
    41. 
  
  
  
  
  41.  img {
    42. 
  
  
  
  
  42.      border: 0;
    43. 
  
  
  
  
  43.      max-width: 100%;
    44. 
  
  
  
  
  44. }
    45. 
  
  
  
  
  45.  p {
    46. 
  
  
  
  
  46.      font-size: 1.2em;
    47. 
  
  
  
  
  47.      line-height: 1.0em;
    48. 
  
  
  
  
  48.      color: #333;
    49. 
  
  
  
  
  49. }
    50.

跨瀏覽器透明度設(shè)置

 
 
 
 
    
  
  
  
  
  1. .transparent {    
    2. 
  
  
  
  
  2.      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */    
    3. 
  
  
  
  
  3.      filter: alpha(opacity=50); /* IE 5-7 */    
    4. 
  
  
  
  
  4.      -moz-opacity: 0.5;/* Netscape */    
    5. 
  
  
  
  
  5.      -khtml-opacity: 0.5; /* Safari 1.x */   
    6. 
  
  
  
  
  6.      opacity: 0.5;  /* Good browsers */
    7. 
  
  
  
  
  7. }
    8.

常規(guī)媒體查詢

 
 
 
 
    
  
  
  
  
  1. /* Smartphones (portrait and landscape) ----------- */
    2. 
  
  
  
  
  2.  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. /* Smartphones (landscape) ----------- */
    6. 
  
  
  
  
  6.  @media only screen and (min-width : 321px) {
    7. 
  
  
  
  
  7.    
    8. 
  
  
  
  
  8. }
    9. 
  
  
  
  
  9. /* Smartphones (portrait) ----------- */
    10. 
  
  
  
  
  10.  @media only screen and (max-width : 320px) {
    11. 
  
  
  
  
  11.     
    12. 
  
  
  
  
  12. }
    13. 
  
  
  
  
  13. /* iPads (portrait and landscape) ----------- */
    14. 
  
  
  
  
  14.  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    15. 
  
  
  
  
  15.     
    16. 
  
  
  
  
  16. }
    17. 
  
  
  
  
  17. /* iPads (landscape) ----------- */
    18. 
  
  
  
  
  18.  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    19. 
  
  
  
  
  19.     
    20. 
  
  
  
  
  20. }
    21. 
  
  
  
  
  21. /* iPads (portrait) ----------- */
    22. 
  
  
  
  
  22.  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    23. 
  
  
  
  
  23.     
    24. 
  
  
  
  
  24. }
    25. 
  
  
  
  
  25. /* Desktops and laptops ----------- */
    26. 
  
  
  
  
  26.  @media only screen and (min-width : 1224px) {
    27. 
  
  
  
  
  27.    
    28. 
  
  
  
  
  28. }
    29. 
  
  
  
  
  29. /* Large screens ----------- */
    30. 
  
  
  
  
  30.  @media only screen and (min-width : 1824px) {
    31. 
  
  
  
  
  31.     
    32. 
  
  
  
  
  32. }
    33. 
  
  
  
  
  33. /* iPhone 4 ----------- */
    34. 
  
  
  
  
  34.  @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
    35. 
  
  
  
  
  35.    
    36. 
  
  
  
  
  36. }
    37.

自定義選中文本

 
 
 
 
    
  
  
  
  
  1. ::selection {
    2. 
  
  
  
  
  2.      background: #51a351;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4.  ::-moz-selection {
    5. 
  
  
  
  
  5.      background: #51a351;
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7.  ::-webkit-selection {
    8. 
  
  
  
  
  8.      background: #51a351;
    9. 
  
  
  
  
  9. }
    10.

帶CSS3的全屏背景

 
 
 
 
    
  
  
  
  
  1. html {
    2. 
  
  
  
  
  2.      background: url('images/bg.jpg') no-repeat center center fixed;
    3. 
  
  
  
  
  3.      -webkit-background-size: cover;
    4. 
  
  
  
  
  4.      -moz-background-size: cover;
    5. 
  
  
  
  
  5.      -o-background-size: cover;
    6. 
  
  
  
  
  6.      background-size: cover;
    7. 
  
  
  
  
  7. }
    8.

強(qiáng)制垂直滾動(dòng)條

 
 
 
 
    
  
  
  
  
  1. html {
    2. 
  
  
  
  
  2.      height: 101% 
    3. 
  
  
  
  
  3. }
    4.

文本首字母大寫(xiě)

 
 
 
 
    
  
  
  
  
  1. p:first-letter {
    2. 
  
  
  
  
  2.      display: block;
    3. 
  
  
  
  
  3.      margin: 4px 0 0 4px;
    4. 
  
  
  
  
  4.      float: left;
    5. 
  
  
  
  
  5.      color: #ff3366;
    6. 
  
  
  
  
  6.      font-size: 5.3em;
    7. 
  
  
  
  
  7.      font-family: Georgia, Times New Roman, serif;
    8. 
  
  
  
  
  8. }
    9.

內(nèi)外陰影

 
 
 
 
    
  
  
  
  
  1. #mydiv {
    2. 
  
  
  
  
  2.      -moz-box-shadow: inset 2px 0 4px #000;
    3. 
  
  
  
  
  3.      -webkit-box-shadow: inset 2px 0 4px #000;
    4. 
  
  
  
  
  4.      box-shadow: inset 2px 0 4px #000;
    5. 
  
  
  
  
  5. }
    6. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. #mydiv {
    2. 
  
  
  
  
  2.      -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    3. 
  
  
  
  
  3.      -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    4. 
  
  
  
  
  4.      box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    5. 
  
  
  
  
  5. }
    6.

語(yǔ)音氣泡

 
 
 
 
    
  
  
  
  
  1. .speech-bubble {
    2. 
  
  
  
  
  2.     position: relative;
    3. 
  
  
  
  
  3.     background: #00aabb;
    4. 
  
  
  
  
  4.     border-radius: .4em;
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. .speech-bubble:after {
    8. 
  
  
  
  
  8.     content: '';
    9. 
  
  
  
  
  9.     position: absolute;
    10. 
  
  
  
  
  10.     bottom: 0;
    11. 
  
  
  
  
  11.     left: 50%;
    12. 
  
  
  
  
  12.     width: 0;
    13. 
  
  
  
  
  13.     height: 0;
    14. 
  
  
  
  
  14.     border: 30px solid transparent;
    15. 
  
  
  
  
  15.     border-top-color: #00aabb;
    16. 
  
  
  
  
  16.     border-bottom: 0;
    17. 
  
  
  
  
  17.     border-left: 0;
    18. 
  
  
  
  
  18.     margin-left: -15px;
    19. 
  
  
  
  
  19.     margin-bottom: -30px;
    20. 
  
  
  
  
  20. }
    21.

自定義輸入樣式

 
 
 
 
    
  
  
  
  
  1. input[type=text], textarea {
    2. 
  
  
  
  
  2.      -webkit-transition: all 0.30s ease-in-out;
    3. 
  
  
  
  
  3.      -moz-transition: all 0.30s ease-in-out;
    4. 
  
  
  
  
  4.      -ms-transition: all 0.30s ease-in-out;
    5. 
  
  
  
  
  5.      -o-transition: all 0.30s ease-in-out;
    6. 
  
  
  
  
  6.      outline: none;
    7. 
  
  
  
  
  7.      padding: 3px 0px 3px 3px;
    8. 
  
  
  
  
  8.      margin: 5px 1px 3px 0px;
    9. 
  
  
  
  
  9.      border: 1px solid #ddd;
    10. 
  
  
  
  
  10. }
    11. 
  
  
  
  
  11.  input[type=text]:focus, textarea:focus {
    12. 
  
  
  
  
  12.      box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    13. 
  
  
  
  
  13.      padding: 3px 0px 3px 3px;
    14. 
  
  
  
  
  14.      margin: 5px 1px 3px 0px;
    15. 
  
  
  
  
  15.      border: 1px solid rgba(81, 203, 238, 1);
    16. 
  
  
  
  
  16. }
    17.

網(wǎng)頁(yè)標(biāo)題：分享10個(gè)很實(shí)用的CSS的代碼片段
文章分享：http://www.dlmjj.cn/article/cceoehe.html