css教程：CSS列表(ul、ol、li)属性的应用

The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker.
CSS列表属性答应你来安置列表项标记，改变标记的样子或者将图片变为列表项的标记

无序列表不同样子的列表标记 The different list-item markers in unordered lists
This example demonstrates the different list-item markers in CSS.
Examples 实例：
代码调试框 [www.dedecms.com]<html> <head> <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} </style> </head> <body> <ul class="disc"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ul> <ul class="circle"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ul> <ul class="square"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ul> <ul class="none"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ul> </body> </html>
[ 可先修改部分代码再运行查看效果 ]

有序列表不同样子的列表标记 The different list-item markers in ordered lists
This example demonstrates the different list-item markers in CSS.
Examples 实例：
代码调试框 [www.dedecms.com]<html> <head> <style type="text/css"> ol.decimal {list-style-type: decimal} ol.lroman {list-style-type: lower-roman} ol.uroman {list-style-type: upper-roman} ol.lalpha {list-style-type: lower-alpha} ol.ualpha {list-style-type: upper-alpha} </style> </head> <body> <ol class="decimal"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ol> <ol class="lroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ol> <ol class="uroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ol> <ol class="lalpha"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ol> <ol class="ualpha"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ol> </body> </html>
[ 可先修改部分代码再运行查看效果 ]

设置图片做为标记 Set an image as the list-item marker
This example demonstrates how to set an image as the list-item marker.
Examples 实例：
代码调试框 [www.dedecms.com]<html> <head> <style type="text/css"> ul { list-style-image: url('images/icons/24.gif') } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ul> </body> </html>
[ 可先修改部分代码再运行查看效果 ]

安置列表标记 Place the list-item marker
This example demonstrates where to place the list-item marker.
Examples 实例：
代码调试框 [www.dedecms.com]<html> <head> <style type="text/css"> ul.inside { list-style-position: inside } ul.outside { list-style-position: outside } </style> </head> <body> This list has a list-style-position with a value of "inside": <ul class="inside"> <li>Earl Grey Tea - A fine black tea</li> <li>Jasmine Tea - A fabulous "all purpose" tea</li> <li>Honeybush Tea - A super fruity delight tea</li> <li>www.dedecms.com</li> </ul> This list has a list-style-position with a value of "outside": <ul class="outside"> <li>Earl Grey Tea - A fine black tea</li> <li>Jasmine Tea - A fabulous "all purpose" tea</li> <li>Honeybush Tea - A super fruity delight tea</li> <li>www.dedecms.com</li> </ul> </body> </html>
[ 可先修改部分代码再运行查看效果 ]

快速声明所有列表属性 All list properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for a list in one declaration.
Examples 实例：
代码调试框 [www.dedecms.com]<html> <head> <style type="text/css"> ul { list-style: square inside url('images/icons/24.gif') } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> <li>www.dedecms.com</li> </ul> </body> </html>
[ 可先修改部分代码再运行查看效果 ]

The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker.
CSS列表属性答应你安置列表标记，改变列表标记的样子或设置一图片做列表的标记

柠檬铺

css教程：CSS列表(ul、ol、li)属性的应用

发表回复取消回复

Grow your business fast with

Suku

css教程：CSS列表(ul、ol、li)属性的应用

发表回复 取消回复

Grow your business fast with

Suku

发表回复取消回复