css列表定义

    科技2022-07-20  94

    css列表定义

    css列表分为有序列表和无序列表

    标记类型的定义:list-style-type:属性;

    none(无标记)  disc(默认,标记是实心圆)  circle(空心圆)

    square(实心方块)  decimal(标记是数字)  decimal-leading-zero(0开头的数字标记;如:01,02,03等)

    lower-roman(小写开头的罗马数字) upper-roman(大写开头的罗马数字) lower-alpha(小写英文字母开头)

    upper-alpha(大写字母开头) hiragana(日文片假名 如:a i u e o ka ki等)

    katakana(标记是日文片假名 A I U E O KA KI)    

    标记的位置:list-style-position:属性;   (属性分为inset和outset两种)inset为空两个

    设置图像列表标记:list-style-image:url(图片地址)

    简写方式:list-style:(标记类型  标记位置  图像列表标记);

    具体代码如下所示:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表的定义</title> <style type="text/css"> ol{list-style-type:upper-roman;} ul.inset{list-style-position: inside;list-style-image:url(img/arr.png);} ul.p{list-style: url(img/arr.png) circle inset;} </style> </head> <body> <ol> <li>麦子学院</li> <li>麦子学院</li> <li>麦子学院</li> <li>麦子学院</li> </ol> <ul class="inset"> <li>麦子学院</li> <li>麦子学院</li> <li>麦子学院</li> <li>麦子学院</li> </ul> <ul class="p"> <li>麦子学院</li> <li>麦子学院</li> <li>麦子学院</li> <li>麦子学院</li> </ul> </body> </html>

    运行效果如下:

     

    Processed: 0.011, SQL: 8