CSS- 横向和纵向时间轴

news2024/11/15 4:41:32

 

/*横向时间轴*/
        .time-horizontal {
            list-style-type: none;
            border-top: 1px solid #707070;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

        .text-horizontal {
            list-style-type: none;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

            .text-horizontal li {
                float: left;
                position: relative;
                text-align: center;
                width: 33.33%;
            }


        .time-horizontal li {
            float: left;
            position: relative;
            text-align: center;
            width: 33.33%;
            padding-top: 10px;
        }

        .nomal b:before {
            content: '';
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #4c4c4c;
            border-radius: 8px;
            background: #4c4c4c;
        }

        .ok b:before {
            content: '';
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #0074E8;
            border-radius: 8px;
            background: #0074E8;
        }


<div id="jd" style="width:90%;margin:10px auto;" class="content">
        <div style="width:150px;">活动进度</div>
        <div style="height:10px;"></div>
        <div class="container">
            <ul class="text-horizontal" id="jdtime">
                <li><b></b>报名中</li>
                <li><b></b>进行中</li>
                <li><b></b>结束</li>
            </ul>
            <div style="height:0px; clear:both;"></div>
        </div>
        <div class="container">
            <div style="height:20px;"></div>
            <ul class="time-horizontal" id="jdzt">
                <li class="nomal"><b></b>报名中</li>
                <li class="nomal"><b></b>进行中</li>
                <li class="ok"><b></b>结束</li>
            </ul>
            <div style="height:10px; clear:both;"></div>
        </div>
    </div>

下面的是横向和纵向

<div class="container">
    <p>原文地址:http://www.cnblogs.com/xiaofeixiang/</p>
    <ul class="time-horizontal">
        <li><b></b>成立</li>
        <li><b></b>合作</li>
        <li><b></b>发展</li>
        <li><b></b>共赢</li>
    </ul>
</div>
<div class="container">
    <ul class="time-vertical">
        <li><b></b><span>1</span><a href="javascript:void(0)">keso</a></li>
        <li><b></b><span>2</span><a href="javascript:void(0)">FlyElephant</a></li>
        <li><b></b><span>3</span><a href="javascript:void(0)">博客园</a></li>
        <li><b></b><span>4</span><a href="javascript:void(0)">创业</a></li>
    </ul>
</div>


/*横向时间轴*/
.time-horizontal {
    list-style-type: none;
    border-top: 1px solid #707070;
    max-width: 800px;
    padding: 0px;
    margin: 0px;
}
 
.time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 25%;
    padding-top: 10px;
}
 
.time-horizontal li b:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 47%;
    width: 12px;
    height: 12px;
    border: 2px solid #4c4c4c;
    border-radius: 8px;
    background: #4c4c4c;
}
/*纵向时间轴*/
.time-vertical {
    list-style-type: none;
    border-left: 1px solid #707070;
    padding: 0px;
    height: 400px;
}
 
.time-vertical li {
    height: 100px;
    position: relative;
}
 
.time-vertical li a {
    display: inline-block;
    margin-left: 20px;
    margin-top: 15px;
    text-decoration: none;
    color: #000;
}
 
.time-vertical li b:before {
    content: '';
    position: absolute;
    top: 15px;
    left: -12px;
    width: 18px;
    height: 18px;
    border: 2px solid #98FB98;
    border-radius: 10px;
    background: #98FB98;
}
 
