css收集整理

/**
 * Created by yangyurong on 2016.12.06
 * description:整理项目中常用的样式
*/
@charset "utf-8";
/* reset start */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, lengend, button, input, textarea,th, td {margin: 0;padding: 0;}
body,button, input, select, textarea {font: 14px/1 "Microsoft Yahei UI", "Microsoft Yahei","\5fae\8f6f\96c5\9ed1",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
h1 { font-size: 18px;}
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
a { text-decoration: none; cursor: pointer;}
a:hover { text-decoration: underline; }
abbr[title], acronym[title] {border-bottom: 1px dotted;cursor: help;}
q:before, q:after { content: ''; }
legend { color: #000; }
fieldset, img { border: none; }
button, input, select, textarea {font-size: 100%;}
table {border-collapse: collapse;border-spacing: 0;}
hr {border: none;height: 1px;}
i{font-style: normal;}


/*自定义字体*/
@font-face {
    font-family: 'HelveticaNeue-BoldCond';
    src: url('../font/HelveticaNeue-BoldCond.eot');
    src: url('../font/HelveticaNeue-BoldCond.woff2') format('woff2'),
    url('../font/HelveticaNeue-BoldCond.woff') format('woff'),
    url('../font/HelveticaNeue-BoldCond.ttf') format('truetype'),
    url('../font/HelveticaNeue-BoldCond.svg#HelveticaNeue-BoldCond') format('svg'),
    url('../font/HelveticaNeue-BoldCond.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
.class-name{
    font-family: "HelveticaNeue-BoldCond","Microsoft Yahei","黑体";
}


/*浮动*/
.lf{
    float: left;
}
.rf{
    float: right;
}
.clearfix{
    zoom: 1;
}
.clearfix:after{
    display: block;
    content: "";
    clear: both;
}


/*设置页面文本选中的背景颜色*/
::selection{//用之前先caniuse一下，看看是否满足你的兼容需求
    background: #00ada7;
    color:#ffffff;
}


/*单行文本截断省略*/
.overflow{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/*边框*/
.border-t{
    border-top: 1px solid #ddd;
}
.border-b{
    border-top: 1px solid #ddd;
}
.border-l{
    border-top: 1px solid #ddd;
}
.border-r{
    border-top: 1px solid #ddd;
}


/*透明效果*/
.opacity{
    opacity: 0.6;/*IE9以上*/
    filter: alpha(opacity=60);
}


/*雪碧图icon*/
.icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(img/icon-1x.png);
    background-image: -webkit-image-set(url(img/icon-1x.png) 1x, url(img/icon-2x.png) 2x);/*ratio屏显示两倍图标*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.icon-one{
    background-position: 0 0;
}


/*icon垂直居中*/
.icon-vertical-middle{
    position: relative;/*使用vertical-align: middle;可能会有一个像素的误差*/
    bottom: 1px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}


/*行内元素之间消除间距*/
.parent{
    font-size: 0;
    word-spacing:-1px;
}
.children{
    font-size: 12px;
    letter-spacing: normal;/* 设置字母、字间距为0 */
    word-spacing: normal; /* 设置单词、字段间距为0 */
}


/*水平垂直居中*/
//method 1 相对定位
.parent{
    position: relative;
    width: 400px;
    height: 400px;
}
.children{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;/*负的自身高度的一半*/
    margin-left: -100px;/*负的自身宽度的一半*/
    width: 200px;
    height: 200px;
}
//method 2
.parent{
    position: relative;
    width: 400px;
    height: 400px;
}
.children{
    position: absolute;
    width: 200px;
    height: 200px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


/*不固定高度水平垂直居中*/
//method 1 适用于手机
.box{
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}
//method 2 ie7及其以下浏览器不支持display: table;
.parent{
    display: table;
    text-align: center;
}
.children{
    display: table-cell;
    vertical-align: middle;
}
//method 3 只针对宽高小于parent的图片
.parent{
    position: relative;
    width: 400px;
    height: 400px;
}
.children-img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
//method 4 图片(宽高可大于parent)
.parent{
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
}
.children-img{
    position: absolute;
    margin: auto;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
}


/*页面内容不足以铺满整个屏幕，footer居底显示*/
//method 1
/*<div class="page">  
    主要页面  
</div>  
<footer>底部</footer>*/
html,body{  
    height: 100%;  
    margin: 0;
    padding: 0;
}  
.page{ 
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,ie7以下包括ie7不支持这个属性*/  
    min-height: 100%;
    padding-bottom: 300px;
}  
footer{
    height: 300px;
    margin-top: -300px;
    z-index: 2px;  
    opacity: 0.5;
}
//method 2
/*<div class="page-container">  
    <div class="page-main">  
        主要页面   
    </div>  
    <footer>底部</footer>  
</div>*/ 
html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-container{ 
    position: relative;
    min-height: 100%;
}
.page-main{
    padding-bottom: 300px; 
}
footer{ 
    position: absolute;
    left: 0;
    bottom: 0;  
    height: 300px;  
}














/*自定义动画*/
/*
*适用于手机
*心跳效果
*/
.animated{
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform:scale(1)
    }
    50% {
        -webkit-transform:scale(1.5)
    }
    95% {
        -webkit-transform:scale(0.9)
    }
    100% {
        -webkit-transform:scale(1)
    }
}
@keyframes pulse {
    0% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.5)
    }
    95% {
        transform:scale(0.9)
    }
    100% {
        transform:scale(1)
    }
}
.pulse {
    -webkit-animation-name:pulse;
    animation-name:pulse;
}