为了账号安全,请及时绑定邮箱和手机立即绑定

<li>的黑点怎么改成图片

想把用

  • 标签前面的黑点换成图片该怎么弄呢?

正在回答

9 回答

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css中怎样将li前面的点换成图片</title>
<style type="text/css">
<style>
ul{
list-style-image: url(img/5.jpg);
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">列表1</a></li>
<li><a href="">列表2</a></li>
<li><a href="">列表3</a></li>
</ul>
</div>
</body>
</html>


1 回复 有任何疑惑可以回复我~

我的天啊,要是图片太大 怎么去设置格式呢

0 回复 有任何疑惑可以回复我~

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css中怎样将li前面的点换成图片</title>
<style type="text/css">
<style>
ul{
list-style-image: url(img/5.jpg);
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">列表1</a></li>
<li><a href="">列表2</a></li>
<li><a href="">列表3</a></li>
</ul>
</div>
</body>
</html>


0 回复 有任何疑惑可以回复我~

将小圆点换成自定义图片:

 eg:ul li{
               list-style-type: none;             /*先去掉黑点*/
               background: url(http://***.gif)no-repeat center left;      /*链接图片地址*/
               padding-left: 20px               /*图片的宽度,若不设置,图标会被文字覆盖*/
         }


5 回复 有任何疑惑可以回复我~

如果你想将列表符换成图像,则: ul li{
list-style-type:none;
list-style-image: url(images/icon.gif);
}

0 回复 有任何疑惑可以回复我~

是换成一二三四吗?那个原点是<li>的属性list-style,图片可以后加

0 回复 有任何疑惑可以回复我~

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css中怎样将li前面的点换成图片</title>
<style type="text/css">
<style>
ul{
list-style-image: url(img/5.jpg);
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">列表1</a></li>
<li><a href="">列表2</a></li>
<li><a href="">列表3</a></li>
</ul>
</div>
</body>
</html>


0 回复 有任何疑惑可以回复我~

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css中怎样将li前面的点换成图片</title>
<style type="text/css">
<style>
ul{
list-style-image: url(img/5.jpg);
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">列表1</a></li>
<li><a href="">列表2</a></li>
<li><a href="">列表3</a></li>
</ul>
</div>
</body>
</html>


0 回复 有任何疑惑可以回复我~

li 加css .li {list-style:none;}

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

<li>的黑点怎么改成图片

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号