css 步骤条

最新推荐文章于 2024-08-06 10:52:09 发布
最新推荐文章于 2024-08-06 10:52:09 发布
阅读量5.7k 收藏 2
点赞数
分类专栏： css Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang_Red/article/details/50262723
版权

效果：



代码：

<!DOCTYPE html>
<html lang="zh-CN" ng-app="phonecatApp">
<head>
	<meta charset="UTF-8">
	<title>CSS步骤条</title>
	
	<style>
		.step-container {
            margin: 0;
            padding: 0;
			width: 100%;
		}
        .step-container li {
            display: inline-block;
            float: left;
            position: relative;
            margin: 0;
            padding: 0;
            width: 33%;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-align: center;
            background-color: #ccc;
            color: #ffffff;
        }
        .step-container li.step-past {
            background-color: #9cddf5;
            width: 34%;
        }
        .step-container li.step-current {
            background-color: #00a2ca;
        }

        .arrow {
            position: absolute;
            right: -7.5px;
            height: 30px;
            background-color: #ffffff;
            z-index: 2;
        }
        .arrow span {
            display: inline-block;
            border-left: 15px solid transparent;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
        }
        .arrow-next {
            margin-left: -15px;
        }
        .arrow-past .arrow-pre {
            border-left: 15px solid #9cddf5;
        }
        .arrow-past .arrow-next {
            border-top: 15px solid #00a2ca;
            border-bottom: 15px solid #00a2ca;
        }
        .arrow-current .arrow-pre {
            border-left: 15px solid #00a2ca;
        }
        .arrow-current .arrow-next {
            border-top: 15px solid #cccccc;
            border-bottom: 15px solid #cccccc;
        }
	</style>
</head>

<body >
	
	<ul class="step-container">
		<li class="step-past">第一步
            <span class="arrow arrow-past">
                <span class="arrow-pre"></span>
                <span class="arrow-next"></span>
            </span>
        </li>
		<li class="step-current">第二步
            <span class="arrow arrow-current">
                <span class="arrow-pre"></span>
                <span class="arrow-next"></span>
            </span>
        </li>
		<li class="step-next">第三步</li>
	</ul>

</body>

</html>

补充：

去除浮动：
.clearfix:after { 
	content:"."; 
	display:block; 
	height:0; 
	visibility:hidden; 
	clear:both; 
}




Jredreamer
关注
专栏目录
CSS实现箭头步骤条
jyin_的博客
11-18 2270
<ul class="Steps"> 　<li class="active">T0 初步接触</li> 　<li class="active">T1 确立目标</li> <li class="active">T2 开发攻关</li> 　<li>T3 实现成交</li> <li>T4 做大做深</li> <li>T5 战略合作</li&g
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
CSS步骤条
weixin_43928966的博客
03-25 781
HTML <!-- 定制流程 --> <div class="customized-wap"> <div class="customized"> <div class="customized-title">定制流程</div> <div class="customized-content"> <div class="customized-content-step-line"&gt.
超简单的！纯css实现步骤条
zxo_apple的博客
08-06 194
【代码】超简单的！纯css实现步骤条。
CSS实现竖向步骤条
weixin_42871919的博客
05-11 547
【代码】CSS实现竖向步骤条。
步骤条
weixin_30478923的博客
09-18 94
https://blog.csdn.net/xqq580231/article/details/78086173 转载于:https://www.cnblogs.com/beimingbingpo/p/9667186.html
css实现竖向步骤条.zip
09-21
在本主题中，我们将深入探讨如何使用CSS（Cascading Style Sheets）来创建一个竖向步骤条，这是一种非传统的布局方式，能为界面增添独特的视觉效果。 一、基本结构 首先，我们需要创建HTML的基本结构，这通常包括...
基于layui的步骤条
07-12
layui的CSS样式可以为我们的步骤条提供基础的视觉效果。例如，我们可以创建一个包含多个li元素的ul列表，每个li代表一个步骤，通过设置不同的class来表示步骤的状态（如未完成、进行中、已完成）。 ```html  ...
bootstrap步骤条-按钮-箭头样式
12-13
在这个主题中，我们关注的是如何利用Bootstrap和CSS3创建一种特殊的步骤条，它包含带有箭头指向的按钮，这些按钮可以指示用户操作流程的方向。下面将详细阐述实现这个功能所需的知识点。 1. **Bootstrap基础**： -...
纯HTML流程步骤条
12-08
纯HTML自适应流程步骤条，根据需求定制修改，下载即可用
很实用的步骤条
02-05
很漂亮 且很实用的步骤条 下载就可使用
步骤条Demo
09-07
步骤条的示例代码，单独的步骤条的实例以及将步骤条应用到页面上的实例。
步骤条，申请步骤
09-13
步骤条，申请步骤
流程进度条(css+div+image)
01-21
通过css+div 实现流程进度条的展示
步骤条(Progress Steps)
qq_45268602的博客
01-28 1949
重点： 1、使用flex布局 2、使用伪元素 3、计算进度条宽度，进行类名操作 实现代码： index.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=devic.
步骤条（Stepper）
斌
07-01 3718
Stepper 有以下常用属性： currentStep → int - 步骤位置。 onStepCancel → VoidCallback - 点击 cancel 时触发。 onStepContinue → VoidCallback - 点击 continue 时触发。 onStepTapped → ValueChanged - 状态改变时触发。 steps → List - 步...
步骤条纯css
花开富贵的博客
03-30 666
做了一个丑丑的步骤条，记录一下 <!-- Step.vue --> <template> <div> <Alert show-icon style="width: 900px;">审批单号：{{stepInfo.no}}</Alert> <div class="stepOut"> <u...
Vue3步骤条（Steps）
Mr Dear的博客
04-06 6978
引导用户按照流程完成任务的导航步骤条，支持：两种标签放置位置；迷你版步骤条；垂直版步骤条；点状步骤条；并且可点击；总之，功能丰富，简单易用😁😁
css步骤条矩形向右箭头边框
最新发布
09-07
CSS步骤条矩形向右箭头边框通常用于创建指示进度或者步骤序列的视觉元素，比如导航菜单、任务列表等。要创建这样的效果，你可以通过组合`border-image`, `border-radius` 和 `transform` 属性来实现。以下是一个简单的示例： ```css .step-progress { display: inline-block; width: 50px; /* 步骤条宽度 */ height: 24px; /* 高度可以根据需求调整 */ border-radius: 8px 0 0 8px; /* 圆角顶部和底部较小，右侧较大 */ background-color: #ccc; /* 步骤背景颜色 */ border-right: 16px solid transparent; /* 右侧透明区域 */ position: relative; /* 确保内部元素定位 */ } .arrow-right { content: ""; position: absolute; top: 50%; right: -8px; /* 避免箭头与步骤条重叠 */ transform: translateY(-50%) rotate(45deg); /* 箭头垂直居中并顺时针旋转 */ width: 0; height: 0; border-left: 8px solid transparent; border-top: 8px solid #fff; /* 箭头颜色 */ } ``` 在这个例子中，`.step-progress` 是主容器，而 `.arrow-right` 作为伪元素添加了一个向右的三角形箭头。你可以根据需要调整尺寸、颜色和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值