效果图
image.png
image.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.t-bd{
width: 200px;
height: 400px;
padding-left: 100px;
/*总共的宽度是300px*/
}
.t-sec{
height: 400px;
/*如果想要时间轴的长度跟着内容变的话，height可以不写，也可以设置成auto*/
padding-left: 20px;
border-left: 1px solid #eee;
}
.t-sec li{
position: relative;
margin-bottom: 10px;
}
.t-sec li i{
display: block;
width: 16px;
height: 16px;
background: #eee;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
position: absolute;
top: 2px;
left: -28px;
}
.t-sec li span{
width: 80px;
position: absolute;
top: 0;
left: -110px;
}
</style>
</head>
<body>
<!--最外层容器，左内边距padding-left为100px-->
<div class="t-bd">
<!--内层容器，左侧边框为时间轴线,如果设置为height：auto，那么就能随着内容的高度改变-->
<ul class="t-sec">
<li><i><!--圆点--></i><span>2018/03/16</span>这只是测试内容，没有特别的含义。</li>
<li><i></i><span>2018/03/16</span>这只是测试内容，没有特别的含义。</li>
<li><i></i><span>2018/03/16</span>这只是测试内容</li>
<li><i></i><span>2018/03/16</span>这只是测试内容，没有特别的含义。</li>
<li><i></i><span>2018/03/16</span>这只是测试内容，没有特别的含义。这只是测试内容，没有特别的含义。</li>
<li><i></i><span>2018/03/16</span>这只是测试内容，没有特别的含义。</li>
<li><i></i><span>2018/03/16</span>这只是测试内容，没有特别的含义。</li>
</ul>
</div>
</body>
</html>
这应该比较好懂了。如果每个点跟一段边框线的写法可能更不容易理解。
网友评论