仿淘宝购买商品流程一样的状态进度条

最新推荐文章于 2021-05-31 14:12:13 发布

weixin_30426065

最新推荐文章于 2021-05-31 14:12:13 发布

阅读量299

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/wlj928449657/p/3713337.html

版权

html代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link href="../css/prgbar/line.css" rel="stylesheet" type="text/css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="taskmode-block clearfix" style="margin: -10px;">
            <div class="modecont ullen7 ullen7-curstep5">  <%--ullenx x代表几个状态  ullenx-curstepy y代表进行到哪个环节 gou 代表打钩 cur 高亮显示进行的环节--%>
                <div class="prgbar">                        
                </div>
                <div class="prgbar-inner">
                </div>
                <ul class="ullen7">
                    <li><span class="stepno"><span class="gou"></span></span>
                        <p>
                            计划发布</p>
                    </li>
                    <li><span class="stepno"><span class="gou"></span></span>
                        <p>
                            材料收集</p>
                    </li>
                    <li><span class="stepno"><span class="gou"></span></span>
                        <p>
                            初评</p>
                    </li>
                    <li><span class="stepno"><span class="gou"></span></span>
                        <p>
                            复评</p>
                    </li>
                    <li class="cur"><span class="stepno">5</span>
                        <p>
                            公示</p>
                    </li>
                    <li class="gray"><span class="stepno">6</span>
                        <p>
                            公示</p>
                    </li>
                    <li class="gray"><span class="stepno">7</span>
                        <p>
                            结束</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

CSS样式
p {
	margin: 0px; padding: 0px; outline: 0px; border: 0px currentColor; border-image: none; font-size: 100%; font-style: normal; text-decoration: none;
}
ul {
	margin: 0px; padding: 0px; outline: 0px; border: 0px currentColor; border-image: none; font-size: 100%; font-style: normal; text-decoration: none;
}



.taskmode-block {
	background:#CEFFCE; padding: 0; border: 1px solid rgb(233, 233, 233); border-image: none; margin-bottom: 5px; min-width: 810px;
}
.taskmode-block .header {
	padding-bottom: 6px; border-bottom-color: rgb(220, 220, 220); border-bottom-width: 1px; border-bottom-style: solid;
}
.taskmode-block .modecont {
	 position: relative;
}
.taskmode-block .modecont ul {
	border: 0px solid red; border-image: none;
}
.taskmode-block .modecont li {
	background: url("taskmode-step-new.png") no-repeat center; width: 16%; padding-top: 0px;top: -9px; display: inline-block; position: relative;
}
.taskmode-block .modecont li.gray {
	background: url("taskmode-step-new-gray.png") no-repeat center;
}
.taskmode-block .modecont li .stepno {
	left: 48.5%; top: 40%; color: rgb(255, 255, 255); font-weight: bold; position: absolute; z-index: 2;
}
.taskmode-block .modecont .ullen7 li .stepno {
	left: 48%;
}
.taskmode-block .modecont .ullen6 li .stepno {
	left: 48%;
}
.taskmode-block .modecont li .stepno .gou {
	background: url("taskmode-gou.png") no-repeat; left: -1px; width: 30px; height: 10px; display: inline-block; position: relative;
}
.taskmode-block .modecont li p {
	text-align: center; color: rgb(102, 102, 102); overflow: visible; white-space: nowrap; 
}
.taskmode-block .modecont li.cur p {
	color: rgb(255, 96, 0);
}
.taskmode-block .prgbar {
	background: rgb(220, 220, 220); left: 65px; top: 13px; width: 685px; height: 6px; position: absolute;
}

.taskmode-block .prgbar .prgbar-wrap {
	position: relative;
}

.taskmode-block .prgbar-inner {
	background: rgb(255, 138, 0); left: 65px; top: 14.5px; width: 0px; height: 2px; position: absolute; z-index: 1;
}

.taskmode-block .modecont .ullen7 li {
	width: 113px;
}
.taskmode-block .ullen7-curstep1 .prgbar-inner {
	width: 51px;
}
.taskmode-block .ullen7-curstep2 .prgbar-inner {
	width: 164px;
}
.taskmode-block .ullen7-curstep3 .prgbar-inner {
	width: 280px;
}
.taskmode-block .ullen7-curstep4 .prgbar-inner {
	width: 396px;
}
.taskmode-block .ullen7-curstep5 .prgbar-inner {
	width: 512px;
}
.taskmode-block .ullen7-curstep6 .prgbar-inner {
	width: 628px;
}
.taskmode-block .ullen7-curstep7 .prgbar-inner {
	width: 685px;
}
.taskmode-block .ullen6-curstep1 .prgbar-inner {
	width: 66px;
}
.taskmode-block .ullen6-curstep2 .prgbar-inner {
	width: 201px;
}
.taskmode-block .ullen6-curstep3 .prgbar-inner {
	width: 335px;
}
.taskmode-block .ullen6-curstep4 .prgbar-inner {
	width: 469px;
}
.taskmode-block .ullen6-curstep5 .prgbar-inner {
	width: 604px;
}
.taskmode-block .ullen6-curstep6 .prgbar-inner {
	width: 670px;
}
.taskmode-block .modecont .ullen4 li {
	width: 200px;
}
.taskmode-block .ullen4 .prgbar {
	left: 91px; width: 615px;
}
.taskmode-block .ullen4 .prgbar-inner {
	left: 91px; width: 615px;
}
.taskmode-block .ullen4-curstep1 .prgbar-inner {
	width: 109px;
}
.taskmode-block .ullen4-curstep2 .prgbar-inner {
	width: 312px;
}
.taskmode-block .ullen4-curstep3 .prgbar-inner {
	width: 515px;
}
.taskmode-block .ullen4-curstep4 .prgbar-inner {
	width: 615px;
}
.taskmode-block .ullen4 .taskmode-clock {
	left: 25px;
}
li { font-size:12px;}

p {margin-top:40px;}

转载于:https://www.cnblogs.com/wlj928449657/p/3713337.html