步骤进度条 css

用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>

View Code

 

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>

View Code

 

转载于:https://www.cnblogs.com/Dear/p/5783101.html