4-5编程练习麻烦帮忙看下有没有可以改进的地方？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
        li{display:none;}
        
        div,h3,ul,li{margin:0; padding:0;}
        
        .big{width:125px;
        background-color:#f2f4f6;
        border:2px #ececec solid;
        margin:0 auto;
        }
        
        h3{text-align:center;
        width:100%;
        height:25px;
        padding-top:5px;
        border-bottom:2px #ececec solid;
        }
        
        .div1:hover li{display:block;
        height:30px;
        line-height:30px;
        background-color:white;
        padding-left:45px;}
        
        .div2:hover li{display:block;
        height:30px;
        line-height:30px;
        background-color:white;
        padding-left:45px;}
        
        .div3:hover li{display:block;
        height:30px;
        line-height:30px;
        background-color:white;
        padding-left:45px;}
        
        </style>
    </head>
    <body>
    <div>
        <div>
            <h3>家电</h3>
            <ul>
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div>
            <h3>洗护</h3>
            <ul>
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div  class="div3">
            <h3>衣物</h3>
             <ul>
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>

人活着就是为了呆毛王 2017-05-09

源自：盒子模型 4-7 编程练习

收起

1回答

Miss路 2017-05-09 10:59:02

可以这样来实现，你写的样式与要求差距比较大，我帮你改了一版，但是建议你先按照原型图来写，

按照任务要求一步一步的来做：

第一步：先将页面中元素的基本样式重置

第二步：整个内容在页面上居中显示

第三步：给标题设置样式

第四步：给三个列表设置样式

第五步：当鼠标悬停在标题上时，它相关的内容会显示出来

下面的仅供参考。祝学习愉快！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
            body,div,h3,ul,li{padding:0;margin:0;}
            ul{list-style:none;}
            .big{width:600px;margin:0 auto;margin-top:50px;}
            .div1,.div2,.div3{width:164px;}
            h3{width:162px;background-color:#eee;border:1px solid #ddd;font-size:26px;font-family:"Microsot Yahei";text-align:center;padding:5px 0px;}
            .elec,.wash,.clothes{font-size:20px;width:102px;border:1px solid #ddd;margin:0;border-top:none;padding-left:60px;display:none;}
            .elec li,.wash li,.clothes li{height:40px;line-height:40px;}
            .div1:hover ul,.div2:hover ul,.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

boody,div,h3,ul,li{margin:0px; padding:0px;} .big{width:150px; background-color:#E5F3D0; margin:50px auto; border:1px #80B135 solid; color:#59C3F9;} h3{height:30px; line-height:30px; text-align:center; border:1px #80B135 solid; text#80B135} .elec,.wash,.clothes{list-style:none; display:none;} li{height:30px; line-height:30px;} .div1:hover .elec,.div2:hover .wash,.div3:hover .clothes{display:block; border:1px #80B135 solid; padding-left:55px;} 老师我重写了下，这样写应该可以了吧？

2017-05-09 22:18:08
Miss路回复提问者人活着就是为了呆毛王 #2

可以。祝学习愉快！

2017-05-10 11:08:59