css 时间线（timeLine）

已于 2022-03-17 17:14:30 修改
阅读量4.5k 收藏 13
点赞数 2
分类专栏： css 文章标签： 时间线 css
于 2019-05-22 11:24:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37899792/article/details/90440480
版权

样子如下图所示： 

上代码 

<!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实现时间线
fendoudemayi159的博客
03-18 754
效果：margin: 0;.tail {left: 0;.node {left: -2px;width: 6px;.wrapper {top: -6px;left: 8px;.times {.cont {
Timeline:纯CSS时间线
05-09
#时间线 ##功能 ##如何使用 ##兼容性 现代浏览器（Chrome,Oprea,firefox） IE8+
border 实现竖线
Zoe_Wang_ing的专栏
11-18 2862
list *,body{ font-family: "微软雅黑"; font-size: 10px; color: #4F4F4F; } .container{ position: relative; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: au
网页通知设计灵感：CSS 和 JS 的 8 大创意实现
最新发布
m0_45522371的博客
09-17 1014
网页通知如今已成为电商、社交平台等网站的常见功能，它们不仅传递重要信息，还能提升用户体验。随着设计的不断进化，通知界面已不再是单纯的功能展示，而是集视觉效果与交互体验于一体的设计元素。本文整理了 8 款基于 CSS 和 JavaScript 的创意通知界面，带你探索通知 UI 的无限可能。通知系统已经成为现代网站不可或缺的一部分。通过 CSS 和 JavaScript，你不仅可以轻松实现通知功能，还能通过创意设计打造独特的用户体验。无论是为了实用还是视觉效果，这些通知 UI 代码片段都值得一试。
HTML5+CSS3实现的响应式垂直时间轴
weixin_30820151的博客
09-13 934
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示：HTML5+CSS3实现的响应式垂直时间轴</titl...
使用css实现时间线布局（TimeLine）
也简的博客
08-14 2951
使用css实现时间轴布局，css时间线，css实现TimeLine
CSS时间线样式
zhaoyang314的博客
11-07 846
用CSS实现时间线样式，简单明了，实用。
时间线css
weixin_63572203的博客
12-14 660
2018年
css时间轴
祈澈菇凉
05-28 993
原型： 代码： <!DOCTYPE html > <html> <head> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn...
CSS-Timeline:使用CSS的简单移动响应时间线
05-06
**CSS时间轴详解** 在网页设计中，时间轴是一种有效的工具，用于呈现一系列按照时间顺序发生的事件或进程。本文将深入探讨如何使用CSS3创建一个简单且响应式的事件时间线，以及涉及的关键技术和最佳实践。 首先，...
Css实现时间线(timeline)展示效果
小生不才
08-06 746
通过Css实现时间线展示效果，也可以封装成Vue组件。
前端项目-timeline.css.zip
09-03
前端项目-timeline.css,时间线-创建自己时间线的最佳方式，只需使用CSS！与Timeline.css共享生活和工作事件！SASS和SCSS端口也是！
纯CSS时间轴
04-17
css设计html时间轴,快速制作时间轴，从简单的入手，慢慢的复杂的就容易解决啦！
纯css时间轴
07-12
用css写的一个时间轴，兼容所有浏览器，非常好用的哦~
微信小程序timeLine时间线代码片段示例
02-11
在这个“微信小程序timeLine时间线代码片段示例”中，我们将深入探讨如何在微信小程序中实现一个时间线（TimeLine）功能。 时间线是一种常见的UI设计元素，用于展示一系列按时间顺序排列的事件或步骤。在微信小程序...
2024最全前端面试系列（数据结构篇）（大厂必考算法）
youpccc的博客
03-29 1076
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
css实现timeline时间线
qq_43519782的博客
08-29 679
效果： 实现： <template> <ul class="timeline"> <li class="timeline-item"> <div class="time"> <p>XX年XX月XX日</p> <p>00:00:00</p> </div> <i class="circle"></i>
时间轴CSS Timeline
ICode联盟
11-10 495
下载地址 简约的时间轴CSS Timeline，垂直样式的时间轴效果，可以作为事件展示等用途。 dd:
css timeline,一个非常漂亮的时间轴样式timeLine
weixin_36040584的博客
08-04 1111
突然要用自定义的时间轴timeLine。在网上找到一个特别好的例子：效果：HTML:Freelancer2013-presentMycurrentemployment.Waybetterthanthepositionbefore!AppleInc.2011-2013Myfirstemployer.AllthestuffI'velearnedandproj...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值