老师。我使用list-style-image插入图片。可是它显示不出来,怎么办呢?

老师。我使用list-style-image插入图片。可是它显示不出来,怎么办呢?

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

 ul li

        {

          list-style-image: url("小图标.jpg");

        }

</style>

</head>

<body>

    <ul>

    <li>喜欢你</li>

    <li>没道理</li>

    <li>真好呀!</li>

    </ul>

</body>

</html>

这个是我的图片http://img1.sycdn.imooc.com//climg/5c53d9d50001e8df02800267.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
山河远阔ZZ 2019-02-01 15:04:29

同学你好,你的图片的名字是xtb.jpg而代码中写的是小图标.jpg,如下图:

http://img1.sycdn.imooc.com//climg/5c53ef4f0001ec7403530120.jpg

把url里面的路径改成:

list-style-image:url("xtb.jpg")

并且可能你的html页面没有扩展名,可以参考下图:

http://img1.sycdn.imooc.com//climg/5c53fb9a0001e86e02260100.jpg

提问者 shine62 2019-02-01 14:47:35

老师,我的图片和文件是这样放的?我觉得这样写路径是没问题呀?您看下http://img1.sycdn.imooc.com//climg/5c53eb8400017daf06770111.jpg

山河远阔ZZ 2019-02-01 14:35:47

同学你好,图片没有显示出来是不是图片得来路径加载错误了?

在我的电脑中测试之后,通过list-style-image插入图片,图片是显示的,但是因为图片过大,所以导致图片没有完全显示出来,如下图:

http://img1.sycdn.imooc.com//climg/5c53e8580001789301360348.jpg

建议换个小点的图片来测试,也可以通过改变ul的位置,来让整张图显示出来,参考下图:

http://img1.sycdn.imooc.com//climg/5c53e83d0001401f03480084.jpg

可以测试一下,如果帮助到了你,欢迎采纳。

祝学习愉快!

  • 提问者 shine62 #1
    老师,您看下我的图片放置有么有问题?我觉得是没问题的呀,就在我的提问上层
    2019-02-01 14:49:49
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师