1. 网页自动居中

HTML

<div id="wrap">

</div><!-- end wrap -->

CSS

.wrap{width:960px;magin:0 auto;}

2. 固定的页脚

固定的页脚(使 footer 用於位于页脚，而不通过绝对定位的方式)

HTML

<div class="wrap">
<div id="main" class="clearfix" />
</div>
<div class="footer" >
</div>

CSS

* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { 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;}    /* CLEAR FIX*/
.clearfix:after {content: ".";   display: block;   height: 0;  clear: both;  visibility:hidden;}
.clearfix {display: inline-block;}  /* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}  /* End hide from IE-mac */

我在一些网站上常看到这样的功能，实现方法不止一种，但是相信你会对该中方法感到高兴的.

3. 浏览器兼容之 Mini-Height 设置

CSS

.element { min-height:600px; height:auto !important; height:600px; }

4. box 阴影

BOX Shadow(CSS3)

CSS

.element{box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666;}

可以看到，这三个 CSS3 属性是因为浏览器兼容性，box-shadow(Safari),-moz-box-shadow(firefox),-webkit-box-shadow(google),前三个属性值代表X,Y,Z 之偏移量，最后代表阴影颜色。

5. 文本阴影

CSS

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

6. Box 透明设置

CSS

 .transparent {  

 /* Modern Browsers */ opacity: 0.7;  

 /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 /* IE 5-7 */ filter: alpha(opacity=70);
 /* Netscape */ -moz-opacity: 0.7;  

/* Safari 1 */ -khtml-opacity: 0.7;  

 }

7. 设置默认网站 CSS 格式

CSS

  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, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
 }
 /* remember to define focus styles! */
 :focus {
  outline: 0;
 }
 body {
  line-height: 1;
  color: black;
  background: white;
 }
 ol, ul {
  list-style: none;
 }
 /* tables still need 'cellspacing="0"' in the markup */
 table {
  border-collapse: separate;
  border-spacing: 0;
 }
 caption, th, td {
  text-align: left;
  font-weight: normal;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

8. 移除点型外框

CSS

a, a:active { outline: none; }

9. 圆角效果

CSS

    .element {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px; /* future proofing */
    }
    .element-top-left-corner {
     -moz-border-radius-topleft: 5px;
     -webkit-border-top-left-radius: 5px;
    }

10. 重写 CSS 属性

CSS

    .override {
     font-size: 14px !important;
    }

总的来讲，这些都是网站开发时候常用到的 CSS 功能，希望能够给大家带来帮助 -_-！