体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

来源：4-7 编程练习

weixin_慕雪0272820

2020-06-07 15:03:08

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

好帮手慕星星

2020-06-07

已采纳

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

http://img.mukewang.com/climg/5edcc0ad09c0894a04730180.jpg

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

自己再理解下，祝学习愉快！

1

好帮手慕星星

2020-06-07

同学你好，代码实现效果正确，很棒！

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

http://img.mukewang.com/climg/5edc9d19092c8abd06250801.jpghttp://img.mukewang.com/climg/5edc9d2c092075ae04390093.jpg

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

http://img.mukewang.com/climg/5edc9da60970aedf04870135.jpg

自己再测试下，祝学习愉快！

0
heixin_慕雪0272820
h http://img.mukewang.com/climg/5edc9d2c092075ae04390093.jpg 請問為什麼我打 div:hover li ，滑鼠游標移到家電下。會連下面二組所有的li一起顯示，老師建議的.big div:hover li。卻可以如題目所述正常顯示。請問這二種寫法的差別在哪裡，我想法是<div class="big one">標籤有效性不是橫跨三組嗎?
h020-06-07
共1条回复

0 学习 · 40143 问题

查看课程

相似问题

麻煩老師看哪裡需要改進

回答 1

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

回答 1

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

回答 1

老師看看哪裡可以改進的

回答 1

麻烦老师看看有没有哪里需要改呢

回答 1

打开慕课网App查看更多内容