html <li>模板,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.mb5u.com]

Coffee

Tea

Coca Cola

www.mb5u.com

Coffee

Tea

Coca Cola

www.mb5u.com

Coffee

Tea

Coca Cola

www.mb5u.com

Coffee

Tea

Coca Cola

www.mb5u.com

[ 可先修改部分代码 再运行查看效果 ]

有序列表不同样子的列表标记 The different list-item markers in ordered lists

This example demonstrates the different list-item markers in CSS.

Examples 实例：

代码调试框 [www.mb5u.com]

Coffee

Tea

Coca Cola

www.mb5u.com

Coffee

Tea

Coca Cola

www.mb5u.com

Coffee

Tea

Coca Cola

www.mb5u.com

Coffee

Tea

Coca Cola

www.mb5u.com

Coffee

Tea

Coca Cola

www.mb5u.com

[ 可先修改部分代码 再运行查看效果 ]

设置图片做为标记 Set an image as the list-item marker

This example demonstrates how to set an image as the list-item marker.

Examples 实例：

代码调试框 [www.mb5u.com]

Coffee

Tea

Coca Cola

www.mb5u.com

[ 可先修改部分代码 再运行查看效果 ]

安置列表标记 Place the list-item marker

This example demonstrates where to place the list-item marker.

Examples 实例：

代码调试框 [www.mb5u.com]

This list has a list-style-position with a value of "inside":

Earl Grey Tea - A fine black tea

Jasmine Tea - A fabulous "all purpose" tea

Honeybush Tea - A super fruity delight tea

www.mb5u.com

This list has a list-style-position with a value of "outside":

Earl Grey Tea - A fine black tea

Jasmine Tea - A fabulous "all purpose" tea

Honeybush Tea - A super fruity delight tea

www.mb5u.com

[ 可先修改部分代码 再运行查看效果 ]

快速声明所有列表属性 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.mb5u.com]

Coffee

Tea

Coca Cola

www.mb5u.com

[ 可先修改部分代码 再运行查看效果 ]

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列表属性答应你安置列表标记，改变列表标记的样子或设置一图片做列表的标记