css 时间线（timeLine）

样子如下图所示：

上代码

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title></head>
<body>
<style>
.timeline-list{margin: 0;font-size: 14px;list-style: none;
}
.timeline-item:last-child .timeline-item_tail {display: none;
}
.timeline-item{position: relative;padding-bottom: 20px;
}
.timeline-item_tail{position: absolute;left: 4px;height: 100%;border-left: 2px solid #e4e7ed;
}.timeline-item_node{position: absolute;background-color: #e4e7ed;border-radius: 50%;display: flex;justify-content: center;align-items: center;left: -2px;width: 9px;height: 9px;background: #fff;border:3px solid #2395FF
}
.timeline-item_wrapper{position: relative;padding-left: 20px;top: 0px;
}
.timeline-item_timestamp{margin-bottom: 8px;padding-top: 0px;color: #242424;line-height: 1;font-weight: 700;font-size: 13px;
}
.delclass{color: #0379FB;font-weight: normal;cursor: pointer;
}
.delclass:hover{color: #2395FF;
}
.tbox{padding:10px;}
.tbox-content{background:rgba(246,246,246,1);padding: 10px;width: 600px;height: 90px;
}
.pannel{border-radius: 4px;border: 1px solid #ebeef5;background-color: #fff;overflow: hidden;color: #303133;transition: .3s;}
.pannel-header{padding: 20px;
}
.pannel-body{padding: 20px;
}
.pannel.shadow{box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.config{background:rgba(252,252,252,1);padding: 20px;margin-bottom: 15px;position: relative;
}
.delItem{position: absolute;font-size: 17px;color: #333;top: -8px;right: -5px;cursor: pointer;
}
.config-content{margin-top: 15px;
}
.imgLabel{width: 80px;color: #999;
}
.imgList{margin-left: 80px;padding: 10px;background: rgba(246,246,246,1);
}
</style><ul class="timeline-list"><li class="timeline-item"><div class="timeline-item_tail"></div><div class="timeline-item_node"></div><div class="timeline-item_wrapper"><div class="timeline-item_timestamp">工程管理部</div><div class="timeline-item_content"><div class="tbox"><div class="tbox-title"><span class="index">1、</span><span class="text">施工计划A区1-4层混凝土，完成30%。</span></div><div class="tbox-content"></div></div><div class="tbox"><div class="tbox-title"><span class="index">2、</span><span class="text">施工计划A区1-4层混凝土，完成30%。</span></div><div class="tbox-content"></div></div></div></div></li><li class="timeline-item"><div class="timeline-item_tail"></div><div class="timeline-item_node"></div><div class="timeline-item_wrapper"><div class="timeline-item_timestamp">工程管理部</div><div class="timeline-item_content"><div class="tbox"><div class="tbox-title"><span class="index">1、</span><span class="text">施工计划A区1-4层混凝土，完成30%。</span></div><div class="tbox-content"></div></div><div class="tbox"><div class="tbox-title"><span class="index">2、</span><span class="text">施工计划A区1-4层混凝土，完成30%。</span></div><div class="tbox-content"></div></div></div></div></li><li class="timeline-item"><div class="timeline-item_tail"></div><div class="timeline-item_node"></div><div class="timeline-item_wrapper"><div class="timeline-item_timestamp">工程管理部</div><div class="timeline-item_content"><div class="tbox"><div class="tbox-title"><span class="index">1、</span><span class="text">施工计划A区1-4层混凝土，完成30%。</span></div><div class="tbox-content"></div></div><div class="tbox"><div class="tbox-title"><span class="index">2、</span><span class="text">施工计划A区1-4层混凝土，完成30%。</span></div><div class="tbox-content"></div></div></div></div></li></ul><script></script>
</body>
</html>

css 时间线（timeLine）相关推荐

Hexo博客加时间线timeline功能
博客链接由于本人比较懒,所以就懒的修改格式啥的了,去博客中看,效果可能会更好~ 主题Next下,貌似没有时间线这个功能,网上搜了很多,没有找到一个非常简单的处理方式,网上大多的处理方式是,(1)根据 ...
魔兽世界运营时间线timeLine（2004-2014）
在美国: 2004年3月18日北美和韩国的魔兽世界官方BETA测试正式开始 2004年7月5日接受欧洲封闭式Beta测试的报名 2004年10月01日魔兽世界欧洲封闭Beta测试正式启动 200 ...
Dorea.js框架介绍：纯CSS写出优雅好看的时间线/时间轴（左右垂直展示）
在准备搭建博客,准备写一个心情的功能模块,以时间线的形式展现出来(有的人称为时间轴),发现Layer的提供的时间线挺好看的.速递地址:layui.但不是很符合本人自己的心意,想要一种左右左右展示的风格 ...
热点事件发现、演化及时间线Timeline、故事线Storyline自动生成
一.热点事件概述热点事件具有不可预测性,这决定了热点事件往往是一个"事后诸葛亮"的产物,一个热点事件从刚开始出现之时并没有带有成为热点的性质,当然,重大事故或者突发事件(如总统被 ...
【案例练习】15—27个网页设计的 HTML 时间线
来源 | https://medium.com/@niemvuilaptrinh/27-html-timeline-for-web-design-979b8e5d1c05 今天这篇文章,我跟大家分享2 ...
win10创建新账户_玩转Win10时间线技巧汇总
微软从Win10 1803开始引入了Timeline时间线功能,我们可以方便地找回浏览网页或打开文件的历史记录,并且在使用微软账户登录后,能够在不同的设备之间同步历史记录.MS酋长撰写本文来汇总一下W ...
html怎么实现蓝色垂直的直线,css实例教程一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...
用HTML CSS 实现简洁美观的时间线（历史年表）
前几天在B站刷到尼尔后突发奇想,就想给尼尔做一个简单的小网站,在思考如何体现尼尔的世界观的时候想到了使用时间线的方式,将所有时间的事件罗列起来.所以就试着做了一下,这种方式可以很直观的表现一些历史上发 ...
水平时间轴css代码_使用CSS和JavaScript构建水平时间线
水平时间轴css代码在上一篇文章中 ,我向您展示了如何从头开始构建响应式垂直时间轴. 今天,我将介绍创建相关的水平时间线的过程. 与往常一样,要初步了解我们将要构建的内容,请查看相关的CodePen ...
R语言ggplot2可视化：使用ggplot2绘制按时间顺序排列的时间线图（chronological timeline plot）
R语言ggplot2可视化:使用ggplot2绘制按时间顺序排列的时间线图(chronological timeline plot) 目录 R语言ggplot

css 时间线（timeLine）

css 时间线（timeLine）相关推荐

最新文章

热门文章