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

在今天的文章中分享我收藏的DIV+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^="//"]{ 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 screen10 and (min-width : 321px) {11 /* Styles */12 }13  14 /* Smartphones (portrait) ----------- */15 @media only screen16 and (max-width : 320px) {17 /* Styles */18 }19  20 /* iPads (portrait and landscape) ----------- */21 @media only screen22 and (min-device-width : 768px)23 and (max-device-width : 1024px) {24 /* Styles */25 }26  27 /* iPads (landscape) ----------- */28 @media only screen29 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 screen37 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 screen45 and (min-width : 1224px) {46 /* Styles */47 }48  49 /* Large screens ----------- */50 @media only screen51 and (min-width : 1824px) {52 /* Styles */53 }54  55 /* iPhone 4 ----------- */56 @media57 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="//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(//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 li2 {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">

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！