分享10个很实用的CSS的代码片段

 介绍

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及木屋等，在成都网站建设、网络营销推广、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

以下是10个来自于网络收集的非常实用且重要的CSS代码片段

CSS重置

这是CSS浏览器重置的基本和常见的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.

跨浏览器透明度设置

 
 
 
 
    
  
  
  
  
  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.

常规媒体查询

 
 
 
 
    
  
  
  
  
  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.

强制垂直滚动条

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

文本首字母大写

 
 
 
 
    
  
  
  
  
  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.

内外阴影

 
 
 
 
    
  
  
  
  
  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.

语音气泡

 
 
 
 
    
  
  
  
  
  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.

分享名称：分享10个很实用的CSS的代码片段
转载注明：http://www.shufengxianlan.com/qtweb/news21/167021.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

商城网站知识

分类信息网

长城雪茄　　 　企业营销型网站　　 　成都门窗定制　　 　广汉长尔科技　　 　成都主机托管　　 　成都网站推广　　 　做网站　　 　响应式网站　　 　高防服务器租用　　 　成都学生服定制　　 　网络推广公司　　 　绵阳电信机房　　 　橡塑保温板　　 　LOGO设计　　 　德阳东方电机技改服务有限公司　　 　高端网站设计　　 　内江做网站　　 　app开发公司　　 　成都服务器托管　　 　网站排名