<tbody id="9je1r"></tbody><tbody id="9je1r"><acronym id="9je1r"><rp id="9je1r"></rp></acronym></tbody>

亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

DIV中如何用css寫一個簡單的步驟進(jìn)度條

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

用css寫一個簡單的步驟進(jìn)度條

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>

上一篇 DIV+CSS中用到的CSS字體代碼

下一篇 CSS選擇器，標(biāo)簽的限定

【微信掃一掃】

亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

DIV中如何用css寫一個簡單的步驟進(jìn)度條

文章分類

相關(guān)新聞

熱門標(biāo)簽