css步骤条_可滚动

最新推荐文章于 2024-05-12 22:01:36 发布
最新推荐文章于 2024-05-12 22:01:36 发布
阅读量392 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tx_xiaobai/article/details/108073394
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>步骤条_可滚动</title>
    <style type="text/css">
        ol.steps::-webkit-scrollbar { /* chrome 隐藏滚动条*/
            display: none;
        }
        ol.steps{
            list-style: none;
            display: flex;
            overflow-x: auto;
            height: 64px;
        }
        ol.steps:after,ol.steps li:after{
            content: '';
            display: block;
            clear: both;
        }
        ol.steps li{
            float: left;
            flex: 1;
            position: relative;
            min-width: 120px;
        }
        ol.steps li .step-line{
            height: 5px;
            background-color: #e0e0e0;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
            margin-top: 15px;
        }
        ol.steps li.step-active .step-line{
            background-color: #00a854;
            box-shadow: inset 0 1px 1px #00a854;
        }
        ol.steps .step-content{
            position: absolute;
            top:0;
            left:-15px ;
            text-align: center;
        }
        ol.steps li .step-content .step-num{
            display: inline-block;
            height: 30px;
            width: 30px;
            color: #fff;
            background-color: #b9b9b9;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            border:2px solid rgba(224,224,224,1);
        }
        ol.steps li.step-active .step-content .step-num{
            background-color: #00a854;
        }
        ol.steps li.step-end{
            width: 120px!important;
            flex: inherit;
        }
        ol.steps li.step-end .step-line{
            display: none;
        }

    </style>
</head>
<body>
<div>
    <ol class="steps">
        <li class="step-active">
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">1</span>
                <div>填写资料</div>
            </div>

        </li>
        <li class="step-active">
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">2</span>
                <div>审核填写信息</div>
            </div>
        </li>
        <li class="step-active">
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">3</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
        <li class="step-active">
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">4</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
        <li class="step-active">
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">5</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
        <li>
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">6</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
        <li>
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">7</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
        <li>
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">8</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
        <li>
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">9</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
        <li class="step-end">
            <div class="step-line"></div>
            <div class="step-content">
                <span class="step-num">10</span>
                <div class="step-text">完成注册</div>
            </div>
        </li>
    </ol>
</div>

</body>
</html>

 

tx_xiaobai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
step_progress_bar:这是 CSS 中的响应式水平步进进度条
05-29
步骤进度条 这是 CSS 中的响应式水平步进进度条 使用的技术 HTML5 CSS3 特征 React灵敏 如果它包含任何未命中的匹配，欢迎您更新此源代码。
简单的滑动条
xiaozhen0610的博客
06-09 265
今天要做个滑动条 如图： 用jqueryUI实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的滑动条插件</title> <link rel="stylesheet" href="js/jQueryUi/jquery-ui.min.css"> <script src="js/jque
纯CSS实现步骤条
最新发布
JavaScritp
05-12 603
步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单的步骤条，包含上述三个基本要素。
css设置内容可滚动,3种方法实现CSS隐藏滚动条并可以滚动内容【转载】
weixin_35834687的博客
08-04 855
隐藏方法1：计算在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。下面给一个简化版的代码·.......outer-container{width: 360px;height: 200px;position: relative;overflow: hidden;}.inner-container{posi...
滑动条（Slider），进度条（ProgressBar）运用
07-06
WPF开发过程中少不了有些界面加载等待，不能没有过度界面处理你不然显得软件如同卡死了一般，用户体验极度不好。这需要使用到各种样式的进度条过渡处理展示些细节提醒用户。有些参数的调整一味的使用文本框调整太生硬可以考虑使用滑动条，例如声音的调节等等。
css实现竖向步骤条.zip
09-21
在本主题中，我们将深入探讨如何使用CSS（Cascading Style Sheets）来创建一个竖向步骤条，这是一种非传统的布局方式，能为界面增添独特的视觉效果。 一、基本结构 首先，我们需要创建HTML的基本结构，这通常包括...
css美化滚动条
07-24
总的来说，CSS美化滚动条是一个提升网页设计细节和用户体验的重要步骤。通过合理的样式设置和适时的JavaScript辅助，我们可以创建出既美观又实用的自定义滚动条，使用户在浏览网页时享受更加流畅的体验。
Slide_Demo.zip_DEMO_滚动条
09-19
在实际操作中，阅读这个文件可以获取更多关于如何使用演示程序或实现自定义滚动条的具体步骤。 总的来说，自定义多彩滚动条涉及多个技术领域，包括前端的CSS、后端的UI设计以及各种编程语言的特定API。通过理解和...
javafx_tableview设置背景透明和滚动条
07-27
JavaFX的滚动条有多个部分，包括轨道、拇指（即滚动条上的可移动部分）等，每个部分都需要单独设置透明度。 4. **滚动条样式**：在CSS文件中，定义滚动条的样式。例如，设置垂直滚动条的轨道和拇指透明： ```css ....
滚动条的生成及环境变化的改变.rar_last298_滚动条
09-23
在编程世界中，滚动条是用户界面不可或缺的一部分，它允许用户查看和操作超过屏幕范围的内容。本主题聚焦于如何在Qt框架下自定义绘制滚动条，以及从Qt 4过渡到Qt 5时可能遇到的变化。 Qt是一个跨平台的C++图形用户...
纯HTML流程步骤条
12-08
纯HTML自适应流程步骤条，根据需求定制修改，下载即可用
div+css布局制作箭头步骤流程样式 - div+css教程
10-15
div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
可以无限加步骤的步骤条，手机上超出屏幕宽度可以滑动
u012746918的博客
07-17 319
可以无限加步骤的步骤条，手机上超出屏幕宽度可以滑动
CSS实现横向滚动-x轴滚动
Mitin_的博客
11-02 3499
【代码】CSS实现横向滚动-x轴滚动。
css如何设置x轴为滚动,css x轴滑动
weixin_34469962的博客
08-03 2526
css代码：.list_box {background: #fff;width: 100%;height: 80rpx;border-bottom: 1px solid #f2f3f5;}.list_wrap {height: 80rpx;overflow-x: scroll;overflow-y: hidden;padding: 0 20rpx;white-space: nowrap;}.lis...
【CSS】滚动条样式详解
热门推荐
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
css设置滚动条样式_css3 滚动条样式设置
weixin_40003512的博客
11-29 87
<div class='step-con'></div>.step-con{ height: 340px; overflow-y: auto; &::-webkit-scrollbar { width: 14px; height: 14px; } &::-webkit-scroll...
记录--纯CSS实现一个简单又不失优雅的步骤条
林恒的博客
06-07 3314
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。先来看一下几个主流前端 UI 框架中步骤条组件的样子： ElementPlus AntDesign OpenTiny iView 我们可以发现，步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单...
实现CSS隐藏滚动条并可以滚动内容
06-02
要实现CSS隐藏滚动条并可以滚动内容，可以通过以下步骤： 1. 隐藏滚动条 可以使用CSS的伪元素选择器来隐藏滚动条，如下所示： ``` /* 隐藏纵向滚动条 */ ::-webkit-scrollbar { display: none; } ``` 其中 `::-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值