常用样式集

常用样式集

1 时间线-横向

<div class="container">
    <ul class="time-horizontal">
        <li><b></b>成立</li>
        <li><b></b>合作</li>
        <li><b></b>发展</li>
        <li><b></b>共赢</li>
    </ul>
</div>

/*横向时间轴*/
.time-horizontal {
    list-style-type: none;
    padding: 0px;
    margin: 100px auto;
}

.time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 100px;
    padding-top: 20px;
    border-top: 2px solid #ccc;
}

.time-horizontal li b:before {
    content: '';
    position: absolute;
    top: -20px;
    width: 30px;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 17px;
    background: #ccc;
}

.time-horizontal .active{
    border-top: 2px solid #409eff;
}

.time-horizontal .active b:before {
    content: '';
    border: 2px solid #409eff;
    background: #409eff;
}

2 水平垂直居中

<div class="wrapper">         
    <div class="content"></div>     
</div>    

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ddd;
}
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
}