实用的CSS代码片断有哪些

实用的CSS代码片断有哪些，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站是一家专注于成都做网站、成都网站建设与策划设计,南涧网站建设哪家好?创新互联建站做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:南涧等地区。南涧做网站价格咨询:18980820575

CSS是大家在web开发中常用的语言，但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。

幸运的是，网络上大家可以找到很多不错的CSS代码片断，能够有效地帮助大家解决一般性的或者设计问题。这里我们收集了30个CSS的代码片断帮助大家调试。

代码

1. Chris Poteet’s CSS浏览器重置代码

这个代码能够有效地帮助大家解决跨浏览器问题。虽然不支持IE6，但是对于这种美国占有率低于1%的浏览器，大家大可以放弃。

/*   Reset Default Browser Styles  - Place first in the listing of external style sheets for cascading.  - Be sure to explicitly set margin/padding styles.  - Styles are not reset that have to do with display (block, inline) are not reset.   By: Chris Poteet & various influences   */  * {  vertical-align: baseline;  font-family: inherit;  font-style: inherit;  font-size: 100%;  border: none;  padding: 0;  margin: 0;  }  body {  padding: 5px;  }  h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {  margin: 20px 0;  }  li, dd, blockquote {  margin-left: 40px;  }  dt {  font-weight: bold;  }  table {  border-collapse: collapse;  border-spacing: 0;  }

2. Eric Meyer’s CSS Reset

Eric的CSS代码片断可能是最受欢迎的代码之一。甚至支持Blueprint CSS Framework.

/* http://meyerweb.com/eric/tools/css/reset/     v2.0 | 20110126     License: none (public domain)  */  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 {      margin: 0;      padding: 0;      border: 0;      font-size: 100%;      font: inherit;      vertical-align: baseline;  }  /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {      display: block;  }  body {      line-height: 1;  }  ol, ul {      list-style: none;  }  blockquote, q {      quotes: none;  }  blockquote:before, blockquote:after,  q:before, q:after {      content: '';      content: none;  }  table {      border-collapse: collapse;      border-spacing: 0;  }

3. How to Create Multiple Borders in CSS3

非常酷的方式创建box阴影，允许你创建多个边框

box-shadow:      0 0 0 2px #000,      0 0 0 3px #999,      0 0 0 9px #fa0,      0 0 0 10px #666,      0 0 0 16px #fd0,      0 0 0 18px #000;

4. Tucked Corners

CSS代码允许你创建类似非常酷的Gravatar首页效果

div.tucked-corners {          background: #f6f6f6;          height: 380px;          margin: 50px auto;          padding: 10px;          position: relative;          width: 580px;          -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);             -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);                  box-shadow: 0 1px 7px hsla(0,0%,0%,.2);      }      span.tucked-corners {          background: #c4453c;          display: block;          height: 380px;          position: relative;          width: 580px;          -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);             -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);                  box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);      }       /* Top Corner Effect */      .top-corners:after,      .top-corners:before {          background: #e6e6e6;          content: '';          height: 50px;          position: absolute;          top: -25px;          width: 100px;          z-index: 10;          -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);             -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);                  box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);      }      .top-corners:after {          left: -50px;          -webkit-transform: rotate(-45deg);             -moz-transform: rotate(-45deg);              -ms-transform: rotate(-45deg);               -o-transform: rotate(-45deg);                  transform: rotate(-45deg);      }      .top-corners:before {          right: -50px;          -webkit-transform: rotate(45deg);             -moz-transform: rotate(45deg);              -ms-transform: rotate(45deg);               -o-transform: rotate(45deg);                  transform: rotate(45deg);      }       /* Bottom Corner Effect */      .bottom-corners:after,      .bottom-corners:before {          background: #e6e6e6;          content: '';          height: 50px;          position: absolute;          bottom: -25px;          width: 100px;          -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);             -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);                  box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);      }      .bottom-corners:after {          left: -50px;          -webkit-transform: rotate(-135deg);             -moz-transform: rotate(-135deg);              -ms-transform: rotate(-135deg);               -o-transform: rotate(-135deg);                  transform: rotate(-135deg);      }      .bottom-corners:before {          right: -50px;          -webkit-transform: rotate(135deg);             -moz-transform: rotate(135deg);              -ms-transform: rotate(135deg);               -o-transform: rotate(135deg);                  transform: rotate(135deg);      }

5. iPad-Specific CSS

修改一般的ipad屏幕布局

@media only screen and (device-width: 768px) {    /* For general iPad layouts */ }   @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {    /* For portrait layouts only */ }   @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {    /* For landscape layouts only */ }

6. Style links depending on file format

修改外部链接，email链接，pdf链接的样式

/* external links */ a[href^="http://"]{      padding-right: 20px;      background: url(external.gif) no-repeat center right;  }   /* emails */  a[href^="mailto:"]{  padding-right: 20px;   background: url(email.png) no-repeat center right;   }   /* pdfs */  a[href$=".pdf"]{  padding-right: 20px;  background: url(pdf.png) no-repeat center right;

7. Drop Caps

非常棒的跨浏览器代码帮助你使得每段文字的第一个字母更加

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

明显CSS3也可以，但是不支持IE9

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

8. CSS Sticky Footer

CSS实现的置顶sticky页脚效果，支持所有的主流浏览器包括chrome和IE8

CSS：

/*  Sticky Footer Solution  by Steve Hatcher    http://stever.ca   http://www.cssstickyfooter.com   */  * {margin:0;padding:0;}    /* must declare 0 margins on everything, also for main layout components use padding, not  vertical margins (top and bottom) to add spacing, else those margins get added to total height  and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */  html, body {height: 100%;}   #wrap {min-height: 100%;}   #main {overflow:auto;      padding-bottom: 150px;}  /* must be same height as the footer */  #footer {position: relative;      margin-top: -150px; /* negative value of footer height */     height: 150px;      clear:both;}    /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:"";  height:100%;  float:left;  width:0;  margin-top:-32767px;/* thank you Erik J - negate effect of float*/ }   /* IMPORTANT   You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.      */

HTML：