常用的CSS代码片段

图像在水平或者垂直方向的绝对定位
 img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
---------------------------------------------------------
 如何用css实现小三角形符号

  <div class="arrow-up"></div>
  <div class="arrow-down"></div>
  <div class="arrow-left"></div> 
 <div class="arrow-right"></div> 
  css代码
.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;  
    border-top: 20px solid #f00;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;   
    border-left: 60px solid green;
}
.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
} 
------------------------------------------------------
 Clearfix
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */ 
-----------------------------------------------------------
 隐藏和文本文字缩进
h1 {
    text-indent:-9999px;
    margin:0 auto;
    width:400px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
} 
 上面CSS代码设置text-indent 为负值，正好文字移到了左边，可以实现部分文字隐藏

-----------------------------------------------------------

 根据不同的文件类型，展示不同的链接，看下面的代码
/* 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;
}
此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段，你告诉用户是否它一个外部链接、 电子邮件、 pdf、或者其他图标

-----------------------------------------------------
边框圆角
 .round{
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

-----------------------------------------------------------
 CSS透明度
.transparent { filter:alpha(opacity=50); -moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5; } 
----------------------------------------------

 垂直居中

 .container {
  min-height: 10em;
  display: table-cell;
 vertical-align: middle;}

--------------------------------------------------------------
 固定页脚位置
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:32px;
   width:100%;
   background:#333;
}
/* IE 6 */
* html #footer {
   position:absolute;
   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');
}
-----------------------------------------------------------------
  图片预加载功能
div.loader{
  background:url(images/hover.png) no-repeat;
  background:url(images/hover2.png) no-repeat;
  background:url(images/hover2.png) no-repeat;
 margin-left:-10000px;
}