html时间线、timeLine

最新推荐文章于 2024-06-15 23:55:05 发布
最新推荐文章于 2024-06-15 23:55:05 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： css3，html 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Just_Maybe/article/details/108071561
版权

 先看效果。

代码复制粘贴即可，注意换下图片路径。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ui-timeLine>.item {
            width: 100%;
            display: block;
            position: relative;
            text-align: justify;
            word-break: break-all;
            padding-left: 50px;
            padding-right: 10px;
        }
        .ui-timeLine .line, .ui-timeLine>.activeLine {
            position: absolute;
            left: 29px;
            width: 4px;
            height: 100%;
            background-color: #eee;
        }
        .ui-timeLine .dot {
            z-index: 100;
            display: inline-block;
            position: absolute;
            left: 25px;
            top: 0;
            padding: 3px;
            border: 3px solid #eee;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 3px 3px 8px #ccc;
        }
        .ui-timeLine .active {
            border: 3px solid rgba(132, 43, 171, .8);
        }
        .ui-timeLine>.item>.box {
            padding: 5px 0;
        }
        .ui-timeLine>.item .cbox {
            display: flex;
            align-items: center;
            position: relative;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 3px 3px 8px #ccc;
            background-image: linear-gradient(45deg, rgba(0, 200, 255, 0.4) 0%, rgba(132, 43, 171, 0.4) 100%);
        }
        .ui-timeLine>.item .cbox>div{
            margin:0 10px;
            color: #FFFFFF;
        }
        .imageContent img{
            width: 100px;height: 100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="ui-timeLine">
        <a class="item">
            <div class="line"></div>
            <div class="dot active"></div> 
            <div class="box">
                <div class="cbox">
                    <div class="imageContent">
                        <img src="favicon.jpg" alt="">
                    </div>
                    <div>
                        <div class="date">直接主管</div> 
                        <div class="title">2020/8/18</div> 
                    </div>
                </div>
            </div>
        </a>
        <a class="item">
            <div class="line"></div>
            <div class="dot active"></div> 
            <div class="box">
                <div class="cbox">
                    <div class="imageContent">
                        <img src="favicon.jpg" alt="">
                    </div>
                    <div>
                        <div class="date">直接主管</div> 
                        <div class="title">2020/8/18</div> 
                    </div>
                </div>
            </div>
        </a>
        <a class="item">
            <div class="line"></div>
            <div class="dot active"></div> 
            <div class="box">
                <div class="cbox">
                    <div class="imageContent">
                        <img src="favicon.jpg" alt="">
                    </div>
                    <div>
                        <div class="date">直接主管</div> 
                        <div class="title">2020/8/18</div> 
                    </div>
                </div>
            </div>
        </a>
        <a class="item">
            <div class="line"></div>
            <div class="dot active"></div> 
            <div class="box">
                <div class="cbox">
                    <div class="imageContent">
                        <img src="favicon.jpg" alt="">
                    </div>
                    <div>
                        <div class="date">直接主管</div> 
                        <div class="title">2020/8/18</div> 
                    </div>
                </div>
            </div>
        </a>
        <a class="item">
            <div class="line"></div>
            <div class="dot active"></div> 
            <div class="box">
                <div class="cbox">
                    <div class="imageContent">
                        <img src="favicon.jpg" alt="">
                    </div>
                    <div>
                        <div class="date">直接主管</div> 
                        <div class="title">2020/8/18</div> 
                    </div>
                </div>
            </div>
        </a>
        <a class="item">
            <div class="line"></div>
            <div class="dot active"></div> 
            <div class="box">
                <div class="cbox">
                    <div class="imageContent">
                        <img src="favicon.jpg" alt="">
                    </div>
                    <div>
                        <div class="date">直接主管</div> 
                        <div class="title">2020/8/18</div> 
                    </div>
                </div>
            </div>
        </a>
    </div>
</body>
</html>

 

自先沉稳UP
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 自定义简单的时间轴 timeline 并与 table 图表和 echarts 进度甘特图联动
未名部落格
03-16 7262
1.需求 最近有需求需要实现 &lt;table&gt; 图表与 eharts 柱状图的联动。 完整的效果图如下所示 这里时间轴要实现的效果要基本如下图所示 该时间轴并不是要实现选中单独的某一个月份并查看单月的数据，而是要将当前数据的时间跨度控制在时间轴的跨度之间，在点击后退一个月或前进一个月的时候，对应的图表数据需要同步过滤并更新。 2.分析 echarts 本身是有时间轴...
html时间轴
08-19
一个很棒的html5的时间轴，可以配置文字，动画，等等资源信息
html 时间轴线
qq_41722795的博客
05-21 2422
参考文章：https://blog.csdn.net/weixin_40687883/article/details/80388420 目录 前言 一、使用的的外部库 二、代码 1.html 2.css 3.js 4.效果 前言 纯手工制作时间轴，暂展示固定的时间 提示：以下是本篇文章正文内容，下面案例可供参考 一、使用的的外部库 jquery 二、代码 1.html 代码如下（示例）： <!DOCTYPE html> <html...
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整vue可折叠展开时间线（超实用）轻松搞定简单时间线折叠切换功能：完整源代码与详细教程（新手必看）轻松入门前端开
最新发布
南北极之间
06-15 558
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
HTML时间轴
lzc的博客
05-22 8695
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="http://cdn.static.runo
timeline.html
12-28
pyecharts交互式动态可视化案例_全国各省近20年GDP动态展示
Timeline:纯CSS时间线
05-09
在“Timeline:纯CSS时间线”项目中，我们将学习如何使用HTML结构和CSS样式来创建这样一种交互式的时间轴。 首先，我们需要创建HTML的基本结构，这通常包括一个包含所有事件的容器元素，以及一系列表示每个事件的子...
timeline时间线的实现方法
04-18
总结起来，"timeline时间线的实现方法"主要涉及HTML、CSS和JavaScript的综合运用，特别是jQuery库的使用，以及与图像资源的配合，以创建一个互动性强、视觉效果良好的时间线展示。通过分析和理解这些资源文件，我们...
timeline:混沌时间线
07-03
"timeline:混沌时间线"是一个基于JavaScript的项目，主要用于创建和展示时间轴式的数据结构，帮助用户以清晰、直观的方式理解和管理项目中的事件和进度。时间线在多种领域都有广泛的应用，例如历史记录、项目管理、...
vue+elementUI实现时间线的自定义显示.zip
04-22
时间线（Timeline）是一种常见的数据展示方式，常用于展示事件的发生顺序或进度，例如项目管理、历史记录等场景。在这个"vue+elementUI实现时间线的自定义显示.zip"项目中，我们将看到如何利用Element UI的组件和Vue...
Jquery timeline 时间轴.rar
07-03
这个插件通常包含一系列时间点（events），每个时间点包含了特定的日期、描述和可选的图标或图片，这些元素沿着时间线有序分布，形成一条视觉线索。 在"Jquery timeline 时间轴.rar"压缩包中，我们可以看到一个名为...
时间线
03-04
时间轴 概述 使用HTML，CSS和jQuery构建一个简单的交互式历史时间线。 此时间轴脚本的好处是：（1）简单，（2）能够处理几乎任何形式的内容（包括图像，视频，音频），（3）打印机友好且仅使用CSS和HTML即可高度自定义。 如果您对它感兴趣，请。 请参阅以下其他用户的样本。 演示和现场实施 高级CSS3定制演示 使用自定义CSS实施：调查能力 原始演示 快速开始 加载插件和依赖项 < link rel =" stylesheet " href =" css/timeliner.css " type =" text/css " media =" screen " > < script src =" https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js " > </ script > < script typ
html5 水平时间轴设计
09-22
html5+jQuery 水平时间轴设计 + 图片叠加轮播切换
release-timeline:HTML5 时间轴工具
06-02
发布时间表 描述发布时间线是项目的扩展（）。 该项目允许您动态管理时间线内容（保存在 SQLite 数据库中），而 SIMILE 时间线小部件本身只能用于反映静态内容（XML 文档）。 （请参阅页面底部的图片以获取想法） 特征 事件或阶段添加到工作流程 创建新工作流程 加载和修改现有事件或阶段 删除现有事件或阶段 按搜索模式和分类浏览事件和阶段 也支持 MySQL 数据库 受密码保护的工作流处理 安装默认的 SQLite 数据库包含示例发布时间线相关的事件和阶段，只是为了展示项目的基本思想。 先决条件： $ apt-get install libdancer-perl $ apt-get install libdancer-plugin-database-perl $ apt-get install libtemplate-perl $ apt-get install libjso
HTML,js时间轴
03-14
各种各样的时间轴插件,有css,单独封装,与js装,还有十分炫酷的一个需要下载包
html时间轴布局,html+css :时间轴布局(示例代码)
weixin_34932795的博客
06-05 1065
time line*{margin: 0;padding: 0;box-sizing: border-box;}body{background: #fff;font-family: "Helvetica Neue", sans-serif;margin: 50px;}#timeline{margin-left: 30%;border-left: 10px solid #bce1fa;}#timel...
用HTML CSS 实现简洁美观的时间线（历史年表）
qq_61825999的博客
12-08 2415
前几天在B站刷到尼尔后突发奇想，就想给尼尔做一个简单的小网站，在思考如何体现尼尔的世界观的时候想到了使用时间线的方式，将所有时间的事件罗列起来。所以就试着做了一下，这种方式可以很直观的表现一些历史上发生的事情，历史相关主题的一些网站应该可以参考一下。以上都是游戏里的一些历史，简单的设计了一下，个人对整体的页面设计还是挺满意的，但是本期主要讲的是时间线，就不多扯其他的东西了，下面来讲讲具体是怎样实现的。在来看主要的时间线的部分，HTML因为是重复的，主要就只看格结构，这里我就只拿出一块来讲。
html中水平时间轴,CSS3 水平时间轴/步骤引导环节
weixin_39917576的博客
06-09 407
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);html {box-sizing: border-box;}*,*:before,*:after {box-sizing: inherit;}body {font-family: lato;}@med...
element的timeline 时间线怎么弄横的
05-28
要将 Element 的 Timeline 时间线横向显示，可以在 Timeline 组件中加入属性 mode="horizontal"，即可实现横向显示。例如： ```html <el-timeline mode="horizontal"> <el-timeline-item timestamp="2021-01-01">事件1</el-timeline-item> <el-timeline-item timestamp="2021-01-02">事件2</el-timeline-item> <el-timeline-item timestamp="2021-01-03">事件3</el-timeline-item> </el-timeline> ``` 在上述代码中，通过在 `el-timeline` 标签中加入 `mode="horizontal"` 属性，即可将 Timeline 时间线横向显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值