4-5编程练习这样写可以吗?感觉有点长,还能精简吗?

4-5编程练习这样写可以吗?感觉有点长,还能精简吗?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
        body,div,h3,ul,li{
         margin:0;
         padding:0;
        }
        h3,li{padding: 5px;}
        ul{
            list-style:none;
         display:none;
         text-align:center;
        }
        ul,h3{
         border-left:1px solid #d9d9d9;
         border-right: 1px solid #d9d9d9;
        }
        .div1:hover ul,.div2:hover ul,.div3:hover ul{display:block;}
        div{
         width: 100px;
         margin:0 auto;
        }
        h3{
         background:#ededed;
         text-align:center;
         border-top:1px solid #d9d9d9;
        }
        .bottom{border-bottom:1px solid #d9d9d9; }
        </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>


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

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

1回答
小丸子爱吃菜 2017-07-19 17:20:14

这样写已经很不错了,随着代码练习的增多,后期会写出更精简的代码,这个需要积累~自己也可以多敲多改代码看看效果。

祝学习愉快!

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

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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