用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>
【 微信掃一掃 】
