經常使用css代碼

.etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} /*省略號*/ 

.wrap{word-wrap:break-word;}/*強制換行*/ 

.nowrap{white-space:nowrap;}/*禁止換行*/

.shadow1{
-moz-box-shadow:0px 2px 5px #000;
-webkit-box-shadow:0px 2px 5px #000;
box-shadow:0px 2px 5px #000;
}/*外陰影*/ .shadow2{
-moz-box-shadow:0px 2px 5px #000 inset;
-webkit-box-shadow:0px 2px 5px #000 inset;
box-shadow:0px 2px 5px #000 inset;
}/*內陰影*/ .min-height{
background:#ccc;min-height:100px;
height:auto !important;
height:100px;
overflow:visible;}/*min-height最小高度的實現（兼容IE六、IE七、FF）*/
<li>列表的奇數行和偶數行變色、<table>的行變色。
li:nth-child(even){background:#dddddd;}/*偶數行*/
li:nth-child(odd){background:#f0f0f0;}/*奇數行*/
li:nth-child(2){background:#ff9900;}/*第二行*/
li:nth-child(3n+1){background:#cccccc;}/*第一、四、7…行*/
tr:nth-child(2){background:#ff99ff;}/*表格的第二行*/
tr :nth-child(2){background:#ff9900;}/*表格的第二列*/
英文字母用css控制大小寫

   
   
   
   
   


    
    
    
    
    
<style type="text/css">
h1{text-transform:uppercase;}
h2{text-transform:lowercase;}
</style>
<h1>abcdefghijklmnopqrstuvwxyz 英文字母會變成大寫</h2>
<h2>ABCDEFGHIJKLMNOPQRSTUVWXYZ 英文字母會變成小寫</h2>

   
   
   
   
   
//鼠標滑過圖片放大
  
  
  
  
  

   
   
   
   
   
 
    .article strong{ 
     overflow: 
    hidden; 
     width: 
     200px; 
     height: 
     200px; 
     display: 
     block;} 
    
.article img{ 
    
      display: 
    block; 
     width: 
    100%; 
     height: 
    100%; 
     
       -webkit-transition: 
    all linear 0.4s; 
     
       -moz-transition: 
    all linear 0.4s; 
     
       transition: 
    all linear 0.4s; 
    
} 
    
.article:hover img{ 
    
    -webkit-transform: 
    scale(1.1); 
     
    -moz-transform: 
    scale(1.1); 
    
    transform: 
    scale(1.1); 
    
} 
   
   
   
   
   
   
.article{display: block;}
   
   
   
   
   

   
   
   
   
   
 
  
  
  
  
  

  
  
  
  
  

   
   
   
   
   
 
    //圖片垂直居中1

<style type="text/css">
.img-middle{ 
    
    width: 
    500px; 
    height: 
    300px; 
    
    border: 
    1px solid #000; 
    
    text-align: 
    center; 
    
} 
    
.img-middle:after { 
    
    content: 
     ''; 
    display: 
    inline-block; 
    width: 
    0px; 
    height: 
    100%; 
    
    vertical-align: 
    middle; 
    overflow: 
     hidden; 
    
} 
    
.img-middle > img{ 
    vertical-align: 
    middle;} 
     
</style>
<div class="img-middle"><img src="http://img1.3lian.com/img13/c3/87/91.jpg"/></div> 
   
  
  
  
  
  


 
 
 
 
 

 
 
 
 
 

  
  
  
  
  
 
   //其餘網站圖片居中2
<style type="text/css">
.box { 
   
     
   /* 
   非IE的主流瀏覽器識別的垂直居中的方法 
   */ 
   
    display: 
    table-cell; 
   
    vertical-align: 
   middle; 
   
     
   /* 
   設置水平居中 
   */ 
   
    text-align: 
   center; 
   
     
   /* 
    針對IE的Hack  
   */ 
   
    *display: 
    block; 
   
    *font-size: 
    175px; 
   /* 
   約爲高度的0.873，200*0.873 約爲175 
   */ 
   
    
   /* 
    *font-family:Arial;防止非utf-8引發的hack失效問題，如gbk編碼 
   */ 
   
    width: 
   200px; 
   
    height: 
   600px; 
   
    border: 
    1px solid #000; 
   
} 
   
.box img { 
   
    vertical-align: 
   middle; 
   
} 
   
</style>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div> 
  
 
 
 
 
 
iconfont 圖標庫的使用
第一步引入，第二步定義iconfont樣式：
 
 
 
 
 

  
  
  
  
  
 
    
  
  
  
  
  
  
/*一搬來講設計會給到咱們圖標，用AI新建層保存成svg格式的，而後在用線上工具生成字體代碼*/ 
  
  
  
  
  
/*第一步：使用font-face聲明字體*/
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/*第二步：定義使用iconfont的樣式*/
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
  
  
  
  
  
<style> 
  
  
  
  
  
.icon1:before{content:"\e600";color:red;} 
  
  
  
  
  
.icon2:before{content:"\e601"} 
  
  
  
  
  
.icon3:before{content:"\e602"} 
  
  
  
  
  
</style>
  
  
  
  
  
 <i class="icon iconfont icon1"></i>