使用CSS进一步处理列表

CSS方框模型如何影响列表

与列表相关的特定样式包括：list-style-image（用于放置一幅图像作为列表项标记）、list-style-position（指示把列表项标记放在什么位置）、list-style-type（列表项标记本身的类型）。通过这样样式控制列表和列表项的结构，可以使用margin、padding、color、和background-color样式利用列表实现甚至更具体的显示效果。

    
    


    
List Test
    

        
Item #1
        
Item #2
        
Item #3
    

给无序列表本身提供了蓝色的背景，黑色的边框，和100px的特定宽度，列表项则具有灰色的背景和黄色的边框，列表项文本和指示符是黑色的。
无论列表的类型是什么，左边的默认填充值仍然保持相同。如果向样式表中添加list-style-type：none；创建一个没有列表项指示符的列表，将会看到填充仍然保持相同。

放置列表项指示符

list-style-position属性的默认值是outside，意味着项目符号、编号及其他标识符将保持在由

标签对创建的方框外面的文本左边。当文本在列表项内换行时，它将在该方框内换行，并且保持左对齐到元素的左边框。
但是，当list-style-position的值为inside时，指示符位于由

标签对创建的方框内。不仅列表项指示符随后将进一步缩进，而且文本将在每个列表项指示符底下换行。

利用CSS创建图像映射

    
    


    

        

            
I LOVE YOU
            
NICE TO MEET YOU
            
NICE MEETING YOU
            
DO YOU LOVE ME
            
I WANT TO MARRY YOU
        
    

text-indent:-1000em;可以保证文本永远也不会出现。

#theImg a:hover{
            border: 4px solid #ffffff;
        }

当用户的光标悬停在包含一个连接的列表项上时，由于样式表中的上面这个条目，该列表项将显示4px的纯白色边框。