麻烦老师检查下有没语法错误,并且说下哪里可以优化简写的

麻烦老师检查下有没语法错误,并且说下哪里可以优化简写的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type              ="text/css">
        body,div,h3,ul,li{padding:0;margin:0;}
        li{list-style:none;}
        h3{font-size:24px;font-family:宋体;padding:8px;}
        div{border:1px #e3e1e1 solid;}
        li{background-color:white;}
        ul{line-height:30px;}
        .big{text-align:center;background-color:#ececec;width:180px;margin:0px auto;}
        ul{display:none;}
        .div1:hover ul{display:block;}
        .div2:hover ul{display:block;}
        .div3:hover ul{display:block;}
        
        
       
          /*样式补充*/
          
          
        </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回答
好帮手慕慕子 2019-04-17 13:42:23

同学你好, 代码中没有语法错误, 不过有以下几点可以优化一下,简化代码的书写:

  1. li标签的样式可以写在一起。 另,让列表中的文字左边对齐显示。 例:

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

  2.  可以统一给.big下的div设置伪类:hover,这样就不用分三次写鼠标悬浮样式了

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

如果帮助到了你, 欢迎采纳

祝学习愉快~~~

  • 提问者 陈立天 #1
    能不能具体写出来怎么修改优化啊老师?
    2019-04-20 14:30:50
  • 好帮手慕慕子 回复 提问者 陈立天 #2
    同学你好,注释的代码表示可以替换成图片中红框圈起来的代码 图片中红框圈起来的部分。就是老师给同学提供参考的优化代码哦
    2019-04-20 15:03:43
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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