你的位置:首页 > 网页设计

[网页设计]步骤进度条 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