CSS基础--progress bar

Step1:把基础的element都先写出来

<style>
    .container{
        width:100%;    
    }
</style>
</head>
<body>
    <div class="container">
        <ul>
            <li>Step 1</li>
            <li>Step 2</li>
            <li>Step 3</li>
            <li>Step 4</li>
        </ul>
    </div>
</body>

Step2: 在style里面，多加入li的css的属性，让Step可以水平显示:

li{
        list-style-type:none;
        float:left;
　　　　 width:20%;
        position:relative;
        text-align:center;
}

Step3:

 1     li:before{
 2         content:'1'; //用来显示圈圈里面的1
 3         width:30px;  //圈圈的width
 4         height:30px; //圈圈的hight--这个最好跟width相等--这样子，圈圈比较好看
 5         line-height:30px;
 6         border:1px solid #ddd;
 7         display:block;
 8         text-align:center;
 9         margin:0 auto 10px auto;
10         border-radius:50%; //这步是划圈圈的，50度角
11         background-color:white;    
12     }

Step4: li:after是紧跟在li后面的.

li:after{
        content:'hello';
        width:120px;
        height:5px;
        background-color:#ddd;    
}

 

Step5:li:after是紧跟在li后面的.这里可以移动hello (这里绝对定位,height为5px,如果想划一条一直线，则把hello内容delete及把height:1px)

li:after{
        content:'hello';
        width:120px;
        height:5px;
        background-color:#ddd;
        position:absolute;
        top:15px;    
}

 

Step6:li:after是紧跟在li后面的.这里绝对定位,height为5px,如果想划一条一直线，则把hello内容delete及把height:1px

li:after{
        content:'';
        width:120px;
        height:1px;
        background-color:#ddd;
        position:absolute;
        top:15px;    
}

 

 

Step7:width:100%; //这个长度就是从一个圈圈的中心点到达另一个圈圈的外边

(Step1的right_margin+right_padding+left_padding+left_margin==Step1的left_padding+left_margin+Step2的right_margin+right_padding)

li:after{
        content:'';
        width:100%;  //这个长度就是从一个圈圈的中心点到达另一个圈圈的外边
        height:1px;
        background-color:#ddd;
        position:absolute;
        top:15px;
        left:50%;    //因为绝对定位,圈圈的中心点
}

Step8:把最后一个圆后面的一直delete

li:last-child:after{
        content:none;    
}

Step9: 修改圈圈里面的数字

.container{
        width:100%;    
        counter-reset:step;  //初始化这个变量，否则不能使用
}
li:before{
        content:counter(step);  //计算且使用这个变量
        counter-increment:step;  //让这个变量自动加1
        width:30px;
        height:30px;
        line-height:30px;
        border:1px solid #ddd;
        display:block;
        text-align:center;
        margin:0 auto 10px auto;
        border-radius:50%;
        background-color:white;    
}

Step10: 删除圈圈里的线

li:after{
        content:'';
        width:100%;
        height:1px;
        background-color:#ddd;
        position:absolute;
        top:15px;
        left:50%;
        z-index:-1; //把直线的显示放到下面一个layer    
}

可以加点colour and make this world more colourful

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Progress Bar</title>
<style>
    .container{
        width:100%;    
        counter-reset:step;
    }
    li{
        list-style-type:none;
        float:left;
        width:20%;
        position:relative;
        text-align:center;
    }
    li:before{
        content:counter(step);
        counter-increment:step;
        width:30px;
        height:30px;
        line-height:30px;
        border:1px solid #ddd;
        display:block;
        text-align:center;
        margin:0 auto 10px auto;
        border-radius:50%;
        background-color:white;    
    }
    li:after{
        content:'';
        width:100%;
        height:1px;
        background-color:#ddd;
        position:absolute;
        top:15px;
        left:50%;
        z-index:-1;    
    }
    li:last-child:after{
        content:none;    
    }
    li:active{
        color:green;
    }
    li.active:before{
        border-color:green;
    }
</style>
<script>
window.onload = function(){
    var lis = document.getElementsByTagName("li");
    var i=0,size=lis.length;
    var oInterval = setInterval(function(){
        console.log(lis);
        if(i<size){
            lis[i].className="active";
            i=i+1;
        }else{
            if(oInterval!=null){
                clearInterval(oInterval);
                oInterval=null;
            }
        }
    },2000);
}
</script>
</head>
<body>
    <div class="container">
        <ul>
            <li>Step 1</li>
            <li>Step 2</li>
            <li>Step 3</li>
            <li>Step 4</li>
        </ul>
    </div>
</body>
</html>

 

holder

 

holder

 

posted on 2016-09-18 21:58  yeatschen  阅读(387)  评论(0)    收藏  举报

导航