老師好,4-7 編程練習那裡需要改善?

老師好,4-7 編程練習那裡需要改善?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          
         *{
             padding:0px;margin:0px;
             text-align:center;
             width:80px;
         }
           
            h3{
                background:#DDDDDD;
               border:1px gray solid;
               
            }
            
            ul{display:none;}
     
          .div1:hover ul{display:inline;}
          .div2:hover ul{display:inline;}
          .div3:hover ul{display:inline;}
           
           li{
               border-bottom:0px gray solid;
               text-align:center;
               border-left:1px gray solid;
               border-right:1px gray solid;
               background-color:white;
           }
           
           .div h2, .div h2{border-bottom:none;}
          
          
        </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回答

同学你好,

1、最后一项列表底部没有边框显示:

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

可以将边框添加在ul上,如下:

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

2、移入div显示ul的样式可以进行合并,ul显示出来可以修改为block块元素,否则边框样式不对。参考:

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

可以重新测试下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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