页面元素之时间线
2020-04-12 本文已影响0人
小疏林er
1、基本使用
时间线在平时使用频率不是很高，通常是在需要发展历程、生平简介、阶段总结等的页面中使用。
时间线的结构十分明了，使用时敲一段代码即可，其余的复制修改即可。
结构代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div id=""style="margin: 40px 80px;">
<ul>
<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">时间1</h3> <!-- 时间1（标题） -->
<p>想放啥都行！</p> <!-- 内容，p、ul、div等等都可以 -->
<ul>
<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">时间2</h3>
想放啥都行！
</div>
</li>
.....接着写就行了
</ul>
</div>
</body>
</html>
效果图
image.png
2、抗击疫情时间线（部分）
近日，海外疫情愈演愈烈，而我国却已经趋于平静，不禁使人感叹，同等条件下恐怕没有人可以做的比我们更好了！有的网友戏言称外国抄个作业都抄不好！由于各国国情的不同，导致这份答卷并没有标准答案，但是我们的成绩妥妥的A+。
用世界卫生组织一位官员的话说：如果我感染了，我希望，我能在中国！生在华夏 真好！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<h1 style="text-align: center;margin-top: 50px;">抗击疫情时间线（部分）</h1>
<div id=""style="margin-top: 30px;margin-left: 80px;">
<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">2020年1月</h3>
<ul>
<li>1月7日：中国疾控中心科研团队以最快的速度从样本中分离出新型冠状病毒并检测出病毒全基因组序列，及时向全世界公开全部信息。</li>
<li>1月20日：针对新型冠状病毒疫情的攻坚战正式开始！我国正式将新冠肺炎纳入《中华人民共和国传染病防治法》和《中华人民共和国国境卫生检疫法》。</li>
<li>1月21日：国家卫健委开始每天公布官方疫情信息。</li>
<li>1月22日：国务院建立联防联控机制。</li>
<li>1月23日：武汉“封城”，实施严格的交通管制。一座上千万人的城市实施封闭，迅速切断疫情扩散，这是新中国历史上首次。</li>
<li>1月24日：从这天起，包括军队在内的广大医务工作者逆流而上，义无反顾奔赴湖北和武汉投入防控救治工作。据统计，1月24日到3月8日，全国有346支医疗队4.26万人抵达武汉和湖北，其中重症专业医务人员1.9万。</li>
<li>1月25日：全国有30个省份宣布启动重大突发公共卫生事件一级响应，停止室内外聚集性活动，实行最严格的防控措施。</li>
</ul>
</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">2020年2月</h3>
<ul>
<li>2月2日：火神山医院宣布全面竣工，用时10天。</li>
<li>2月5日：雷神山医院交付使用，用时10天。晚22时，首批首个方舱医院——江汉方舱医院正式启用。</li>
<li>2月19日：我国新增确诊病例降至千人以下。</li>
<li>3月10日：武汉市14家方舱医院全部休舱。</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">2020年3月</h3>
<ul>
<li>3月10日：武汉市14家方舱医院全部休舱。</li>
<li>3月12日：距离武汉“封城”已有50天，武汉新增确诊病例首次降至个位数。国家卫健委宣布，我国本轮疫情流行高峰已经过去。</li>
<li>3月16日：湖北省新增新冠肺炎确诊病例1例，其中：武汉市1例，其他16个市州均为0例。</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">2020年4月</h3>
</div>
</li>
</ul>
</div>
</body>
</html>
效果图
image.png
