list-style-type属性、list-style-image属性、list-style-position属性、list-style复合属性的用法，背景图像定义项目符号/学习笔记

一、list-style-type属性
在css中list-style-type属性可以用于控制列表项显示符号的类型

/*使用该方法可以使用css来定义列表的type属性*/
属性值    描述    属性值    描述
disc    实心圆    none    不使用项目符号
circle    空心圆    cjk-ideographic    简单的表意数字
square    实心方块    georgian    传统的乔治亚编号
lower-roman    小写罗马数字    upper-roman    大写罗马数字
……略

具体用法

红色

 

        
• 大红

   
• 朱红

       
• 嫣红

 

 

蓝色

 

        
1. 湖蓝

   
2. 群青

       
3. 普兰

 

注意：由于浏览器的解析不同，实际开发中不推荐使用list-style-type属性。
二、List-style-image属性
该属性用法同list-style-type一样，该属性能将各列表的项目符号设置成个性化的图像

具体用法

ul{ 
  list-style-image:url(图标路径)
}
1
2
3
注意：1、list-style-image属性可以为各个列表设置项目图像。2、list-style-image对列表项目图像的控制能力不强一般不建议使用，通常使用

设置背景图像的方式实现列表项目图像。

三、list-style-position属性
在CSS中list-style-position属性可以用来控制列表项目符号的位置，取值有inside和outside两种，默认值为outside。用来分别控制取值位置。

具体用法

中秋节

 

    
• 中秋节，又称月夕、秋节

   
• 时在农历八月十五

       
• 始于唐朝初年，盛行于宋朝

 

 

    
• 端午节

   
• 除夕

       
• 清明节

 

四、list-style复合属性
css中可以使用list-style来综合的设置type/image/position等等属性。

语法格式：list-style:列表项目符号 列表项目符号位置 列表项目图像；

具体用法

使用list-style取值none还可以用于清除默认的列表项目符号。

五、背景图像定义列表项目符号
由于列表样式对列表项目图像的控制能力不强，所以实际工作中通常通过列表标签设置背景图像的方式来定义列表项目图像

如：background:url(photo.png) no-repeat left center;

具体用法

 
   
   
 
 
   

熊猫

   

     

黑眼圈

     

圆滚滚