css 实现横向步骤条

最新推荐文章于 2024-05-24 17:17:32 发布

咖啡有点酷

最新推荐文章于 2024-05-24 17:17:32 发布

阅读量2.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40295815/article/details/106101137

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
	<style type="text/css">
		ul {
			margin:0px;
			padding:0px;
			list-style:none;
		}
		.wrap {
			width:960px;
			height:auto;
			line-height:30px;
			margin:100px auto 0;
		}
		.step-case {
			height:40px;
		}
		.step-case li {
			float:left;
			margin:0px;
			width:12.5%;
			position:relative;
			cursor:pointer;
		}
		.step-case li span {
			display:block;
			background-color:#ccc;
			height:40px;
			line-height:40px;
			text-align:center;
			color:#fff;
			font-weight:bold;
		}
		.step-case b {
			position:absolute;
			font-size:0px;
			line-height:0px;
			top:0px;
		}
		.step-case .b-l {
			border-width:2px 2px 2px 0;
			border-style:dashed solid dashed dashed;
			border-color:transparent #ccc transparent transparent;
			height:36px;
			left:-2px;
		}
		.step-case .b-r {
			border-width:2px 0 2px 2px;
			border-style:dashed dashed dashed solid;
			border-color:transparent transparent transparent #ccc;
			height:36px;
			right:-2px;
		}
		.step-case .b-1 {
			border-width:20px 0 20px 20px;
			border-style:solid dashed solid solid;
			border-color:#ccc transparent #ccc #ddd;
			left:-20px;
		}
		.step-case .b-2 {
			border-width:20px 0 20px 20px;
			border-style:dashed dashed dashed solid;
			border-color:transparent transparent transparent #ccc;
			left:-21px;
		}
		/*当前状态*/
				.step-case .s-cur span {
			background-color:orange;
		}
		.step-case .s-cur .b-l {
			border-right-color:orange;
		}
		.step-case .s-cur .b-r {
			border-left-color:orange;
		}
		.step-case .s-cur .b-1 {
			border-color:orange orange orange #FABF55;
		}
		.step-case .s-cur .b-2 {
			border-left-color:#FADBA5;
		}
		/*当前状态后*/
				.step-case .s-cur-next .b-2 {
			border-color:transparent transparent transparent orange;
		}
		/*完成的状态*/
				.step-case .s-finish span {
			background-color:#FADBA5;
			color:#000;
		}
		.step-case .s-finish .b-l {
			border-right-color:#FADBA5;
		}
		.step-case .s-finish .b-r {
			border-left-color:#FADBA5;
		}
		.step-case .s-finish .b-1 {
			border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;
		}
		.step-case .s-finish .b-2 {
			border-left-color:#FADBA5;
		}
	</style>
	<body>
		<div class="wrap">
		    <ul class="step-case" id="step">
		        <li class="s-cur"><span>第1步</span><b class="b-l"></b></li>
		        <li class="s-cur-next"><span>第2步</span><b class="b-1"></b><b class="b-2"></b></li>
		        <li><span>第3步</span><b class="b-1"></b><b class="b-2"></b></li>
		        <li><span>第4步</span><b class="b-1"></b><b class="b-2"></b></li>
		    </ul>
		</div>
	</body>
</html>

咖啡有点酷

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 实现横向步骤条

<html> <style type="text/css"> ul { margin:0px; padding:0px; list-style:none; } .wrap { width:960px; height:auto; line-height:30px; margin:100px auto 0; } .step-case { height:40px; } .step-case li { fl.
复制链接

扫一扫