前端横向时间轴制作

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

最近在做项目时,前端需要一个横向的时间轴,但是一直CV不到合适的,于是自己写了一个,现在将代码分享出来,被框住的部分

先上效果图,虚线和实线的切换换个样式即可,

 部分代码为layui,如果只需要红色框柱的部分,则只拷<div class="content">这个div中的代码和最上方的样式即可,代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../../../css/layuimini.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/themes/default.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style type="text/css">
        body{
        }
        .content{
            width: 1000px;
            height:auto;
            margin: -75px 0 0 311px;
            display: inline-block;

        }
        .contract{
            width: 100%;
            height:auto;
            display: inline-block;

        }
        .title{
            padding:2px;
            float:left;
            height:30px;
            width:50px;
            margin:0 auto;

        }
        .contract .linesegs{
            list-style-type: none;
            float:left;
            position: relative;
            background-repeat: repeat-x;
            height: 40px;
            margin:0px;
            padding-left:10px;
        }
        .linesegs li{
            float: left;
            width: 110px;
            position: relative;
            background-repeat: no-repeat;


        }

        .linesegs li .lines {
            height:20px;
            width:100%;
        }

        .linesegs li .dashed:after {
            content: '';
            display: block;
            border-top:2px dashed #C9CDD4;;
            width: 100%;
            height: 2px;

        }

        .linesegs li .solid:after {
            content: '';
            display: block;
            border-top:2px solid #41AE3C;
            width: 100%;
            height: 2px;

        }


        .linesegs li .radius:before {
            content: '';
            display: block;
            position: relative;
            width: 10px;
            height: 10px;
            top:5px;
            background: #41AE3C;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-size: 10px 10px;
        }

        .linesegs li .b-radius:before {
            content: '';
            display: block;
            position: relative;
            width: 10px;
            height: 10px;
            top:5px;
            background: #41AE3C;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-size: 10px 10px;
        }

        .linesegs li .showtext{
            width:100%;
            height:30%;
            display: inline-block;
            text-align: center;

        }
        .linesegs li .startdate{
            width:100%;
            height:1px;
            margin-top:10px;
            font-size:12px;
            text-align: left;
            position: relative;
            left:-10px;
        }

        .class1{
            margin-top: 20px;
            margin-left: -7px;
            font-size: 14px;
        }



    </style>
</head>
<body>
<div class="layui-container">
    <button type="button" id="addProject" class="layui-btn layui-btn-normal" style="border-radius: 10px;">发起新项目</button>
    <button type="button" id="pastProject" class="layui-btn layui-btn-normal" style="border-radius: 10px;float: right">历史项目</button>

    <div class=""layui-inline>

        <form class="layui-form" action="">
            <div class="layui-input-inline" style="float: left">
                <select name="orderByName" lay-filter="orderByName" style="width: 1150px;float: left">
                    <option value="0">项目名称</option>
                    <option value="1" >项目编号</option>
                    <option value="2">供应商</option>
                </select>
            </div>
            <div style="float: left">
                <input id="keyWord" type="text" name="keyWord" placeholder="请输入关键词搜索" autocomplete="off" class="layui-input" style="width: 170px;float: left;border-radius: 20px;">
                <i id="selHosp" class="layui-icon " style="font-size: 30px;height:38px;float: right;">&#xe615;</i>
            </div>
            <div style="float: right">
                <select name="orderByTime" lay-filter="orderByName" style="width: 1150px;float: left;">
                    <option value="0">发起项目</option>
                    <option value="1" >审核项目</option>
                    <option value="2">设备签收</option>
                    <option value="3">设备分拨</option>
                </select>
            </div>
        </form>

        <div style="clear: both;">

        </div>

        <div id="mianban" class="layui-panel" style="height: 100px;margin-top: 15px">

            <div style="float: left">
                <div style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
                    <span style="margin-right: 20px;">项目名称</span> <span>测试项目1</span> <br>
                </div>
                <div style="margin-left: 20px;margin-bottom: 10px">
                    <span style="margin-right: 20px;">项目编号</span> <span>111111</span> <br>
                </div>
                <div style="margin-left: 20px;margin-bottom: 10px">
                    <span style="margin-right: 20px">供应商</span> <span>供应商aaaaa</span>
                </div>
            </div>

            <div class="content">
                <div class="contract">
                    <ul class="linesegs">
                        <li class="lineseg" style="width:13vw;">
                            <div class="solid radius"></div>
                            <h3 class="startdate">发起项目</h3>
                            <br>
                            <h3 class="startdate">2018-10-7</h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class="dashed b-radius" ></div>
                            <h3 class="startdate">审核项目资料</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class="dashed b-radius" ></div>
                            <h3 class="startdate">设备分拨</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class=" b-radius" ></div>
                            <h3 class="startdate">设备分拨</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                    </ul>
                </div>
            </div>


        </div>

        <div id="" class="layui-panel" style="height: 100px;margin-top: 15px">

            <div style="float: left">
                <div style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
                    <span style="margin-right: 20px;">项目名称</span> <span>测试项目1</span> <br>
                </div>
                <div style="margin-left: 20px;margin-bottom: 10px">
                    <span style="margin-right: 20px;">项目编号</span> <span>111111</span> <br>
                </div>
                <div style="margin-left: 20px;margin-bottom: 10px">
                    <span style="margin-right: 20px">供应商</span> <span>供应商aaaaa</span>
                </div>
            </div>

            <div class="content">
                <div class="contract">
                    <ul class="linesegs">
                        <li class="lineseg" style="width:13vw;">
                            <div class="solid radius"></div>
                            <h3 class="startdate">发起项目</h3>
                            <br>
                            <h3 class="startdate">2018-10-7</h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class="dashed b-radius" ></div>
                            <h3 class="startdate">审核项目资料</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class="dashed b-radius" ></div>
                            <h3 class="startdate">设备分拨</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class=" b-radius" ></div>
                            <h3 class="startdate">设备分拨</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                    </ul>
                </div>
            </div>


        </div>

        <div  class="layui-panel" style="height: 100px;margin-top: 15px">

            <div style="float: left">
                <div style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
                    <span style="margin-right: 20px;">项目名称</span> <span>测试项目1</span> <br>
                </div>
                <div style="margin-left: 20px;margin-bottom: 10px">
                    <span style="margin-right: 20px;">项目编号</span> <span>111111</span> <br>
                </div>
                <div style="margin-left: 20px;margin-bottom: 10px">
                    <span style="margin-right: 20px">供应商</span> <span>供应商aaaaa</span>
                </div>
            </div>

            <div class="content">
                <div class="contract">
                    <ul class="linesegs">
                        <li class="lineseg" style="width:13vw;">
                            <div class="solid radius"></div>
                            <h3 class="startdate">发起项目</h3>
                            <br>
                            <h3 class="startdate">2018-10-7</h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class="dashed b-radius" ></div>
                            <h3 class="startdate">审核项目资料</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class="dashed b-radius" ></div>
                            <h3 class="startdate">设备分拨</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                        <li class="lineseg" style="width:13vw;">
                            <div class=" b-radius" ></div>
                            <h3 class="startdate">设备分拨</h3>
                            <br>
                            <h3 class="startdate">2019-10-7 </h3>
                        </li>

                    </ul>
                </div>
            </div>


        </div>

    </div>





