常用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最小高度的实现（兼容IE6、IE7、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;}/*第1、4、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>