CSS-列表基础记录

来源：互联网发布：手机陶笛软件编辑：程序博客网时间：2024/06/05 04:25

1 列表标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>不同的列表项标记</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>sw</li><li>xc</li><li>tx</li></ul><ul class="b"><li>sw</li><li>xc</li><li>tx</li></ul><p>无序列表</p><ol class="c"><li>sw</li><li>xc</li><li>tx</li></ol><ol class="d"><li>sw</li><li>xc</li><li>tx</li></ol></body></html>

2 列表项图像标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>列表项图像标记</title><style>ul{list-style-image:url(biao.png)}</style></head><body><ul><li>sw</li><li>xc</li><li>tx</li></ul></body></html>

3 列表项图像标记兼容性解决

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>列表标记兼容性解决</title><style>ul{list-style-type:none;padding:0px;margin:0px;}ul li{background-image:url(biao.png);background-repeat:no-repeat;background-position:0px 5px; padding-left:14px;}</style></head><body><ul><li>sw</li><li>xc</li><li>tx</li></ul></body></html>

4 综合实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>列表综合</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><ul class="a"><li>Circle type</li><li>Tea</li><li>Coca Cola</li></ul><ul class="b"><li>Disc type</li><li>Tea</li><li>Coca Cola</li></ul><ul class="c"><li>Square type</li><li>Tea</li><li>Coca Cola</li></ul><ol class="d"><li>Armenian type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="e"><li>Cjk-ideographic type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="f"><li>Decimal type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="g"><li>Decimal-leading-zero type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="h"><li>Georgian type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="i"><li>Hebrew type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="j"><li>Hiragana type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="k"><li>Hiragana-iroha type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="l"><li>Katakana type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="m"><li>Katakana-iroha type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="n"><li>Lower-alpha type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="o"><li>Lower-greek type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="p"><li>Lower-latin type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="q"><li>Lower-roman type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="r"><li>Upper-alpha type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="s"><li>Upper-latin type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="t"><li>Upper-roman type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="u"><li>None type</li><li>Tea</li><li>Coca Cola</li></ol><ol class="v"><li>inherit type</li><li>Tea</li><li>Coca Cola</li></ol></body></html>

0 0