这里参考 https://www.layui.com/demo/timeline.html
重点在于:最后一条竖线怎么删除?
竖线用伪类来实现
本来我想着伪类选最后一个元素然后让他不要竖线 ,发现不起作用,于是我就换了思路,直接让他宽度是0 就解决了
.layui-timeline-item:last-child::before {
content: '';
position: absolute;
left: 5px;
top: 0;
z-index: 0;
width: 0;
height: 100%;
}
.layui-timeline-item::before {
content: '';
position: absolute;
left: 5px;
top: 0;
z-index: 0;
width: 1px;
height: 100%;
}
源码:
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,
li {
/*做时间轴的线*/
margin: 0;
padding: 0;
}
.layui-timeline {
padding-left: 5px;
}
.layui-timeline-item {
position: relative;
padding-bottom: 20px;
}
li {
list-style: none;
}
.layui-timeline-item:first-child::before {
display: block;
}
.layui-timeline-item:last-child::before {
content: '';
position: absolute;
left: 5px;
top: 0;
z-index: 0;
width: 0;
height: 100%;
}
.layui-timeline-item::before {
content: '';
position: absolute;
left: 5px;
top: 0;
z-index: 0;
width: 1px;
height: 100%;
}
.layui-timeline-item::before,
hr {
background-color: #e6e6e6;
}
.layui-timeline-axis {
position: absolute;
left: -5px;
top: 0;
z-index: 10;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
color: #5FB878;
border-radius: 50%;
text-align: center;
cursor: pointer;
}
.layui-icon {
font-family: layui-icon !important;
font-size: 16px;
font-style: normal;
}
.layui-timeline-content {
padding-left: 25px;
}
.layui-text {
line-height: 22px;
font-size: 14px;
color: #666;
}
.layui-timeline-title {
position: relative;
margin-bottom: 10px;
}
</style>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>
<body>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想,他有<em>“致君尧舜上,再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有:</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利日
<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
</body>
</html>
源码:
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,
li {
/*做时间轴的线*/
margin: 0;
padding: 0;
}
.layui-timeline {
padding-left: 50%;
padding-top:20px
}
.layui-timeline-item {
position: relative;
padding-bottom: 20px;
margin-top:-12px;
}
li {
list-style: none;
}
.layui-timeline-item:first-child::before {
display: block;
}
.layui-timeline-item:last-child::before {
content: '';
position: absolute;
left: 5px;
top: 0;
z-index: 0;
width: 0;
}
.layui-timeline-item::before {
content: '';
position: absolute;
/* left: 5px; */
top: 0;
z-index: 0;
width: 1px;
height: 100%;
}
.layui-timeline-item::before,
hr {
background-color: #569fff;
}
.layui-timeline-axis {
position: absolute;
left: -5px;
top: 0;
z-index: 10;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
color: #5FB878;
border-radius: 50%;
text-align: center;
cursor: pointer;
}
.layui-icon {
font-family: layui-icon !important;
font-size: 16px;
font-style: normal;
}
.layui-timeline-content {
padding-left: 25px;
}
.layui-text {
line-height: 22px;
font-size: 14px;
color: #666;
top:-10px;
}
.layui-timeline-title {
position: relative;
margin-bottom: 10px;
}
.circle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #569fff;
}
.etime-first {
top: 45%;
left: -100px;
position: absolute;
}
.time-first {
position: absolute;
left: -60px;
}
</style>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>
<body>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<div class="relative">
<span class="time-first">06:40</span>
<span class="etime-first">3小时15分钟</span>
</div>
<i class="layui-icon layui-timeline-axis circle"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">江北国际机场2A</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<div class="relative">
<span class="time-first">06:40</span>
<span class="etime-first">3小时15分钟</span>
</div>
<i class="layui-icon layui-timeline-axis circle"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想,他有<em>“致君尧舜上,再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有:</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<div class="relative">
<span class="time-first">06:40</span>
<span class="etime-first">3小时15分钟</span>
</div>
<i class="layui-icon layui-timeline-axis circle"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利日
<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis circle"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
</body>
</html>