投稿
IDC

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

作者：admin 2021-10-10 我要评论

介绍 以下是10个来自于网络收集的非常实用且重要的CSS代码片段 CSS重置 这是CSS浏览器重置的基本和常见的CSS代码段 html,body,div,span,applet,object,iframe,h1...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

 介绍

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

跨浏览器透明度设置

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

常规媒体查询

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

自定义选中文本

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

带CSS3的全屏背景

  1. 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. } 

强制垂直滚动条

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

文本首字母大写

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

内外阴影

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

语音气泡

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

自定义输入样式

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

本文转载自网络，原文链接：https://www.toutiao.com/a6895004988574007816/

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • 分享10个很实用的CSS的代码片段

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

  • VS Code 中 Python 扩展的部分功能重构

    VS Code 中 Python 扩展的部分功能重构

  • 2020 Google 开发者大会主题演讲：代码

    2020 Google 开发者大会主题演讲：代码

  • Zig是码农们期待已久的C语言的替代品吗

    Zig是码农们期待已久的C语言的替代品吗

腾讯云代理商
精彩导读
/uploads/allimg/211010/1200521337-0-lp.png

添加云数据库资产_数据安全中心 DSC_用

/uploads/allimg/210723/1441144607-0-lp.png

去Oracle愈演愈烈，AWS称已完成30万个

/uploads/allimg/210809/15351A438-0-lp.jpg

有“虎扑”等多个含义：三字母域名hpu.

/images/defaultpic.gif

如何为您的平台选择正确的API网关

/images/defaultpic.gif

添加云服务器_VR云渲游平台 CVR_用户指

/images/defaultpic.gif

宝德云服务器设计实现了情报云服务平台

海外云服务器
热门资讯
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云