CSS基础-04-列表（有序列表、无序列表、自定义标记、移除默认标记）

1. 有序列表和无序列表（list-style-type）

1.1 语法

如果 列表标签（< ul >/< ol >）和list-style-type的值对不上，则显示默认

比如 < ul > 是无序标签，如果 class属性设置了 list-style-type:upper-roman，则会显示无序的默认值——实心圆。

无序列表

• 空心圆（circle）

list-style-type:circle;

• 实心圆（disc）

list-style-type:disc;

• 实心方形（square）

list-style-type:square;

有序列表

• 罗马大/小写（upper-roman / lower-roman）

list-style-type:upper-roman;
list-style-type:lower-roman;

• 英文字母大小写（upper-alpha / lower-alpha）

list-style-type:upper-alpha;
list-style-type:lower-alpha;

• 数字（decimal）

list-style-type:decimal;

1.2 完整示例

• 代码

  
    
    
    
  

  
    
无序列表实例:

    

      
刘备
      
关羽
      
张飞
    

    

      
刘备
      
关羽
      
张飞
    

    

      
刘备
      
关羽
      
张飞
    
    
有序列表实例:

    

      
刘备
      
关羽
      
张飞
    

    

      
刘备
      
关羽
      
张飞
    

    

      
刘备
      
关羽
      
张飞
    

    

      
刘备
      
关羽
      
张飞
    

    

      
刘备
      
关羽
      
张飞
    
  

• 显示结果

  
  
  image.png

2. 自定义标记（list-style-image）

url.xxx
{
    list-style-image:url('sqpurple.gif');
}

3. 移除默认标记（list-style-type: none）

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}