分享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.      margin0
  11.      padding0
  12.      border0
  13.      outline0
  14.      font-size100%
  15.      vertical-alignbaseline
  16.      backgroundtransparent
  17.  } 
  18.   
  19.  body { 
  20.      line-height1
  21.  } 
  22.   
  23.  ol, ul { 
  24.      list-stylenone
  25.  } 
  26.   
  27.  blockquote, q { 
  28.      quotesnone
  29.  } 
  30.   
  31.  blockquote:before, blockquote:after, 
  32.  q:before, q:after { 
  33.      content''
  34.      contentnone
  35.  } 
  36.   
  37.  /* remember to define focus styles! */ 
  38.  :focus { 
  39.      outline0
  40.  } 
  41.   
  42.  /* remember to highlight inserts somehow! */ 
  43.  ins { 
  44.      text-decorationnone
  45.  } 
  46.   
  47.  del { 
  48.      text-decorationline-through
  49.  } 
  50.   
  51.  /* tables still need 'cellspacing="0"' in the markup */ 
  52.  table { 
  53.      border-collapsecollapse
  54.      border-spacing0
  55.  } 


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


  1. /* external links */ 
  2.  a[href^="http://"]{ 
  3.      padding-right20px
  4.      backgroundurl(external.gif) no-repeat center right
  5.  } 
  6.   
  7.  /* emails */ 
  8.  a[href^="mailto:"]{ 
  9.      padding-right20px
  10.      backgroundurl(email.png) no-repeat center right
  11.  } 
  12.   
  13.  /* pdfs */ 
  14.  a[href$=".pdf"]{ 
  15.      padding-right20px
  16.      backgroundurl(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.      visibilityhidden
  3.      displayblock
  4.      font-size0
  5.      content" "
  6.      clearboth
  7.      height0
  8.  } 
  9.   
  10.  .clearfix { display: inline-block; } 
  11.   
  12.  /* start commented backslash hack \*/ 
  13.  * html .clearfix { height1%; } 
  14.  .clearfix { displayblock; } 
  15.  /* close commented backslash hack */ 

固定宽度且居中


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

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 */ 

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


  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.      srcurl('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.          width200px
  3.          min-height250px
  4.          border1px solid #000
  5.          display: -moz-inline-stack; 
  6.          display: inline-block
  7.          vertical-aligntop
  8.          margin5px
  9.          zoom: 1
  10.          *displayinline
  11.          _height250px
  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.     width100%
  3.     margin0
  4.     floatnone


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.    backgroundurl(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


多列


  1. #columns-3 { 
  2.     text-alignjustify
  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


突出显示文本样式


  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#cccfont-style:italic } 
  2. :-moz-placeholder           { color#cccfont-style:italic } 


CSS3 3D文字效果


  1. h1 { 
  2.    text-shadow0 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-decorationnone
  4.  } 
  5.     
  6.  a:hover { 
  7.    colorred
  8.    positionrelative
  9.  } 
  10.     
  11.  a[title]:hover:after { 
  12.    contentattr(title); 
  13.    padding4px 8px
  14.    color#333
  15.    positionabsolute
  16.    left: 0
  17.    top: 100%
  18.    white-spacenowrap
  19.    z-index20px
  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-width1024px) and (max-height768px) { 
  8.    body {    
  9.      -moz-background-size1024px 768px
  10.      background-size1024px 768px
  11.    } 
  12.  } 


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


  1. .page-curl { 
  2.  positionrelative
  3.  background#ffffff
  4.  background: -moz-linear-gradient(top#ffffff 0%#e5e5e5 100%); 
  5.  background: -webkit-gradient(linear, left topleft 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(0000.3); 
  8.  -moz-box-shadow: 0px 0px 3px rgba(0000.3); } 
  9.    
  10.  .page-curl:after { 
  11.  z-index-1
  12.  positionabsolute
  13.  backgroundtransparent
  14.  width70%
  15.  height55%
  16.  content''
  17.  right: 10px
  18.  bottom: 10px
  19.  -webkit-transform: skew(15deg) rotate(5deg); 
  20.  -webkit-box-shadow: 8px 12px 10px rgba(0000.3); 
  21.  -moz-transform: skew(15deg) rotate(5deg); 
  22.  -moz-box-shadow: 8px 12px 10px rgba(0000.3); } 
  23.    
  24.  .page-curl:before { 
  25.  z-index-2
  26.  positionabsolute
  27.  backgroundtransparent
  28.  width70%
  29.  height55%
  30.  content''
  31.  left: 10px
  32.  bottom: 10px
  33.  -webkit-transform: skew(-15deg) rotate(-5deg); 
  34.  -webkit-box-shadow: -8px 12px 10px rgba(0000.3); 
  35.  -moz-transform: skew(-15deg) rotate(-5deg); 
  36.  -moz-box-shadow: -8px 12px 10px rgba(0000.3); } 


CSS3模糊文字


  1. .blur { 
  2.    colortransparent
  3.    text-shadow0 0 5px rgba(0,0,0,0.5); 


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


  1. ul li 
  2.  { 
  3.    floatright
  4.    margin-right10px
  5.    *displayinline/*Target IE7 and bellow*/ 
  6.    _displayinline/*Target IE6 and bellow*/ 
  7.  } 
  8.  /* This example fixes the double right margin bug */ 


链接伪类的顺序


  1. a:link {colorblue;} 
  2. a:visited {colorpurple;} 
  3. a:hover {colorred;} 
  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"




标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2