DIV中如何用css寫一個簡單的步驟進度條

2016/8/20 9:16:07 閱讀：1923 發(fā)布者：1923

用css寫一個簡單的步驟進度條

html代碼：

<h4>深圳游玩</h4>  
 <ul class="step-list">  
    <li>  
        <span class="step">第一天</span>  
        <div class="content">洪湖公園、荔枝公園</div>      
    </li>  
    <li>  
        <span class="step">第二天</span>  
        <div class="content">蓮花山公園、園博園</div>  
    </li>  
    <li>  
        <span class="step">第三天</span>  
        <div  class="content">中華民族錦繡村、世界之窗</div>  
    </li>  
    <li>  
        <span class="step">第四天</span>  
        <div class="content">歡樂谷</div>  
    </li>  
    <li class="latest">  
        <span class="step">第五天</span>  
        <div class="content">西沖海邊游</div>  
    </li>  
 </ul>

css代碼：

<style>  
    .step-list{  
         margin:0;  
        padding:0;  
        margin-left:12px;  
        margin-top:-9px;  
        padding-left:10px;  
        list-style:none;  
        font-size:12px  
    }  
    .step-list li{  
        height:60px;  
        border-left:1px solid #d9d9d9  
    }  
    .step-list li:before{  
        content:’’;  
        border:5px solid #f3f3f3;  
        background-color:green;  
        display:inline-block;  
        width:10px;  
        height:10px;  
        border-radius:50%;  
        margin-left:-10px;  
        margin-right:10px  
    }  
    .step-list .step{  
        font-weight:700;  
        margin-right:8px;  
        font-family:Arial  
        }  
    .step-list .content{  
        display:inline-block;  
        width:653px;  
        vertical-align:text-top;  
        line-height:1.3em  
    }  

    .step-list .latest{  
        border:none;  
    }  
    .step-list .latest:before{  
        background-color:#fe4300;  
        border-color:#f8e9e4  
    }  
    </style>