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"></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>

LayUI时间线优化相关推荐

layui框架学习（10：时间线）
时间线,英文timeline,也叫时光轴.时间轴,是指以时间为记录方式的一种网络布局形式,其形式之一为下图所示(示例图来自参考文献5). Layui官网教程中的更新日志页面也用了时间线样式,如 ...
Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素
Layui页面元素之选项卡.进度条.面板.表格 .徽章.时间线.辅助元素效果 demo 选项卡.面板.时间线很重要效果 demo <!DOCTYPE html> <html> ...
大佬教你Android如何实现时间线效果
背景这天下班前,老板找到小庄:有个页面要优化,小需求,你跟进一下. 小庄:好的老板! 他看了看时间,忐忑地翻出原型,看到了这样一个页面: 思索片刻后,小庄熟练地打开了某搜索引擎,没有找到合适的轮子, ...
评论回复功能 asp.net_微信重大更新！公众号推送时间线打乱+7大新功能上线！怎么玩？...
作者 |韩俊杰来源 |馒头商学院「ID:mantousxy」自从微信年初举办公开课后,每个月都没闲着,各种新功能.小改版层出不穷.就在最近,微信又接连推出几项新功能,动作让人"眼花缭乱&qu ...
应用时间线服务器启动报错_从服务器到无服务器的时间轴和教程
应用时间线服务器启动报错 Amazon Web Services is a behemoth powering companies from Fortune 500 corporations to h ...
Dorea.js框架介绍：纯CSS写出优雅好看的时间线/时间轴（左右垂直展示）
在准备搭建博客,准备写一个心情的功能模块,以时间线的形式展现出来(有的人称为时间轴),发现Layer的提供的时间线挺好看的.速递地址:layui.但不是很符合本人自己的心意,想要一种左右左右展示的风格 ...
Java发展历程时间线
前言世界上并没有完美的程序,因为写程序本来就是一个不断追求完美的过程.同样没有一门语言在一诞生就是完美的,不变的唯有变化.Java诞生至今已经不仅仅是一门语言,背后所涵盖的是一个庞大的技术体系. 网 ...
Hexo博客加时间线timeline功能
博客链接由于本人比较懒,所以就懒的修改格式啥的了,去博客中看,效果可能会更好~ 主题Next下,貌似没有时间线这个功能,网上搜了很多,没有找到一个非常简单的处理方式,网上大多的处理方式是,(1)根据 ...
用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...

LayUI时间线优化

LayUI时间线优化相关推荐

最新文章

热门文章