LayUI时间线优化

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">&#xe63f;</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">&#xe63f;</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">&#xe63f;</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">&#xe63f;</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>

一枕江风

发布了112 篇原创文章 · 获赞 223 · 访问量 11万+

私信关注

猜你喜欢