• 微信
当前位置:首页 > 学无止境 > Web前端

li列表在网页中常见应用例举

作者:杨青青 时间:2013-08-10 阅读数:人阅读

一、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>

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com

标签:li列表
微信

杨青青

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

微信
阿里云