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. }