4-7练习,求代码完善

4-7练习,求代码完善

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          *{padding:0;

              margin:0;

          }

          li{list-style:none;margin:10px;}

        ul{display:none;}

        h3{width:100px;background-color:#eee;border:1px solid black;text-align:center;}

        ul{border:1px solid black;width:100px;padding-left:10px;}

        .div1:hover .elec{display:inline;} 

        

         

          

          

        </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>卫衣</li>

            </ul>

            

        </div>

      </div>

</body>

</html>


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

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

2回答
好帮手慕星星 2019-07-05 17:43:39

你好,是没有参考答案范本的,因为编程比较灵活,答案也不唯一。如果想参考的话,问答中置顶的都是同学们写的不错的:

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

可以相互学习一下。

祝学习愉快!

好帮手慕星星 2019-07-05 14:33:10

你好,可以参考下图修改:

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

1、可以给三个ul显示设置一次,就不用分开写了,减少代码冗余。并且显示出来的应该是块元素,设置为block即可。

2、给ul设置的padding-left值让文字向右移动,但是这样会增大设置的宽度,所以建议使用文本缩进设置文字的位置。

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

  • 提问者 慕仔54072386 #1
    可以给一份合格的代码给我参考下吗?
    2019-07-05 17:09:44
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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