最简单的用HTML+CSS实现横板和竖版进度条信息展示，附源码

最新推荐文章于 2024-10-08 20:53:21 发布

不在、不再

最新推荐文章于 2024-10-08 20:53:21 发布

阅读量1.1k

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/lwqjkfge/article/details/122218663

版权

本文介绍了如何在业务型公司中制作自定义进度条组件，包括横版和竖版两种样式。作者分享了实现简单数据展示的进度条HTML和CSS代码，强调了高度自定义的灵活性，方便后续添加交互和样式修改。同时提供了横版和竖版的最终效果展示，代码可以直接运行查看。

摘要由CSDN通过智能技术生成

在业务型公司中，能不能实现功能才是首要问题，例如用户报修业务、预约业务、材料审核业务等，往往离不开进度条模块。因为通过横板或竖版的进度条，用户可以直观的根据时间线看到预约或审核进度。

在笔者最近的工作中，就碰到一个进度条的需求，只作简单的数据展示，没有复杂的交互。因为产品对进度条样式要求高度自定义，往往在网上找不到好的资源来实现，所以笔者决定花点时间，自己手写一个，后续要新加交互或设置样式，都是非常方便的。

最终实现的横板效果如下：

实现横版进度条的代码如下，可以直接复制到本地运行：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条（横板）</title>
    <style>
        .timeline_ul {
            margin: 0px 20px;
            /* 清楚li元素自带的小圆点样式 */
            list-style: none;
        }
        /* li元素默认是自伤往下排的,所以用浮动让每个li元素横排 */
        
        .timeline_ul li {
            float: left;
            width: 20%;
        }
        
        .dot {
            display: inline-block;
            width: 5%;
            height: 10px;
            border-radius: 50%;
            background: black;
            /* 让小圆点下移和横线居中对齐 */
            margin-bottom: -5px;
        }
        
        .item {
            display: inline-block;
            width: 95%;
            margin-left: -5px;
            border-bottom: 1px solid black;
        }
        
        .tips {
            width: 100%;
            margin-left: -12px;
            margin-top: -6px;
        }
        
        .tips p {
            width: 95%;
            /* 自动换行 */
            white-space: pre-wrap;
        }
        
        .review-title {
            margin-bottom: 0px;
        }
        
        .review-time {
            margin: 4px 0px;
        }
        
        .review-content {
            margin: 6px 0px;
        }
        
        .timeline_ul li:last-child {
            color: #1890ff;
        }
        /* 隐藏最后一个进度的横线 */
        
        .timeline_ul li:last-child .item {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="timeline_ul">
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题1</p>
                <p class="review-time">2017-12-01 15:00:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
    </ul>
</body>

</html>

最终实现的竖版效果如下：

实现竖版进度条的代码如下，可以直接复制到本地运行：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条（竖版）</title>
    <style>
        .timeline_ul {
            margin: 0px 20px;
            /* 清楚li元素自带的小圆点样式 */
            list-style: none;
        }
        /* 设置li元素浮动并且每个li元素宽度为100%,那么li元素就是自上而下排列了 */
        
        .timeline_ul li {
            float: left;
            width: 100%;
            height: 105px;
        }
        
        .dot {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: black;
            margin-bottom: -4px;
        }
        
        .item {
            float: left;
            height: 95px;
            border-left: 1px solid black;
            margin-left: -5px;
            margin-top: 10px;
        }
        
        .tips {
            float: left;
            margin-left: 10px;
            margin-top: -21px;
        }
        
        .tips p {
            /* 不换行 */
            white-space: nowrap;
        }
        
        .review-title {
            margin-bottom: 0px;
        }
        
        .review-time {
            margin: 4px 0px;
        }
        
        .review-content {
            margin: 6px 0px;
        }
        
        .timeline_ul li:last-child {
            color: #1890ff;
        }
        /* 隐藏最后一个进度的横线 */
        
        .timeline_ul li:last-child .item {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="timeline_ul">
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题1</p>
                <p class="review-time">2017-12-01 15:00:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
    </ul>
</body>

</html>

如果需要更改进度条小圆点为其他图标，可以直接在<span class="dot"></span>种写入图标标签然后进行一些样式上的调整。如果读者发现代码有错误的地方或自己有更高明的做法，欢迎评论区留言讨论，如果觉得不错，可以点赞转发给更多的人看到哦，转载请注明出处，感谢~

作者公众号：程序的艺术，欢迎关注一起探寻更多的程序艺术