体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

4-5练习题这样写怎么样

来源：4-8 课程总结

qq_偶鸡桑_03648845

2017-09-14 17:47:26

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

         body,div{margin:0; padding: 0;}

         .big{width: 150px; background-color:#f2f4f6; border:1px #ececec solid; text-align: center; margin:20px auto;} 

         .h3{font-family: "宋体";}

         .div1,.div2,.div3{ width:150px; border-bottom:1px #ececec solid;}

         .elec,.wash,.clothes{display: none; list-style-type:none; background-color:white;}

         .big div: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>


写回答

2回答

Miss路

2017-09-14

大的块没有问题，文字啥的要居中，还有下面多出来的那一小条，再优化一下。祝学习愉快！

0

樱桃小胖子

2017-09-14

效果实现的不错，但是建议设置.elec,.wash,.clothes{display: none; list-style-type:none; background-color:white;text-align: left;}居中显示，祝学习愉快！

0

0 学习 · 36712 问题

查看课程

相似问题

关于4-5练习

回答 3

盒子模型 4-5 编程练习 答案

回答 4

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

回答 1

盒子模型4-5编程练习怎么做

回答 3

4-5练习中的hover问题

回答 4

打开慕课网App查看更多内容