CSS 列表
CSS 列表
CSS列表属性作用如下:
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
列表
在HTML中,有两种类型的列表:
无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
有序列表 - 列表项的标记有数字或字母
使用CSS,可以列出进一步的样式,并可用图像作列表项标记。
不同的列表项标记
list-style-type属性指定列表项标记的类型是::
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>无序列表实例:</p> <ul class="a"> <li>香蕉</li> <li>苹果</li> <li>橙子</li> </ul> <ul class="b"> <li>香蕉</li> <li>苹果</li> <li>橙子</li> </ul> <p>有序列表实例:</p> <ol class="c"> <li>香蕉</li> <li>苹果</li> <li>橙子</li> </ol> <ol class="d"> <li>香蕉</li> <li>苹果</li> <li>橙子</li> </ol> </body> </html>
运行程序尝试一下
一些值是无序列表,以及有些是有序列表。
作为列表项标记的图像
要指定列表项标记的图像,使用列表样式图像属性:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> ul { list-style-image:url('/upload/course/000/000/006/580870246427d963.jpg'); } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>
运行程序尝试一下
实例
所有不同的列表项标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:disc;} ul.c {list-style-type:square;} ol.d {list-style-type:armenian;} ol.e {list-style-type:cjk-ideographic;} ol.f {list-style-type:decimal;} ol.g {list-style-type:decimal-leading-zero;} ol.h {list-style-type:georgian;} ol.i {list-style-type:hebrew;} ol.j {list-style-type:hiragana;} ol.k {list-style-type:hiragana-iroha;} ol.l {list-style-type:katakana;} ol.m {list-style-type:katagana-iroha;} ol.n {list-style-type:lower-alpha;} ol.o {list-style-type:lower-greek;} ol.p {list-style-type:lower-latin;} ol.q {list-style-type:lower-roman;} ol.r {list-style-type:upper-alpha;} ol.s {list-style-type:upper-latin;} ol.t {list-style-type:upper-roman;} ol.u {list-style-type:none;} ol.v {list-style-type:inherit;} </style> </head> <body> <p>不同的列表项标记</p> <ul class="a"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ul> <ul class="b"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ul> <ul class="c"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ul> <ol class="d"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="e"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="f"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="g"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="h"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="i"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="j"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="k"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="l"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="m"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="n"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="o"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="p"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="q"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="r"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="s"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="t"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="u"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="v"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> </body> </html>
运行程序尝试一下
CSS列表属性
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |