分享30个开发人员有用的CSS代码片段

最新推荐文章于 2023-06-21 11:25:55 发布
最新推荐文章于 2023-06-21 11:25:55 发布
阅读量369 收藏
点赞数
分类专栏： CSS

分享30个开发人员有用的CSS代码片段


    CSS 是我们使用的功能强大和最常用 web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题。

    在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的；

    Css Reset by Eric Meyer

       
   
    1. html, body, div, span, applet, object, iframe, 
    2.  h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    3.  a, abbr, acronym, address, big, cite, code, 
    4.  del, dfn, em, font, img, ins, kbd, q, s, samp, 
    5.  small, strike, strong, sub, sup, tt, var, 
    6.  b, u, i, center, 
    7.  dl, dt, dd, ol, ul, li, 
    8.  fieldset, form, label, legend, 
    9.  table, caption, tbody, tfoot, thead, tr, th, td { 
    10.      margin: 0; 
    11.      padding: 0; 
    12.      border: 0; 
    13.      outline: 0; 
    14.      font-size: 100%; 
    15.      vertical-align: baseline; 
    16.      background: transparent; 
    17.  } 
    18.   
    19.  body { 
    20.      line-height: 1; 
    21.  } 
    22.   
    23.  ol, ul { 
    24.      list-style: none; 
    25.  } 
    26.   
    27.  blockquote, q { 
    28.      quotes: none; 
    29.  } 
    30.   
    31.  blockquote:before, blockquote:after, 
    32.  q:before, q:after { 
    33.      content: ''; 
    34.      content: none; 
    35.  } 
    36.   
    37.  /* remember to define focus styles! */ 
    38.  :focus { 
    39.      outline: 0; 
    40.  } 
    41.   
    42.  /* remember to highlight inserts somehow! */ 
    43.  ins { 
    44.      text-decoration: none; 
    45.  } 
    46.   
    47.  del { 
    48.      text-decoration: line-through; 
    49.  } 
    50.   
    51.  /* tables still need 'cellspacing="0"' in the markup */ 
    52.  table { 
    53.      border-collapse: collapse; 
    54.      border-spacing: 0; 
    55.  }

    根据文件格式显示不同的链接样式

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

    在IE浏览器删除textarea的滚动条

       
   
    1. textarea{ 
    2.      overflow:auto; 
    3.  }

    浏览器特定的 hacks

       
   
    1. /* IE 6 */ 
    2.  * html .yourclass { } 
    3.   
    4.  /* IE 7 */ 
    5.  *+html .yourclass{ } 
    6.   
    7.  /* IE 7 and modern browsers */ 
    8.  html>body .yourclass { } 
    9.   
    10.  /* Modern browsers (not IE 7) */ 
    11.  html>/**/body .yourclass { } 
    12.   
    13.  /* Opera 9.27 and below */ 
    14.  html:first-child .yourclass { } 
    15.   
    16.  /* Safari */ 
    17.  html[xmlns*=""] body:last-child .yourclass { } 
    18.   
    19.  /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ 
    20.  body:nth-of-type(1) .yourclass { } 
    21.   
    22.  /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ 
    23.  body:first-of-type .yourclass {  } 
    24.   
    25.  /* Safari 3+, Chrome 1+ */ 
    26.  @media screen and (-webkit-min-device-pixel-ratio:0) { 
    27.   .yourclass  {  } 
    28.  }

    Clearfix

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

    固定宽度且居中

       
   
    1. .wrapper { 
    2.     width:960px; 
    3.     margin:0 auto; 
    4. }

    Rounded corners – border-radius

       
   
    1. .round{ 
    2.    -moz-border-radius: 10px; 
    3.    -webkit-border-radius: 10px; 
    4.    border-radius: 10px; /* future proofing */ 
    5.    -khtml-border-radius: 10px; /* for old Konqueror browsers */ 
    6. }

    伪元素向文本的第一个字母添加特殊样式

       
   
    1. p:first-letter{ 
    2.     display:block; 
    3.     margin:5px 0 0 5px; 
    4.     float:left; 
    5.     color:#000; 
    6.     font-size:60px; 
    7.     font-family:Georgia; 
    8.  }

    使用 @fontface

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

    跨浏览器的inline-block

       
   
    1. li { 
    2.          width: 200px; 
    3.          min-height: 250px; 
    4.          border: 1px solid #000; 
    5.          display: -moz-inline-stack; 
    6.          display: inline-block; 
    7.          vertical-align: top; 
    8.          margin: 5px; 
    9.          zoom: 1; 
    10.          *display: inline; 
    11.          _height: 250px; 
    12.  }

    Fixed Footer

       
   
    1. #footer { 
    2.     position:fixed; 
    3.     left:0px; 
    4.     bottom:0px; 
    5.     height:30px; 
    6.     width:100%; 
    7.     background:#999; 
    8.  } 
    9.   
    10.  /* IE 6 */ 
    11.  * html #footer { 
    12.     position:absolute; 
    13.     top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
    14.  }

    更改内容区域的大小

       
   
    1. #content { 
    2.     width: 100%; 
    3.     margin: 0; 
    4.     float: none; 
    5. }

    CSS3 Media Queries （这个不常用主要用于智能设备的判断显示不同的媒体）

       
   
    1. /* Smartphones (portrait and landscape) ----------- */ 
    2.  @media only screen 
    3.  and (min-device-width : 320px) 
    4.  and (max-device-width : 480px) { 
    5.  /* Styles */ 
    6.  } 
    7.    
    8.  /* Smartphones (landscape) ----------- */ 
    9.  @media only screen 
    10.  and (min-width : 321px) { 
    11.  /* Styles */ 
    12.  } 
    13.    
    14.  /* Smartphones (portrait) ----------- */ 
    15.  @media only screen 
    16.  and (max-width : 320px) { 
    17.  /* Styles */ 
    18.  } 
    19.    
    20.  /* iPads (portrait and landscape) ----------- */ 
    21.  @media only screen 
    22.  and (min-device-width : 768px) 
    23.  and (max-device-width : 1024px) { 
    24.  /* Styles */ 
    25.  } 
    26.    
    27.  /* iPads (landscape) ----------- */ 
    28.  @media only screen 
    29.  and (min-device-width : 768px) 
    30.  and (max-device-width : 1024px) 
    31.  and (orientation : landscape) { 
    32.  /* Styles */ 
    33.  } 
    34.    
    35.  /* iPads (portrait) ----------- */ 
    36.  @media only screen 
    37.  and (min-device-width : 768px) 
    38.  and (max-device-width : 1024px) 
    39.  and (orientation : portrait) { 
    40.  /* Styles */ 
    41.  } 
    42.    
    43.  /* Desktops and laptops ----------- */ 
    44.  @media only screen 
    45.  and (min-width : 1224px) { 
    46.  /* Styles */ 
    47.  } 
    48.    
    49.  /* Large screens ----------- */ 
    50.  @media only screen 
    51.  and (min-width : 1824px) { 
    52.  /* Styles */ 
    53.  } 
    54.    
    55.  /* iPhone 4 ----------- */ 
    56.  @media 
    57.  only screen and (-webkit-min-device-pixel-ratio : 1.5), 
    58.  only screen and (min-device-pixel-ratio : 1.5) { 
    59.  /* Styles */ 
    60.  }

    多背景图片

       
   
    1. #multiple-images { 
    2.    background: url(image_1.png) top left no-repeat, 
    3.    url(image_2.png) bottom left no-repeat, 
    4.    url(image_3.png) bottom right no-repeat; 
    5. }

    多列

       
   
    1. #columns-3 { 
    2.     text-align: justify; 
    3.     -moz-column-count: 3; 
    4.     -moz-column-gap: 12px; 
    5.     -moz-column-rule: 1px solid #c4c8cc; 
    6.     -webkit-column-count: 3; 
    7.     -webkit-column-gap: 12px; 
    8.     -webkit-column-rule: 1px solid #c4c8cc; 
    9.  }

    在IE的最小高度

       
   
    1. .box { 
    2.    min-height:500px; 
    3.    height:auto !important; 
    4.    height:500px; 
    5. }

    突出显示文本样式

       
   
    1. ::selection { 
    2.     color: #000000; 
    3.     background-color: #FF0000; 
    4.  } 
    5.   
    6.  ::-moz-selection { 
    7.     color: #000000; 
    8.     background: #FF0000; 
    9.  }

    Box Shadow

       
   
    1. box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    2. -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    3. -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

    占位符文本样式

       
   
    1. ::-webkit-input-placeholder { color: #ccc; font-style:italic } 
    2. :-moz-placeholder           { color: #ccc; font-style:italic }

    CSS3 3D文字效果

       
   
    1. h1 { 
    2.    text-shadow: 0 1px 0 #ccc, 
    3.                 0 2px 0 #c9c9c9, 
    4.                 0 3px 0 #bbb, 
    5.                 0 4px 0 #b9b9b9, 
    6.                 0 5px 0 #aaa, 
    7.                 0 6px 1px rgba(0,0,0,.1), 
    8.                 0 0 5px rgba(0,0,0,.1), 
    9.                 0 1px 3px rgba(0,0,0,.3), 
    10.                 0 3px 5px rgba(0,0,0,.2), 
    11.                 0 5px 10px rgba(0,0,0,.25), 
    12.                 0 10px 10px rgba(0,0,0,.2), 
    13.                 0 20px 20px rgba(0,0,0,.15); 
    14.  }

    WebKit的边界半径修正

       
   
    1. -webkit-background-clip: padding-box;

    XBrowser的border-radius（CSS3PIE）

       
   
    1. .roundbox { 
    2.  -moz-border-radius:8px; 
    3.  -webkit-border-radius:8px; 
    4.  -khtml-border-radius:8px; 
    5.  border-radius:8px; 
    6.  behavior: url(/PIE.htc); 
    7.  }

    更好的兼容IE浏览器的

       
   
    1. <!--[if IE]> 
    2. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    3. <![endif]-->

    CSS3工具提示（这个很实用，看我网站的导航工具提示效果)

       
   
    1. a { 
    2.    color: #900; 
    3.    text-decoration: none; 
    4.  } 
    5.     
    6.  a:hover { 
    7.    color: red; 
    8.    position: relative; 
    9.  } 
    10.     
    11.  a[title]:hover:after { 
    12.    content: attr(title); 
    13.    padding: 4px 8px; 
    14.    color: #333; 
    15.    position: absolute; 
    16.    left: 0; 
    17.    top: 100%; 
    18.    white-space: nowrap; 
    19.    z-index: 20px; 
    20.    -moz-border-radius: 5px; 
    21.    -webkit-border-radius: 5px; 
    22.    border-radius: 5px; 
    23.    -moz-box-shadow: 0px 0px 4px #222; 
    24.    -webkit-box-shadow: 0px 0px 4px #222; 
    25.    box-shadow: 0px 0px 4px #222; 
    26.    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    27.    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    28.  }

    CSS3背景大小

       
   
    1. body { 
    2.    background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat; 
    3.    -moz-background-size: cover; 
    4.    background-size: cover; 
    5.  } 
    6.     
    7.  @media only all and (max-width: 1024px) and (max-height: 768px) { 
    8.    body {    
    9.      -moz-background-size: 1024px 768px; 
    10.      background-size: 1024px 768px; 
    11.    } 
    12.  }

    跨浏览器的CSS页面卷曲阴影

       
   
    1. .page-curl { 
    2.  position: relative; 
    3.  background: #ffffff; 
    4.  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); 
    5.  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); 
    6.  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); 
    7.  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 
    8.  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } 
    9.    
    10.  .page-curl:after { 
    11.  z-index: -1; 
    12.  position: absolute; 
    13.  background: transparent; 
    14.  width: 70%; 
    15.  height: 55%; 
    16.  content: ''; 
    17.  right: 10px; 
    18.  bottom: 10px; 
    19.  -webkit-transform: skew(15deg) rotate(5deg); 
    20.  -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); 
    21.  -moz-transform: skew(15deg) rotate(5deg); 
    22.  -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); } 
    23.    
    24.  .page-curl:before { 
    25.  z-index: -2; 
    26.  position: absolute; 
    27.  background: transparent; 
    28.  width: 70%; 
    29.  height: 55%; 
    30.  content: ''; 
    31.  left: 10px; 
    32.  bottom: 10px; 
    33.  -webkit-transform: skew(-15deg) rotate(-5deg); 
    34.  -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); 
    35.  -moz-transform: skew(-15deg) rotate(-5deg); 
    36.  -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

    CSS3模糊文字

       
   
    1. .blur { 
    2.    color: transparent; 
    3.    text-shadow: 0 0 5px rgba(0,0,0,0.5); 
    4. }

    修复 IE6/7 margin/padding双倍 间距错误

       
   
    1. ul li 
    2.  { 
    3.    float: right; 
    4.    margin-right: 10px; 
    5.    *display: inline; /*Target IE7 and bellow*/ 
    6.    _display: inline; /*Target IE6 and bellow*/ 
    7.  } 
    8.  /* This example fixes the double right margin bug */

    链接伪类的顺序

       
   
    1. a:link {color: blue;} 
    2. a:visited {color: purple;} 
    3. a:hover {color: red;} 
    4. a:active {color: yellow;}

    响应布局的HTML Meta标签

       
   
    1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
    2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    3. <meta name="HandheldFriendly" content="true">
    CharlotteWeb
    关注
    • 0
      点赞
    • 踩
    • 0
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    专栏目录
    淘宝css代码生成器_Web开发人员的10个最佳CSS代码生成器
    cune1359的博客
    06-28 1701
    Web开发人员一直在寻找捷径以节省时间。 许多出色的开发人员工具简化了这一过程，现在比以往任何时候都更容易快速投入并获得最终产品。 随着基于浏览器的IDE的兴起，似乎Web开发不再局限于桌面 。 您可以从任何计算机上编写代码，甚至可以在浏览器中实时测试结果 。 免费的在线代码生成器将帮助您快速迭代并构建代码 。 一旦知道需要生成什么代码，只需找到适合该工作的工具即可。 这些是我最喜欢的10...
    css520.520,30个纯css3动画代码片段和效果演示合集
    weixin_31199791的博客
    08-04 1544
    开源代码已经迎来了一个新的web前端时代。初学者和专家都可以通过使用预构建的代码片段节省时间和压力。下面画廊由30个不同的片段与纯CSS创建动画效果。所有这些代码片段都放在云IDE平台。这些webapps像代码编辑器,前端开发人员可以从任何web浏览器实践概念和独特的想法。很多优秀的前端开发者喜欢在这些IDE平台上尝试最新的CSS技术和概念，你可以在这里随时查看效果代码，或者直接复制使用的自己的项...
    分享88个HTML&CSS源码，总有一款适合您
    zy0412326的专栏
    01-15 2824
    html
    jquery--选择器sizzle源码分析
    weixin_34245169的博客
    04-15 281
    1 (function( window, undefined ) { 2 3 var i, 4 cachedruns,//正在匹配第几个元素 5 Expr, //Sizzle.selectors的快捷方式 6 getText,//获取文本函数 7 isXML, //是否为xml ...
    30个常用的CSS代码片段分享
    m0_71327177的博客
    12-17 1058
    这次主要分享在前端开发中可能会用到的一些常用的CSS代码片段，列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，仔细观察会发现，其实就是平常所学的一些知识汇总。
    分享 42 个常用的 CSS 布局代码片段，建议收藏
    前端达人
    03-16 2350
    对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为...
    10个可以提升开发效率的CSS辅助工具，快速生成常用代码片段
    zz_jesse的博客
    11-19 761
    大家好，今天给大家推荐几个我一直在用的 css辅助工具，可快速生成常用css代码片段，让你开效率大大提升， 同时也是非常好的学习资源。直接上干货box-shadow阴影预览及代码生成可以非...
    10个不可忽视的CSS代码片段（有用）
    OTF的专栏
    01-03 510
     10个不可忽视的CSS代码片段 使用教程 | 作者：走猫步的鱼 | 2014-11-27 10:14:09| 阅读 1181次 有用 (2) 评论 (0) 收藏 标签：CSS3 概述：本文介绍10个非常有用的CSS代码片段，绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等，使用平率高，经常无法完全达到想要效果。现在有了这1
    非常有用的50个CSS代码片段
    FE攻城狮
    10-31 2780
    原文：50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. 网站设计者和前端工程师都已经全面的使用 CSS3 properties, 决定这些的是 浏览器支持 和新的特性. 但是还是有些优秀的CSS2代码片段和CSS3一起运行中.  
    15 个对 Web 开发人员有用的代码共享网站
    frontend_frank的博客
    06-21 1777
    1. Dabblet以便于可视化Dabblet将任务和界面分解成不同的部分。您可以对代码及其输出使用不同的预览。Dabblet 不是目前功能最丰富的代码共享网站，但它完成了它的任务。Dabblet 的重点是生产力和更轻松的工作流程管理。它没有大量可供您使用的选项，而是以您认为合适的方式简单地共享代码。2. LiveweaveLiveweave是一个功能极其丰富和强大的代码共享和 CSS3、HTML...
    30个开发人员有用的CSS代码片段整理值得借鉴
    09-25
    在本文中，我们将探讨30个对开发人员非常有用的CSS代码片段，这些代码适用于各种场景，无论是初学者还是经验丰富的Web设计师都能从中受益。 1. **Css Reset**：Eric Meyer的CSS Reset是一个常用的重置样式的方法，...
    30个开发人员有用的CSS代码片段
    11-28
    分享30个开发人员有用的CSS代码片段！
    10个Web前端开发中免费且非常有用CSS代码共2页.pd
    10-29
    这份"10个Web前端开发中免费且非常有用CSS代码共2页.pdf.zip"压缩包文件包含了10个实用且免费的CSS代码片段，这些代码可以帮助开发者提高工作效率，实现各种复杂的网页设计效果。以下是对这些知识点的详细解释： 1....
    30秒CSS中文版您可以在30秒或更短的时间内了解的有用的CSS代码片段
    08-10
    "30秒CSS"项目中包含了一系列简洁、实用的CSS代码片段，涵盖了布局、选择器、过渡、动画、响应式设计等多个方面。每个代码片段都以易于理解的方式呈现，确保读者能在短时间内掌握其用法和作用。例如： 1. **选择器*...
    飞机大战系列 Space War1.0（免费，开源）
    07-14
    飞机大战系列 Space War1.0（免费，开源）
    基于Hadoop的文件词频统计的实现（大数据技术课程设计）
    07-14
    使用Hadoop大数据架构体系中的HDFS、HBase以及Spark软件，完成大数据处理的典型案例：文件词频统计的实现。
    湖科大计算机网络视频笔记，跟着视频系统学了一遍的记录
    最新发布
    07-14
    视频链接：https://www.bilibili.com/video/BV1c4411d7jb/，适用于考研后期查缺补漏和前期确定复习方向、期末考和课前预习。做成PDF形式便于查阅和在iPad上查看。
    matlab下载，表面张力，main.m
    07-14
    matlab下载，表面张力，main.m
    2.4.27.2a.pdf
    07-13
    2.4.27.2a.pdf
    htmlcss代码大全
    07-16
    这些资源可以帮助初学者学习如何编写HTML和CSS代码，并提供一些常见的代码片段和技巧。此外，还可以找到一些网站和社区，供用户共享和讨论HTML和CSS代码。 总之，HTML和CSS代码是创建和设计网页的基础。通过学习和...

    “相关推荐”对你有帮助么？

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值