列表使用图片作为标记类型

最新推荐文章于 2024-01-30 16:13:15 发布

原创最新推荐文章于 2024-01-30 16:13:15 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

这段代码展示了如何使用CSS来为无序列表<ul>中的每一项<li>设置背景图片作为列表图标，通过调整`background-image`, `background-repeat`, 和 `background-position`属性实现。简化后的代码使用`list-style`属性直接结合URL将图片设置为列表样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(sqpurple.gif);a
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

如代码所示，使用图片作为背景的方式作为列表图标。

此段代码巧妙的使用padding- left对两个元素进行了布局定位。

上段代码还可以这样简化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>