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

最新推荐文章于 2023-09-19 08:13:40 发布

firstcode666

最新推荐文章于 2023-09-19 08:13:40 发布

阅读量242

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/firstcode666/article/details/120628968

版权

<!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>

优惠劵

firstcode666

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表使用图片作为标记类型

<!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-rep.
复制链接

扫一扫