您现在的位置是：首页 > 博客网站制作 > 心得笔记心得笔记

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

杨青2013-08-10【心得笔记】人已围观

简介li在网页中的应用,list-style-type,设置或检索对象的列表项所使用的预设标记。list-style-image：属性使用图像来替换列表项的标记,li列表前面用图片来展示.注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。

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

Tags：li   li列表

很赞哦！ ()

上一篇： li列表在网页中常见应用例举（二）

下一篇：帝国cms怎样修改列表分页函数

相关文章

随机图文

文章评论

点击排行

【匆匆那些年】总结个人博客经历的这四年…

本站推荐

帝国cms怎样修改列表分页函数

标签云

猜你喜欢

站点信息

  • 建站时间：2011年01月12日
  • 网站程序：帝国CMS7.5
  • 主题模板：《今夕何夕》
  • 文章统计：625篇文章
  • 标签管理：标签云
  • 微信公众号：扫描二维码，关注我们