li列表在网页中常见应用例举(一)
时间:2020-08-23来源:杨青青个人博客作者:杨青青
一、list-style-type语法:
list-style-type:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
默认值:disc
下面列举一些常用的,list-style-type属性的每个值请参考w3cschool网站css列表
CSS代码:
.disc{list-style-type:disc;} /* 实心圆 */
html代码:
<ul class="disc"> <li>这是一个实心圆项目列表</li> <li>这是一个实心圆项目列表</li> <li>这是一个实心圆项目列表</li> </ul>
显示结果:
- 这是一个实心圆项目列表
- 这是一个实心圆项目列表
- 这是一个实心圆项目列表
还有两个常用的是decimal(阿拉伯数字)、square(实心方块)
.disc{list-style-type:decimal;} /* 阿拉伯数字 */
- 这是一个阿拉伯数字项目列表
- 这是一个阿拉伯数字项目列表
- 这是一个阿拉伯数字项目列表
.disc{list-style-type:square;} /* 实心方块 */
- 这是一个实心方块项目列表
- 这是一个实心方块项目列表
- 这是一个实心方块项目列表
二、list-style-image:属性使用图像来替换列表项的标记,li列表前面用图片来展示。
ul {list-style-image: url(/images/li.gif)}
- 咖啡
- 茶
- 可口可乐
完整代码:
<!doctype html> <html> <head> <style type="text/css"> ul { list-style-image: url(/images/li.gif) } </style> </head> <body> <ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html>
你觉得文章内容怎么样