時光軸 時間軸 效果

要實現相似QQ空間那樣時光軸 時間軸效果web

如圖blog

====================rem

分析：左邊 ul的border-left實現，這樣會出現底部的 餘出的線條，不美觀，it

因此考慮li的border-left實現。 li的padding-bottom撐開上下間距io

h4標題的:before實現圓圈，定位到左邊。file

圓圈的實現使用絕對定位實現，注意下UL和LI實現方式下的，圓圈定位位置。webkit

=========Ul實現邊框=======im

.money-process .process-list {
width: 90%;
height: 100%;
margin: 1.5rem auto 0;
padding-left: 2.5rem;
border-left: 2px #AAD8FC solid;
}樣式

.process-list li h4:before {
content: '';
display: block;
width: 2.2rem;
height: 2.2rem;
line-height: 2.2rem;
border: 2px #52AFF9 solid;
border-radius: 50%;
text-align: center;
vertical-align: middle;
font-size: 1.2rem;
position: absolute;
left: -2.5rem;
top:-5px;
margin-left: -1.2rem;/*負值自身寬度一半，還有邊框，因此也得計算添加邊框寬度一半*/
background: #fff;
}margin

=========================

=================LI實現邊框=====================

.process-list li {
position: relative;
padding-bottom: 2.5rem;
border-left: 2px #AAD8FC solid;
padding-left: 2.5rem;
}

.process-list li h4:before {
content: '';
display: block;
width: 2.2rem;
height: 2.2rem;
line-height: 1.8rem;
/*由於默認盒模型,公共樣式裏面設置了:before{box-sizing: border-box;}，因此(22px-2*2px)是行高*/
border: 2px #52AFF9 solid;
-webkit-border-radius: 1.1rem;
border-radius: 1.1rem;
text-align: center;
vertical-align: middle;
font-size: 1.2rem;
position: absolute;
left: 0;
top: -6px;
margin-left: -1.2rem;
/*負值自身寬度一半，還有邊框，因此也得計算添加邊框寬度一半*/
background: #fff;
}

================================================

UL實現鏈接：http://files.cnblogs.com/files/leshao/%E6%97%B6%E9%97%B4%E8%BD%B4-UL.rar

LI實現連接：http://files.cnblogs.com/files/leshao/%E6%97%B6%E9%97%B4%E8%BD%B4-UL.rar

多謝醬油 ，簡，一棵樹，993