网页中时光轴的简单实现

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

       时光轴效果如下：


       鼠标滑过当前项时，左侧图标大小变大：


       index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时光轴</title>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }

        .vertical-timeline {
            color: #FFF;
            font-family: "微软雅黑", "Microsoft YaHei";
        }

        .vertical-timeline-block {
            width: 100%;
            border-left: 2px solid #DDD;
            margin: 0 20px;
            position: relative;
            padding-bottom: 30px;
        }

        /* 时间轴的左侧图标 */
        .vertical-timeline-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            left: -22px;
            top: 10px;

            text-align: center;
            line-height: 40px;
            cursor: pointer;
            transition: all 0.2s ease-in;
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
        }
        .vertical-timeline-block {
            cursor: pointer;
        }
        .vertical-timeline-block:hover .vertical-timeline-icon {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            line-height: 50px;
            left: -27px;
            box-shadow: 0 0 5px #CCC;
            font-size: 25px;
        }

        /* 时间轴的左侧图标的各种样式 */
        .v-timeline-icon1 {
            background-color: #2aabd2;
        }
        .v-timeline-icon2 {
            background-color: #5cb85c;
        }
        .v-timeline-icon3 {
            background-color: #8c8c8c;
        }
        /* 时间轴的左侧图标上的序号*/
        .vertical-timeline-icon i {
            font-style: normal;
            color: #FFF;
        }
        /* 时间轴上的具体内容 */
        .vertical-timeline-content {
            background-color: #5bc0de;
            margin-left: 60px;
            padding: 20px 30px;
            border-radius: 5px;
            position: relative;
        }
        /* 时间轴上的具体内容左侧箭头 */
        .vertical-timeline-content:before {
            content: '';
            width: 0;
            height: 0;

            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #5bc0de;
            border-left: 10px solid transparent;

            position: absolute;
            right: 100%;
            top: 20px;
        }
        /* 时间轴的具体内容的格式 */
        .timeline-content {
            text-indent: 2em;
        }
        .time-more {
            overflow: hidden;
        }
        .time-more .time {
            float: left;
            line-height: 40px;
            display: inline-block;
        }
        .time-more .more {
            float: right;
        }
        .time-more .more a {
            display: inline-block;
            height: 20px;
            padding: 8px 15px;
            color: #FFF;
            text-decoration: none;
            font-size: 15px;
        }
        /* “更多信息”的风格 */
        .more-style1 {
            border-radius: 5px;
            background-color: #565656;
        }
        .more-style1:hover {
            background-color: #696969;
        }
        .more-style2 {
            border-radius: 5px;
            background-color: #1AB394;
        }
        .more-style2:hover {
            background-color: #18A689;
        }

        .more-style3 {
            border-radius: 5px;
            background-color: #1C84C6;
        }
        .more-style3:hover {
            background-color: #1A7BB9;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="vertical-timeline">
            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

       下面为 时光轴左侧添加 “标题”，如：



       index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时光轴</title>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }

        .vertical-timeline {
            color: #FFF;
            font-family: "微软雅黑", "Microsoft YaHei";
            position: relative;
        }

        .vertical-timeline-block {
            width: 100%;
            border-left: 2px solid #DDD;
            margin: 0 20px;
            position: relative;
            padding-bottom: 30px;

            cursor: pointer;
        }

        /* 时间轴的左侧图标 */
        .vertical-timeline-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            left: -22px;
            top: 10px;

            text-align: center;
            line-height: 40px;
            cursor: pointer;
            transition: all 0.2s ease-in;
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
        }

        .vertical-timeline-block:hover .vertical-timeline-icon {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            line-height: 50px;
            left: -27px;
            box-shadow: 0 0 5px #CCC;
            font-size: 25px;
        }

        /* 时间轴的左侧图标的各种样式 */
        .v-timeline-icon1 {
            background-color: #2aabd2;
        }
        .v-timeline-icon2 {
            background-color: #5cb85c;
        }
        .v-timeline-icon3 {
            background-color: #8c8c8c;
        }
        /* 时间轴的左侧图标上的序号*/
        .vertical-timeline-icon i {
            font-style: normal;
            color: #FFF;
        }
        /* 时间轴上的具体内容 */
        .vertical-timeline-content {
            background-color: #5bc0de;
            margin-left: 60px;
            padding: 20px 30px;
            border-radius: 5px;
            position: relative;
        }
        /* 时间轴上的具体内容左侧箭头 */
        .vertical-timeline-content:before {
            content: '';
            width: 0;
            height: 0;

            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #5bc0de;
            border-left: 10px solid transparent;

            position: absolute;
            right: 100%;
            top: 20px;
        }
        /* 时间轴的具体内容的格式 */
        .timeline-content {
            text-indent: 2em;
        }
        .time-more {
            overflow: hidden;
        }
        .time-more .time {
            float: left;
            line-height: 40px;
            display: inline-block;
        }
        .time-more .more {
            float: right;
        }
        .time-more .more a {
            display: inline-block;
            height: 20px;
            padding: 8px 15px;
            color: #FFF;
            text-decoration: none;
            font-size: 15px;
        }
        /* “更多信息”的风格 */
        .more-style1 {
            border-radius: 5px;
            background-color: #565656;
        }
        .more-style1:hover {
            background-color: #696969;
        }
        .more-style2 {
            border-radius: 5px;
            background-color: #1AB394;
        }
        .more-style2:hover {
            background-color: #18A689;
        }

        .more-style3 {
            border-radius: 5px;
            background-color: #1C84C6;
        }
        .more-style3:hover {
            background-color: #1A7BB9;
        }

        .vtb-tit {
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
            text-align: center;

            background-color: #1A7BB9;
            border-radius: 5px;

            position: absolute;
            left: -120px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="vertical-timeline">
            <div class="vtb-tit">
                总时间点1
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1<a href="javascript:void(0)" class="del-timeline-block"></a></h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>

        <div class="vertical-timeline">
            <div class="vtb-tit">
                总时间点2
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>

        <div class="vertical-timeline">
            <div class="vtb-tit">
                总时间点2
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>
    </div>
</body>
</html>



葡萄干是个程序员
关注
  • 0
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue时间轴 vue-light-timeline
素味平生的博客
02-18 2万+
轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); &lt;template&gt; ...
时光轴网页
07-11
时光轴网页
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整vue可折叠展开时间线（超实用）轻松搞定简单时间线折叠切换功能：完整源代码与详细教程（新手必看）轻松入门前端开
最新发布
南北极之间
06-15 469
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
Bmob 与 html 、javascript 结合 :做一个《时间轴日记》网页
qq_095的博客
09-04 1275
时间轴日记 时间轴日记 网址：http://120.78.191.175/timediary/ Bmob js 文档网址：http://doc.bmob.cn/data/wechat_app_new/index.html 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;时间轴日记&lt;/t...
html制作时光轴，来自csdn博友
07-10
发问题帖子无法写太多代码，用链接的方式放到问题贴里，代码来自csdn博友，在浏览器中打开是乱码，欢迎指教
Html5响应式时光轴Demo
09-13
Html5响应式时光轴Demo
html时间选择器时光轴,jQuery简易时光轴实现方法示例
weixin_32000561的博客
06-03 285
本文实例讲述了jQuery简易时光轴实现方法。分享给大家供大家参考，具体如下：timeLinebody{margin: 0;padding: 0;background: #e8ffe8;}#head, #content, #footer{width: 1000px;margin: 0 auto;}#head{text-align: center;height: 100px;line-height:...
网页中时光轴CSS实现
09-27
为大家分享了CSS网页中时光轴的简单实现方法，记录每个时间段、时间点所发生的事情，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jqtimeline插件时间轴_时光轴
06-04
`jqtimeline` 是一款基于JavaScript库jQuery开发的时间轴插件，它允许开发者在网页上创建具有视觉吸引力和交互性的动态时间轴。这款插件广泛应用于展示历史事件、项目进度或者任何按照时间顺序排列的信息。在本篇...
时光隧道穿梭动画CSS3特效.zip
10-15
【时光隧道穿梭动画CSS3特效.zip】是一个包含CSS3实现的动态效果代码包，主要针对网页设计和开发人员。此特效利用了CSS3的强大功能，为用户提供了视觉上的震撼体验，仿佛穿越时空一般。在网页设计中，这种特效能够...
CSS3休闲时光落叶动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个引人入胜的“休闲时光落叶动画特效”。这个特效模拟了秋天的场景，书本旁咖啡香气四溢，落叶随风飘舞，为网页增添了一份温馨而宁静的氛围。通过纯CSS3实现这样的效果...
web前端-时间轴
04-20
web前端-时间轴
两个很强大的js实现的时间轴
09-05
有很多要求以时间为变量来标记事件的，这里有两个很好的开源js库，一大一小(timeglider,chronoline)。 但有个共同的缺点时间都只精确到天为单位。 个人把chronoline改成精确到分,但还不是很完善，如有需要的同鞋可以向我要...
时间线
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-23
这是一款基于html5实现的时间轴设计工作记录样式效果源码，是一款时间考勤表样式插件源码。用户可根据自身需求调整显示的文字、颜色及时间等的样式和数值。使之更具个性化。建议使用火狐或谷歌浏览器查看该源码。源码兼容目前最新的主流浏览器。
timeline js
12-26
"timeline js"是一个用于创建美观时光轴效果的JavaScript库，它可以帮助开发者轻松地在网页上构建类似QQ空间时光轴的动态展示。这个开源项目源自国外，旨在为用户提供一种直观且富有视觉吸引力的方式来呈现一系列按...
【前端开发实战】用 CSS 制作一个华丽的动画登录表单超详细教程新手友好~完整代码示例| 前端动效| 网页设计| 项目实例|HTML/CSS动画|打造炫酷漂亮的登陆表单 - 适合初学者小白的详细指南
南北极之间
06-07 110
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。在用户悬停在环形动画上时，边框颜色会变化并增加阴影，提升交互体验。整体效果是一个炫酷的动画登录表单。这个登录表单页面包含了一个环形动画效果和一些输入框、按钮的样式。
CSS实现时间线、时间轴的布局样式实现效果
weixin_47336389的博客
12-02 771
声明：用的结构vue3+scss（但是我也是新手 所以没有写很难 我也不会 所以就当成vue跟css就行。可以鼠标移入有效果，和点击切换实现选项卡高亮效果
html+css经典案例--时间轴
weixin_54106682的博客
06-27 1041
css浮动和定位相关知识案例
用flutter 实现时光轴
04-01
时光轴是一种将历史事件按时间线展示的方式。在Flutter中，可以通过使用ListView和Card来实现一个简单的时光轴。以下是一个示例： 1. 创建一个Flutter应用程序并打开main.dart文件。 2. 导入material.dart库并创建一个StatelessWidget。 ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Timeline App', home: TimelinePage(), ); } } ``` 3. 创建一个StatefulWidget并实现它的build方法。在build方法中，使用ListView和Card来展示历史事件。 ```dart class TimelinePage extends StatefulWidget { @override _TimelinePageState createState() => _TimelinePageState(); } class _TimelinePageState extends State<TimelinePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Timeline'), ), body: ListView( children: <Widget>[ _buildEventCard('Event 1', 'Description 1', 'date 1'), _buildEventCard('Event 2', 'Description 2', 'date 2'), _buildEventCard('Event 3', 'Description 3', 'date 3'), _buildEventCard('Event 4', 'Description 4', 'date 4'), _buildEventCard('Event 5', 'Description 5', 'date 5'), _buildEventCard('Event 6', 'Description 6', 'date 6'), _buildEventCard('Event 7', 'Description 7', 'date 7'), ], ), ); } Widget _buildEventCard(String title, String description, String date) { return Card( child: ListTile( title: Text(title), subtitle: Text(description), trailing: Text(date), ), ); } } ``` 4. 运行应用程序并查看时光轴。您可以根据需要添加更多事件卡片。 这是一个基本的时光轴实现。您可以根据需要定制卡片颜色、添加图像等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值