LayUI时间线优化

分手后的思念是犯贱 2023-05-29 11:48 17阅读 0赞

layui时间线官方文档：[https://www.layui.com/doc/element/timeline.html][https_www.layui.com_doc_element_timeline.html]

**layui原本时间线样式**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

代码部分，首先需要引入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>

**进行优化后的效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

页面进行了一下修改，加了一点图标和动画效果。

图标用的是font-awesome.css图标库，font-awesome图标库：[http://fontawesome.dashgame.com/][http_fontawesome.dashgame.com]

动画效果是用的animate.css，网址：[https://daneden.github.io/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>

[https_www.layui.com_doc_element_timeline.html]: https://www.layui.com/doc/element/timeline.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191105225542374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191105225713243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[http_fontawesome.dashgame.com]: http://fontawesome.dashgame.com/
[https_daneden.github.io_animate.css]: https://daneden.github.io/animate.css/