盒子模型4-7编程练习
来源:4-7 编程练习
慕标4519152
2018-12-14 21:19:09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> *{margin: 0px;padding:0px;} .big{margin:80px 60px;} h3{ background-color: #f2f2f2; border: 1px solid #908b8b; width: 100px; height: 30px; text-align: center; line-height: 30px; } li{ display: none; width: 100px; border-left: 1px solid #878383; border-right: 1px solid #878383; text-align: center; line-height: 1.5em;} .div1:hover .elec li{display: block;} .div2:hover .wash li{display: block;} .div3:hover .clothes li{display: block;} .div3:hover{ border-bottom:1px solid #878383; width: 100px; } </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回答
樱桃小胖子
2018-12-16
经测试,同学的效果实现的是可以的,但是
h3的边框重合了,整体不是很美观
建议再完善一下,参考
希望可以帮到你!
相似问题