</div>


<%--pageContext.request.contextPath得到/webapp--%>
<script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['element','jquery','layer','form'], function(){
        var table = layui.table;
        var $=layui.jquery;
        var layer=layui.layer
        var form = layui.form;
        var element = layui.element;

    })

</script>
</body>
</html>

彦成-
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发：自定义时间轴的使用
软贱开发攻城狮
06-25 3305
在前端开发过程中，业务需求经常也会涉及到关于时间进度方面，这种情况也是比较常见的需求，对于时间进度的相关需求常见的有：商城商品发货进度，行政需求的审批时间节点等业务场景。虽然Vue的组件里面也提供了对应的时间轴使用的组件，但是对于一些实际的开发业务需求来说不能满足，这个时候是需要自定义时间轴来实现对应的业务场景。 但是话又说回来了，如果能用框架自带的组件就不自定义组件，毕竟现成的好过需要重新开发的，但是避免不了的还是要自己重新开发自定义组件，那么本篇文章就来分享一个关于时间轴的自定义使...
web前端-时间轴
04-20
web前端-时间轴
jquery时间轴插件制作横向时间轴酷炫的时间轴特效
11-10
jquery时间轴插件制作横向时间轴酷炫的时间轴特效 jquery时间轴插件制作横向时间轴酷炫的时间轴特效 jquery时间轴插件制作横向时间轴酷炫的时间轴特效 jquery时间轴插件制作横向时间轴酷炫的时间轴特效
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整vue可折叠展开时间线（超实用）轻松搞定简单时间线折叠切换功能：完整源代码与详细教程（新手必看）轻松入门前端开
最新发布
南北极之间
06-15 496
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
js用滚动条模拟横向时间轴
HuangsTing的博客
08-12 4412
原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条；（同理，制作纵向时间轴则设置overflow-y: scroll） 在时间轴盒子外层再包裹一个固定大小的div，该盒子高度要比时间轴的盒子高度小20px，设置overflow:hidden，则可以隐藏掉时间轴盒子出现的滚动条; css代码： .car-time-bar{ width: 885px; ...
横向时间轴插件_js_时间轴_
10-02
一个javascript做的时间轴插件，初学习js的可以看看
横向时间轴
小二来一只葫芦
12-28 701
开发时偶尔会用到的横向时间轴，这写的比较基础部分，有不同的地方，在基础上自己添加也比较容易~~
gis 数据框裁剪_零基础、无资料如何制作GIS分析图？
weixin_39959335的博客
10-30 507
文章首发于微信公众号“数据规划说”，作者“叫我三三就好”。一位不愿意透露姓名的博士师姐最近终于开始撰写她的毕业论文了然而刚下笔，便遇到了技术上的瓶颈呆师姐：“师弟，这个…高程坡度坡向分析怎么做？数据又是从哪来”……经常使用GIS的同学，都知道这些操作算是非常基础的操作但是对于想入手的小白来说做出一张自己想要的分析图，需要迈过无数个坑So这次三三君就为大家系统的整理一下在完全没有基础资料的情况下如何...
【前端Web】Jquery实现的四款牛B的时间轴
热门推荐
程序猿开发日志【学习永无止境】
02-21 2万+
引言 最近项目中使用了很多前端的东西，对于我一个做后台开发的人员，这是一个很好的锻炼的机会。经过这段时间的学习，感觉前端的东西太多了，太强大了，做出来的东西太炫酷了。现在有很多开源的前端框架，做的都非常的漂亮，h5发展了这么多年了，改变了互联网行业啊！下面给大家介绍几款漂亮的时间轴，也许大家以后工作中会用到。 一、纵向折叠时间轴 1、js文件（jQuery.js或者jQuery.
jQuery横向滚动时间轴插件.zip
04-21
时间轴插件常用于网站新闻更新、项目历程展示、历史事件回顾等场景，用户可以沿着时间线轻松浏览各个节点，既美观又实用。jQuery横向滚动时间轴插件则是在有限的屏幕宽度内，以水平滚动的方式展示时间轴，尤其适合...
jQuery全屏横向时间轴滑块代码.zip
07-04
【jQuery全屏横向时间轴滑块代码】是一个基于JavaScript库jQuery实现的动态展示时间线的交互式设计。这种设计常用于展示项目历程、历史事件或者重要时间点，它以全屏模式呈现，使得用户可以清晰地看到每一个时间点的...
简洁的横向水平时间轴特效
12-13
这是一款基于Bootstrap网格系统的响应式横向水平时间轴特效。该水平时间轴特效采用bootstrap网格进行布局，然后通过css代码来进行美化，效果简洁时尚。
js时间轴横向代码
07-23
js时间轴横向代码
使用html页面制作一个公告栏，用来横向滚动展示文字
11-24
本文将详细介绍如何使用HTML来制作一个能够横向滚动展示文字的公告栏。这个技术对于前端开发工程师来说非常实用，尤其在需要动态更新信息或者有限的屏幕空间内显示大量内容时。 首先，HTML（HyperText Markup ...
时间轴效果
11-03
另外，如果你在开发Web应用，可以使用Java的服务器端技术如Spring MVC，配合前端JavaScript库如jQuery或Vue.js来实现时间轴效果。例如，Bootstrap的时间轴组件（Timeline）可以和Spring MVC结合，后端通过MVC模式...
layui横向时间线_揭秘！无缝衔接的长长长长时间轴，其实是这么做的
weixin_39614146的博客
11-18 3100
本文操作适用于微软 Office 全系列版本时间轴是 PPT 常见的制作页面之一，经常用来展示公司发展历程、项目进度安排、个人成长轨迹等。一张完整的时间轴 PPT 应该包括三要素：时间线、时间节点(序号)、事件。在制作时，内容的准备是容易的，主要在于形式上的设计需要花心思。如何做好时间轴 PPT？相信你看完本文，会有启发。01 传统的时间轴做法一般制作时间轴，所有的内容都会放在一页 PPT 上。内...
html实现多种风格的时间轴（附源码）
xcLeigh
06-22 9599
html实现多种风格的时间轴，好看的时间轴，时间轴源码，源码下载，格子风步骤条，花式风步骤条，进度风步骤条，线性风步骤条等十三种步骤条，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴
lmrylll的博客
06-09 126
【代码】08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴。
前端的那些事--时间线
qq_42201141的博客
03-10 575
单线程 都说js是一个很牛逼的语言，要说js是什么，有很多答复，面向对象，弱类型，解释性语言，还有一条，就是单线程，强如java是多线程，多线程处理效率高，js的单线程是属于表面单线程实质底层多线程，js是在浏览器中运行的，浏览器是多线程，它单单开通一条线给js运行，就是js引擎，当然js也不能成为多线程，因为js是操作dom的，假如一个div又要变宽又要变高，浏览器不能同时执行，所以js理所当然...
vue3 横向时间轴
08-23
Vue 3中的横向时间轴可以通过使用适当的组件和样式来实现。下面是一个简单的示例，演示如何创建一个基本的横向时间轴： 首先，你可以创建一个包含所有时间轴项目的父容器： ```html <div class="timeline"> <div class="timeline-item">Item 1</div> <div class="timeline-item">Item 2</div> <div class="timeline-item">Item 3</div> <!-- 添加更多的时间轴项目 --> </div> ``` 然后，你可以在 Vue 组件中引入这个父容器，并为其添加样式： ```html <template> <div class="timeline"> <div class="timeline-item">Item 1</div> <div class="timeline-item">Item 2</div> <div class="timeline-item">Item 3</div> <!-- 添加更多的时间轴项目 --> </div> </template> <style> .timeline { display: flex; flex-direction: row; } .timeline-item { flex: 1; padding: 10px; border: 1px solid #ccc; background-color: #f5f5f5; } </style> ``` 这是一个基本的横向时间轴的示例。你可以根据自己的需求对样式进行调整，并根据需要在每个时间轴项目中添加更多的内容和交互。 希望这能帮助到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值