请老师看一下我的代码,有没有需要优化的地方

来源:4-7 编程练习

邹沪申

2019-08-15 10:01:11

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          div,h3,ul,li {
              margin: 0;
              padding: 0;
          }
          .big {
              width: 150px;
              border-left: 1px solid #ddd;
              border-right: 1px solid #ddd;
              border-top: 1px solid #ddd;
              margin: 0 auto;
          }
          h3 {
              font: 700 26px/40px "宋体";
              height: 40px;
              background-color: #eee;
              border-bottom: 1px solid #ddd;
              text-align: center;
          }
          div ul li {
              font: 400 18px/30px "宋体";
              height: 30px;
              border-bottom: 1px solid #ddd;
              padding-left: 50px;
              list-style-type: none;
              display: none;
          }
          .div1:hover li {
              display: block;
          }
          .div2:hover li {
              display: block;
          }
          .div3:hover li {
              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>


写回答

2回答

好帮手慕码

2019-08-15

同学你好!
代码效果实现的是可以的,效果图只是一个参考标准,只要知识点掌握即可。代码是灵活的,不局限同学的发挥哦~

祝学习愉快~

0

邹沪申

提问者

2019-08-15

li里面的边框线是我加上去的,好看一点,如果要像效果图那样,就取消li的下部边框线和.big的上部线,给h3加上部线,给.big加下部线,请老师点评一下哦

0

0 学习 · 40143 问题

查看课程