最近給移動端寫接口，寫完了才告訴我其中兩個頁面是H5的，需要我這邊來做。本着“我是公司一塊磚，哪裡需要哪裡搬”的原則，讓做就做。結果一看原型，還有時間軸效果。第一反應：找度娘，找github，找oschina~~~确實也有不少的時間軸插件，但是總覺得都太花哨了，大道至簡，自己來一個吧。
Talk is cheap,show me the code!
先上最終效果圖
簡單到爆炸的頁面
準備工作
兩張圖檔，1：小圓點，2：左邊的一根豎線
開始撸代碼
html代碼
<body>
<div>
<h3>時間軸</h3>
<section class="timeline" style="">
<div class="timeline-block">
<div class="ctimeline-img cd-picture">
<img src="/images/point.png" alt="Picture">
</div>
<span class="item dot-top"></span>
<div class="r-info">
<div>
<text style="margin: -21px">我的2017</text>
</div>
<div class="msgBox">
<div>吃飯睡覺寫代碼</div>
<span class="cd-date">2017-12-16 08:08:08</span>
</div>
</div>
</div>
<div class="timeline-block">
<div class="ctimeline-img cd-picture">
<img src="/images/point.png" alt="Picture">
</div>
<span class="item dot-top"></span>
<div class="r-info">
<div>
<text style="margin: -21px">我的2016</text>
</div>
<div class="msgBox">
<div>吃飯睡覺寫代碼</div>
<span class="cd-date">2016-12-16 08:08:08</span>
</div>
</div>
</div>
</section>
</div>
</body>
css樣式
body {
text-align: center;
font-size: 14px;
line-height: 1.5rem;
margin: auto;
}
.timeline {
position: relative;
text-align: left;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 2px;
background: url("/images/v-line.png");
}
.ctimeline-img {
position: relative;
left: 12px;
top: 15px;
width: 13px;
height: 13px;
}
.cd-date {
font-size: 12px;
color: #cccccc;
}
.item {
float: left;
clear: both;
margin-bottom: 23px;
}
/* 向上的箭頭 */
.dot-top {
position: relative;
top: 21px;
left: 3rem;
font-size: 0;
line-height: 0;
border: 10px dashed #eeeeee;
border-top-width: 0;
border-right-color: transparent;
border-bottom-style: solid;
border-left-color: transparent;
}
.msgBox {
border: 2px solid #eeeeee;
width: 100%;
padding: 2%;
margin-top: 2%;
}
.r-info {
position: relative;
top: 0px;
left: 30px;
width: 80%
}
其他說明
1、這是用的div效果，同時也可以用border-image的氣泡效果實作
2、以上代碼隻是手機端的，沒有做适配，是以無法放到PC端使用
3、技術是為業務服務的，當出現了PC端的需求再做PC端的實作吧
![Android中Webview使用經驗總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)