layui时间线官方文档:https://www.layui.com/doc/element/timeline.html
layui原本时间线样式
代码部分,首先需要引入layui的样式文件
<div style="margin: 20px 50px;">
<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>
中国人民抗日战争胜利72周年
<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>
</div>
进行优化后的效果
页面进行了一下修改,加了一点图标和动画效果。
图标用的是font-awesome.css图标库,font-awesome图标库:http://fontawesome.dashgame.com/
动画效果是用的animate.css,网址:https://daneden.github.io/animate.css/
自己写的css样式代码:
.clear {
clear: both
}
.timeline-box {
background: #fff;
padding: 20px 8px;
position: relative;
opacity: 0.7;
}
.timeline-main {
position: relative;
}
.timeline-main>h1 {
font-size: 18px;
background: #fff;
z-index: 1;
position: relative;
color: #484348;
margin-left: 33%;
margin-left: -moz-calc(35% - 7px);
margin-left: -webkit-calc(35% - 7px);
margin-left: calc(35% - 7px)
}
.timeline-main>h1>i {
padding-right: 10px;
font-size: 20px
}
.timeline-main>h1>span {
display: none
}
.timeline-main h2,
.timeline-main h3 {
width: 31%;
text-align: right
}
.timeline-main h2,
.timeline-main h2>a {
font-size: 16px;
margin: 5px 0;
color: #6bc30d
}
.timeline-main h3,
.timeline-main h3>a {
font-size: 14px;
margin: 2px 0;
color: #ff5722
}
.timeline-month>ul>li {
padding: 10px 0
}
.timeline-month>ul>li .h4 {
display: inline-block;
width: 31%;
text-align: right;
float: left
}
.date {
display: inline-block;
padding: 2px 5px;
color: #484348;
font-size: 15px;
margin-top: 5px
}
.dot-circle {
color: #484348;
width: 8%;
text-align: center;
font-size: 22px;
z-index: 1;
position: relative;
background: #fff;
float: left
}
.content {
max-width: 50%;
float: left;
padding: 20px;
margin-left: 10px;
position: relative;
z-index: 1;
background: #484348;
color: #fff
}
.content img {
width: 100%
}
.content::before {
position: absolute;
left: -20px;
top: 6px;
height: 0;
width: 0;
content: '';
border: 10px solid rgba(255, 255, 255, 0);
border-top: 6px solid rgba(255, 255, 255, 0);
border-bottom: 6px solid rgba(255, 255, 255, 0);
border-right-color: #484348
}
.timeline-line {
position: absolute;
left: 35%;
top: 0;
height: 100%;
width: 2px;
background: #484348;
z-index: 0
}
.timeline-year {
margin: 10px 0
}
@media(min-width:768px) {
.timeline-box {
background: #fff;
padding: 40px 15px;
position: relative;
}
.timeline-main>h1 {
font-size: 26px;
margin-left: 16%;
margin-left: -moz-calc(18% - 13px);
margin-left: -webkit-calc(18% - 13px);
margin-left: calc(18% - 13px)
}
.timeline-main>h1>i {
font-size: 30px
}
.timeline-main>h1>span {
display: inline
}
.timeline-main h2,
.timeline-main h3 {
width: 16%
}
.timeline-main h2,
.timeline-main h2>a {
font-size: 24px
}
.timeline-main h3,
.timeline-main h3>a {
font-size: 20px
}
.timeline-month>ul>li .h4 {
width: 16%
}
.dot-circle {
width: 4%;
font-size: 22px
}
.content {
max-width: 70%
}
.timeline-line {
left: 18%
}
}
@media(min-width:992px) {
.timeline-main>h1 {
font-size: 34px;
background: #fff;
z-index: 1;
position: relative;
color: #484348;
margin-left: 17%;
margin-left: -moz-calc(18% - 16px);
margin-left: -webkit-calc(18% - 16px);
margin-left: calc(18% - 16px)
}
.timeline-main>h1>i {
font-size: 36px
}
.timeline-main h2,
.timeline-main h2>a {
font-size: 30px
}
.timeline-main h3,
.timeline-main h3>a {
font-size: 24px
}
}
HTML部分代码
<div class="timeline-box shadow">
<div class="timeline-main">
<h1><i class="fa fa-clock-o"></i>一念之间</h1>
<div class="timeline-line"></div>
<div class="timeline-year">
<h2><a class="yearToggle">2019 年</a><i class="fa fa-caret-down fa-fw"></i></h2>
<div class="timeline-month">
<ul>
<li>
<div class="h4 animated fadeInLeft">
<p class="date">10月24日</p>
</div>
<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
<div class="content animated fadeInRight">
layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i></div>
<div class="clear"></div>
</li>
<li>
<div class="h4 animated fadeInLeft">
<p class="date">09月06日</p>
</div>
<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
<div class="content animated fadeInRight">
<p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
<div class="clear"></div>
</li>
<li>
<div class="h4 animated fadeInLeft">
<p class="date">08月26日</p>
</div>
<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
<div class="content animated fadeInRight">
中国人民抗日战争胜利72周年
<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
<div class="timeline-year">
<h2><a class="yearToggle">2018 年</a><i class="fa fa-caret-down fa-fw"></i></h2>
<div class="timeline-month">
<ul>
<li>
<div class="h4 animated fadeInLeft">
<p class="date">10月24日</p>
</div>
<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
<div class="content animated fadeInRight">
layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i></div>
<div class="clear"></div>
</li>
<li>
<div class="h4 animated fadeInLeft">
<p class="date">09月06日</p>
</div>
<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
<div class="content animated fadeInRight">
<p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
<div class="clear"></div>
</li>
<li>
<div class="h4 animated fadeInLeft">
<p class="date">08月26日</p>
</div>
<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
<div class="content animated fadeInRight">
中国人民抗日战争胜利72周年
<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
<h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>
</div>
</div>