.time-vertical li span {
    position: absolute;
    color: #fff;
    top: 18px;
    left: -6px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/656730.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据中心网络的电路交换域

buffer 的意义在用带宽平滑统计突发&#xff1a; 流量波动越大&#xff0c;统计复用能效越高。假设没有 buffer&#xff0c;将大量溢出和空载并存。但如果流量是可预期的&#xff0c;也可以转向相反的方向&#xff0c;比如虚电路。 数据中心与 Internet 不同&#xff0c;流量…

90后Android程序员杨国民的羊粪肥创业故事:从社恐到销售奇迹

90后Android程序员杨国民的羊粪肥创业故事&#xff1a;从社恐到销售奇迹 最近一位90后程序员杨国民的创业故事在社交媒体上引起了轰动。他回到了内蒙古老家&#xff0c;并以羊粪肥为主要产品&#xff0c;取得了惊人的销售成绩。据报道&#xff0c;他的羊粪肥月销量达到了120万…

Java选择题刷题记录2

Java集合的关系 图片来自原文链接&#xff1a;https://blog.csdn.net/weixin_45861283/article/details/116201140 HashMap的键可以为null Java基本数据类型&#xff0c;注意String不是基本数据类型 NIO 全称java non-blocking IO &#xff0c;是指 Java 一系列改进的输入…

一篇文章docker-compose安装使用全解

提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 关于docker composedocker compose安装Linux安装docker-composeWindows安装docker-compose docker-compose YMAL常用配置项综合配置示例 docker compose常用命令启动…

设计模式(二十):行为型之迭代器模式

设计模式系列文章 设计模式(一)&#xff1a;创建型之单例模式 设计模式(二、三)&#xff1a;创建型之工厂方法和抽象工厂模式 设计模式(四)&#xff1a;创建型之原型模式 设计模式(五)&#xff1a;创建型之建造者模式 设计模式(六)&#xff1a;结构型之代理模式 设计模式…

LabVIEW开发移动车辆的识别和特征提取

LabVIEW开发移动车辆的识别和特征提取 闭路电视摄像机在高速公路上变得越来越普遍&#xff0c;并用于交通管理;摄像机允许操作员直观地监控交通状况。随着摄像机数量的增加&#xff0c;操作员监控每个摄像机成为一项艰巨的任务&#xff0c;因此录制视频&#xff0c;并且通常仅…

Hack The Box - Web - Phonebook

玩一会儿htb的challenge&#xff0c;最近找工作&#xff0c;所以先玩玩web类型的。 这道题目的类型有人说是LDAP注入、有人说是like注入。LDAP这玩意08年的时候估计可能比较流行&#xff0c;但是现在应该没多少人用了吧&#xff0c;比较小众。其实LDAP这个特殊的数据库是比较契…

LwIP RAW API 实现UDP多播收发

LwIP RAW API 实现UDP多播收发实现 1、初始化 static struct udp_pcb *multicast_pcb NULL; static ip_addr_t mutlcast_send_ip; static ip_addr_t mutlcast_recv_ip;static void udp_recv_multicast(void *arg, struct udp_pcb *pcb, struct pbuf *p,const ip_addr_t *add…

安装cv2库时出现错误的一般解决方法

问题描述&#xff1a; 安装cv2库时出现错误 补充&#xff1a;cv2库的简单介绍 cv2是Python中常用的计算机视觉库OpenCV的Python接口模块。通过使用cv2模块&#xff0c;您可以方便地进行图像和视频的读取、处理和显示等操作。它提供了许多常用的图像处理函数和工具&#xff0…

WPF基础学习笔记3-文本控件

1.文本控件 文本控件System.Windows.Controls,TextBox继承自System.Windows.Controls.TextBoxBase类System.Windows.Controls.RichTextBox继承自System.Windows.Controls.TextBoxBase类 1.1 TextBox 表示一个控件&#xff0c;该控件可用于显示或编辑无格式文本 <Grid>&l…

Python算法练习6.17

leetcode 1768 交替合并字符串 给你两个字符串 word1 和 word2 。请你从 word1 开始&#xff0c;通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长&#xff0c;就将多出来的字母追加到合并后字符串的末尾。 返回 合并后的字符串 。 输入&#xff1a;word1 &qu…

【探索 Kubernetes|作业管理篇 系列 9】Pod 的服务对象

前言 大家好&#xff0c;我是秋意零。 在上一篇中&#xff0c;我们介绍了 Pod 的生命周期以及区分 Pod 字段的层次级别&#xff0c;相信你对此有了充分的认识。 今天&#xff0c;我们还会接着以 Pod 展开&#xff0c;说说它的 “服务对象”&#xff0c;一听就知道是对 Pod 提…

RocketMQ_高级功能

目录 一、消息存储 1、存储介质以及性能对比 2、消息的存储和发送 3、消息存储结构 4、刷盘机制 二、高可用性机制 1、消息消费高可用 2、消息发送高可用 3、消息主从复制 三、负载均衡 1、Producer负载均衡 2、Consumer负载均衡 四、消息重试 1、顺序消息的重试…

微信无人托管智能客服系统

随着人工智能技术的不断发展&#xff0c;大语言模型、智能客服、垂直化场景应用和微信聊天等三方终端系统已经成为了企业营销的重要工具。这些技术的结合可以帮助企业更好地与客户进行沟通&#xff0c;提高客户满意度和忠诚度&#xff0c;从而实现营销目标。 大语言模型可以帮…

Android:绘制自定义View人脸识别框

一.绘制矩形框实现 项目开发需要自定义View实现一个人脸框&#xff0c;代码实现很平常&#xff0c;一些细节记录一下&#xff0c;方便以后查阅。 代码实现&#xff1a; 1.1 自定义人脸识别框&#xff1a; FaceView.java package com.android.example.ui.view;import andro…

018:vue中自定义el-table 表头和单元格的样式

第018个 el-table 用于展示多条结构类似的数据&#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。 vue在使用element UI table的是经常要用到的&#xff0c;由于原有的表头和单元格的样式不能满足项目的需要&#xff0c;需要自己来自定义样式。同时这里也做了个overf…

B/S版医院检验科lis系统源码 云lis系统

LIS系统为实验室服务对象提供检验申请、采集标本、结果查询等功能&#xff1b;为实验室工作人员的核收标本、分送标本、传送资料、分析前处理、质量控制、单向或双向通讯、分析后处理、结果审核、打印报告、结果查询等标本检测过程提供全面的技术支持。 .Net Core LIS系统源码…

python代码性能分析

基准测试可以发现程序变慢了&#xff0c;那么是因为什么原因导致性能变慢的&#xff0c;需要进一步做代码性能分析。python同样提供了性能分析工具。 cProfile cProfile是python默认的性能分析器&#xff0c;他只测量CPU时间&#xff0c;并不关心内存消耗和其他与内存相关联的…

逻辑越权之找回机制及接口安全(35)

会涉及到这三个内容 验证会涉及到&#xff0c;暴力测试&#xff0c;绕过测试 找回会涉及到&#xff0c;客户端回显&#xff0c;respponse状态值&#xff0c;找回流程绕过 接口会涉及到&#xff0c;调用便利 找回就像是忘记密码那种&#xff0c;然后会有验证&#xff0c;手机…