DIV CSS 佈局教程網

上個月完成的項目，舉個讓我糾結N小時的模塊，先上圖：

默認狀態為灰色，不帶圓圈，已完成狀態為紅色，當前進行中顯示為黃色，並且圓圈在兩個字中間，最後一個狀態“成功”如果為灰色，線條要小於文字，但其它部分要連貫。原型代碼如下，為了JS結構當然越簡單越好：

<ul>
< li class=“status_finished”>選擇</li>
< li class=“status_current”>預訂</li>
< li>支付</li>
< li>成功</li>
< /ul>

讓人糾結的時候到了：圓圈左右線的顏色不同，如果切在一起那最後一個狀態就要單獨應用沒有右側多余線條的圖片，等於要切兩套圖，方案要放棄；如果每個狀態只切到圓圈部分，給右側留點空白出來它就會顯示在兩個字中間了，但緊接著的狀態怎麼延續到左側？有一個方法：負margin~~~

放大後的效果圖：

樣式如下：

ul { margin: 36px auto; height: 30px; }
ul li { float: left; width: 164px; margin-right: -6px; padding-top: 15px; text-align: right; background: url(“xxxx.gif”) no-repeat right XXpx; color: #666; }
ul li.status_finished { background-position: right XXpx; }
ul li.status_current { background-position: right XXpx; font-weight: bold; color: #000; }

注意：合並圖片的時候圓圈右側要留出6px（具體值根據實際情況確定）透明空隙，左側線條為自適應考慮盡可能長一點。