步驟進度條 css，進度條css

步驟進度條 css，進度條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