css列表样式
列表项标记
设置列表项的标记样式类型
list-style-type:关键字|none
无序列表
none 无标记
disc 实心的圆点
circle 空心的圆点
square 实心的方块
有序列表
none 无标记
decimal 从一开始的整数
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
使用图片设置列表项的标记
list-style-image:URL|none
设置列表项标记的位置
list-style-position:inside|outside
列表样式缩写
list-style:[list-style-type][list-style-image][list-style-position]
list-style-image会覆盖list-style-type的设置
list-style-type.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul li{ /*list-style-type: circle;*/ /*list-style-type: square;*/ /*list-style-type: decimal;*/ /*list-style-type: lower-alpha;*/ list-style-type: lower-roman; } </style> </head> <body> <ul> <li>家用电器</li> <li>电脑</li> <li>手机</li> </ul> </body> </html>
list-style-image.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul li{ list-style-image: url(img/remind.png); } </style> </head> <body> <ul> <li>家用电器</li> <li>电脑</li> <li>手机</li> </ul> </body> </html>
list-style-position.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul li{ list-style-image: url(img/remind.png); list-style-position: outside; } </style> </head> <body> <ul> <li>家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器</li> <li>电脑</li> <li>手机</li> </ul> </body> </html>
list-style.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul li{ list-style: square outside url(img/remind.png); } </style> </head> <body> <ul> <li>家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器</li> <li>电脑</li> <li>手机</li> </ul> </body> </html>