Css基础学习（六）—列表

 

浏览任何基于Web标准建立的网站资源，几乎都可以看到一个导航列表、一个外部链接列表、有的还有按钮列表和数组列表。网站设计开始阶段就采用简单的列表可保证设计的灵活性和各种功能，并且可以在某些浏览场景下简化设计。

1、list-style-type属性

list-style-type属性可以从多个可能的列表项目符中为列表设定一个特定列表项目符，使列表不采用默认的disc。常用的值有：none、disc、circle、square、latin；这些值看英文就知道会显示什么了。

另外常用的upper-alpha:A、B、C、D、E等；lower-alpha:a、b、c、d、e等；upper-roman:I、II、III、IV、V等；

我们看看使用的css语句：

1. /* Style for all default lists */
2. ul{
3. list-style-type:square;
4. }

显示的效果(编辑状态下是好的，发布就变成圆点了。。。读者就自己体会一下吧)：

• Drinks Menu
• Beer
• Spirits
• Cola
• Lemonade
• Tea
• Coffee

2、外边距与内边距

如果我们使用list-style-type:none;的样式，实际的列表项并不会因为去掉了列表项目符就紧靠左边框。

大部分的浏览器将列表项置于距离无序列表左边框30像素处（默认padding）。无序列表本身距离容器的上边框约10像素（默认margin）。

3、list-style-position属性

list-style-position属性的默认值为outside，还可以设置inside值，inside使列表项目符内联在文本中。

list-style-position:inside;长文本在列表项目符下另起一行，好像列表项目符是个普通字符一样。此属性作用不大，就在此提一下。

4、list-style-image属性

这个属性可以用自定义的图片来替代那些平淡无奇的列表项目符。下面的css正表现了这个样式：

1. ul{
2. margin:0;
3. padding:0 0 0 25px;
4. width:200px;
5. list-style-image:url(images/list.gif);
6. line-height:150%;
7. }

我们还可以选择另外一种方式来实现列表项目符使用图片来替代，而且功能更加的强大，可以每个列表使用不同的图案。

1. ul{
2. list-style:none;
3. }
4. li{
5. background:transparent url(images/list.gif) no-repeat left center;
6. padding:0 0 0 25px;
7. }

5、list-style缩写

list-style-type、list-style-position和list-style-image可以按任意次序排列。

1. list-style:none inside url(images/list.gif);

不过如果有了list-style-image设置，就不需要设置list-style-type，因此这个缩写意义不大。

6、内联列表

无序列表默认垂直显示的，因为li元素是块级元素，那水平显示就是将块级元素转变为内联的元素。下面就是css的实现方式，简单的很。

1. ul{
2. list-style-type:disc;
3. }
4. li{
5. display:inline;
6. background:transparent url(images/list.gif) no-repeat left center;
7. margin:0 0 0 10px;
8. padding:0 0 0 15px;
9. }

设置成水平列表以后，列表项目符就不再显示了，如果我们还需要列表项目符，就要使用前面讲到的设定背景图像了。

上面css效果如下：

• Drinks Menu
• Beer
• Spirits
• Cola
• Lemonade
• Tea
• Coffee

7、用于导航的列表

还是前面使用的列表，修改一下css来改变列表成为导航列表的样子；

1. ul{
2. list-style-type:none;
3. margin:5px;
4. padding:2px;
5. border:1px solid #333;
6. width:160px;
7. font:bold 12px 'Lucida Grande',Verdana,sans-serif;
8. }
9. li{
10. background:#DDD;
11. margin:0;
12. padding:2px 10px;
13. border-left:1px solid #fff;
14. border-top:1px solid #fff;
15. border-righr:1px solid #666;
16. border-bottom:1px solid #aaa;
17. }

上面的显示效果如下：

• Drinks Menu
• Beer
• Spirits
• Cola
• Lemonade
• Tea
• Coffee