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

时间：2013-08-10来源：杨青青博客作者：杨青青

一、list-style-type语法：

默认值：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>

杨青青

如果缘分安排我们相遇，请不要让她擦肩而过。扫一扫二维码，加我为好友吧！

上一篇: li列表在网页中常见应用例举（二）下一篇:html css 十一条网页设计经典实用的代码片段

你觉得文章内容怎么样

站长推荐

阿里云代金券￥100 云产品通用

有效期30天首购用户

立即领取

阿里云代金券￥100 云产品通用

有效期30天复购+升级

立即领取