小伙伴们,元素的display属性能够对元素进行行内、块级以及行内块的设置,根据gif效果图,补充代码,实现:
当鼠标放在”家电“上时,家电的分类在一行上显示出来
效果参考下列的gif图:
任务
第一步:网页中默认只显示标题“家电”
第二步:当鼠标悬停在标题上时,家电的相关列表项显示出来
<!DOCTYPE html> <html>
<head lang="en"> <meta charset="UTF-8"> <title>display属性</title> <style type="text/css"> div { width: 200px; } /*补充样式*/ a{text-decoration: none;} ul{display:none;} a:hover ul{display: inline;} </style> </head>
<body> <div> <a href="#"><h2>家电</h2><ul><li>冰箱</li><li>空调</li><li>洗衣机</li></ul></a> </div> </body>
</html>