jquery实现一个步骤条效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现一个步骤条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: white;
}
.btnext {
background: blue;
color: #fff;
width: 100px;
text-align: center;
border-radius: 10px;
height: 48px;
line-height: 0px;
position: relative;
top: 60px;
left: 70px;
}
ul,li {
list-style: none;
margin: 0;
padding: 0
}
.bar-box {
position: relative;
top: 11px;
left: 10px
}
.bar-content {
position: relative;
z-index: 9999
}
.bar-bg {
width: 100%;
height: 6px;
background: #ddd;
position: relative
}
.bar-color {
width: 0%;
height: 6px;
background: #64bd2e;
position: absolute;
left: 0;
top: 0
}
.bar-circle-ul {}.bar-circle-ul li {
float: left
}
.bar-circle-ul li div {
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
display: inline-block;
border-radius: 50%;
background: #ddd;
color: #252525;
position: relative
}
.bar-circle-ul li div span {
position: absolute;
top: -33px;
color: #ddd;
left: -254%;
width: 200.........完整代码请登录后点击上方下载按钮下载查看
网友评论0