CSS列表(新聞列表、導航條)常見寫法

以下面這個UL做演示

1. <ul>
2. <li><a href="#"><span>2014-4-1</span>教育</a></li>
3. <li><a href="#"><span>2014-5-1</span>專家</a></li>
4. <li><a href="#"><span>2014-6-1</span>授課</a></li>
5. <li><a href="#"><span>2014-7-1</span>培訓</a></li>
6. </ul>

新聞列表，CSS范例：

1. ul {
2. /* 去掉列表前面的點號 */
3. list-style-type:none;
4. }
5. ul li {
6. /* 寬度600px */
7. width:600px;
9. /* 行高24px */
10. line-height:24px;
11. }
12. ul li a, ul li a:active {
13. /* 內邊距5px */
14. padding:5px;
16. /* 文字顏色灰色 */
17. color:#888;
19. /* 去掉超鏈接下划線 */
20. text-decoration:none;
22. /* 讓超鏈接以塊級元素的形式顯示，這一行非常重要 */
23. display:block;
24. }
25. ul li a:hover {
26. /* 鼠標放上去是天藍色 */
27. color: #08c;
28. }
29. ul li a span{
30. /* 讓日期浮動到最右邊，注意：span一定要在標題的左邊，否則低版本IE不兼容 */
31. float:right;
32. }

導航條

以下面這個UL做演示

1. <ul>
2. <li><a href="#">首頁</a></li>
3. <li><a href="#">php培訓</a></li>
4. <li><a href="#">php課程</a></li>
5. <li><a href="#">關於我們</a></li>
6. </ul>

導航條，CSS范例：

1. ul {
2. /* 去掉列表前面的點號 */
3. list-style-type:none;
4. }
5. ul li {
6. /* 行高24px */
7. line-height:24px;
9. /* 設置li為左浮動，這樣就成為橫排的導航條了 */
10. float:left;
11. }
12. ul li a, ul li a:active {
13. /* 上下邊距5px，左右內邊距15px */
14. padding:5px 15px;
16. /* 文字顏色灰色 */
17. color:#888;
19. /* 去掉超鏈接下划線 */
20. text-decoration:none;
22. /* 讓超鏈接以塊級元素的形式顯示，這一行非常重要 */
23. display:block;
24. }
25. ul li a:hover {
26. /* 鼠標放上去是天藍色 */
27. color: #08c;
28. }