3-9问题

3-9问题

<meta charset="UTF-8">
<title>列表</title>
    <style>
        /*此处写代码*/
       li{
            list-style-type:circle;
            list-style-image:url(http://img1.sycdn.imooc.com/climg//58dc9e4e0001ba9000160016.png);
            list-style-position:outside;
       }
           
        .one{
            list-style-type:circle;
        }
    </style>
</head>
<body>
<!-- 此处代码 -->
    <ul>
        <li>电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视</li>
        <li class="one">冰箱</li>
        <li>洗衣机</li>
        <li>空调</li>
    </ul>
</body>
</html>

我的目的是想让冰箱前面出现圆点但失败了,即使是使用class分开后,同时用type和image时,image也会覆盖掉type的效果吗??

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

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

3回答
释梦_ 2018-03-07 15:29:43

 .one{

            list-style:circle;

        }


释梦_ 2018-03-07 15:28:42

<meta charset="UTF-8">

<title>列表</title>

    <style>

        /*此处写代码*/

       li{

          list-style-type: circle;

            list-style-image:url(http://img1.sycdn.imooc.com/climg//58dc9e4e0001ba9000160016.png);

            list-style-position:outside;

       }

            

        .one{

            list-style:circle;

        }

    </style>

</head>

<body>

<!-- 此处代码 -->

    <ul>

        <li>电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视</li>

        <li class="one">冰箱</li>

        <li>洗衣机</li>

        <li>空调</li>

    </ul>

</body>

</html>


好帮手慕星星 2018-02-26 10:57:32

list-style-type和list-style-image是两个不同的属性,不存在覆盖的问题,你把.one的图片样式设置成none就可以了,

.one {

        list-style-type: circle;

        list-style-image: none;

    }

祝学习愉快~~

  • 提问者 慕丝6937110 #1
    list-style-image: none;???为什么一定要这样写,还是不太明白其中的道路
    2018-03-03 00:08:43
  • 好帮手慕星星 回复 提问者 慕丝6937110 #2
    文字前面的空心五角星是通过list-style-image这个属性来设置的,使用图像来替换列表项的标记,用了这个属性之后, list-style-type属性是不会起作用的,如果你想将图片换成小圆点,只能将 list-style-type
    2018-03-04 12:40:00
  • 上面写错了,是只能将 list-style-image这个属性设置为none
    2018-03-04 12:40:56
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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