麻煩老師看看哪裡需要改進

麻煩老師看看哪裡需要改進

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          body,div,h3,ul,li{padding: 0; margin: 0;}

          h3{border: 1px #cccccc solid; text-align:}

          .big{width:150px;margin: auto;}

          h3{height: 40px;background: #eeeeee;text-align: center; line-height: 40px;font-weight: bold}

          li{height : 30px ;display: none;line-height: 30px;}


          .div1:hover li {display: block; border-left: 1px #cccccc solid; border-right:1px #cccccc solid; padding-left: 60px}

          .div2:hover li {display: block;border-left: 1px #cccccc solid; border-right:1px #cccccc solid;padding-left: 60px}

          .div3:hover li {display: block;border-left: 1px #cccccc solid; border-right:1px #cccccc solid;padding-left: 60px}

          .div3:hover li.bottom{border-bottom:1px #cccccc solid;}

        

        </style>

    </head>

    <body>

     <div class="big">

        <div class="div1">

            <h3>家电</h3>

            <ul class="elec">

                <li>冰箱</li>

                <li>洗衣机</li>

                <li>空调</li>

            </ul>

        </div>

        <div class="div2">

            <h3>洗护</h3>

            <ul class="wash">

                <li>洗衣液</li>

                <li>消毒液</li>

                <li>柔顺剂</li>

            </ul>

        </div>

        <div  class="div3">

            <h3>衣物</h3>

             <ul class="clothes">

                <li>衬衫</li>

                <li>裤子</li>

                <li class="bottom">卫衣</li>

            </ul>

        </div>

      </div>

</body>

</html>


正在回答

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

2回答

同学你好,因为外层大盒子也是div标签

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

所以移入div的时候,下面所有的li都会显示。老师写的是.big div,也就是大盒子下面的三组div,每个移入的时候显示各自下面的内容。

自己再理解下,祝学习愉快!

好帮手慕星星 2020-06-07 15:54:27

同学你好,代码实现效果正确,很棒!

优化:相同的样式可以进行简化

http://img1.sycdn.imooc.com//climg/5edc9d19092c8abd06250801.jpghttp://img1.sycdn.imooc.com//climg/5edc9d2c092075ae04390093.jpg

多余的没有写完的样式可以注释掉:

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

自己再测试下,祝学习愉快!

  • 提问者 weixin_慕雪0272820 #1
    http://img1.sycdn.imooc.com//climg/5edc9d2c092075ae04390093.jpg 請問為什麼我打 div:hover li ,滑鼠游標移到家電下。會連下面二組所有的li一起顯示,老師建議的.big div:hover li。卻可以如題目所述正常顯示。請問這二種寫法的差別在哪裡,我想法是<div class="big one">標籤有效性不是橫跨三組嗎?
    2020-06-07 17:56:36
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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