🎊专栏【前端易错合集】
🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。
🎆音乐分享【如愿】
大一同学小吉,欢迎并且感谢大家指出我的问题🥰
目录
🍔效果
🌹代码:
🌹注意
最近到期末了,小吉要期末突击😥,所以最近发布的文章可能比较少,也请大家多多谅解,阿里嘎多🥰
🍔效果
🌹代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 1100px;height: 50px;background-color: #009;border: 1px solid black;margin: 0 auto;}.bbb {float: left;}.menu {color: white;}a { display: block;line-height: 50px;width: 110px;height: 50px;text-align: center;font-weight: bold;list-style: none;color: white;}.xia{display: block;display: none;/*先隐藏,等到鼠标经过后再出现*/}li{list-style: none;line-height: 50px;height: 50px;width: 110px;text-align: center;}.bbb:hover .xia{display: block;/*鼠标经过后出现*/background-color: #2a40bd;color: white;}</style></head><body><div class="box"> <ul class="menu"><li class="bbb"><a href="#">学校首页</a></li><li class="bbb"><a href="#">学校概况</a><ul class="xia"><li>科大简介</li><li>现任领导</li><li>组织机构</li></ul></li><li class="bbb"><a href="">院系设置</a><ul class="xia"> <li>软件学院</li><li>信工学院</li><li>机电学院</li><li>车辆学院</li></ul></li><li class="bbb"><a href="">教育教学</a><ul class="xia"><li>本科生教育</li><li>研究生教育</li><li>继续教育</li></ul></li><li class="bbb"><a href="">科学研究</a><ul class="xia"><li>自然科学</li><li>人文学科</li><li>重点学科</li></ul></li><li class="bbb"><a href="">招生就业</a><ul class="xia"><li>本科生招生</li><li>研究生招生</li><li>国际生招生</li><li>继续教育招生</li></ul></li><li class="bbb"><a href="" >人才招聘</a><ul class="xia"><li>人事处</li><li>人事文件</li><li>人才招聘</li></ul></li ><li class="bbb"><a href="">合作交流</a><ul class="xia"><li>合作办学</li><li>对外合作</li></ul></li><li class="bbb"><a href="">智慧校园</a><ul class="xia"><li>图书馆</li><li>网络中心</li><li>现代教育中心</li></ul></li><li class="bbb"><a href="">办公OS</a><ul class="xia"><li>科大新闻</li><li>科大通知</li><li>科大文件</li></ul></li></ul></div></body></html>
🌹注意
注意:注意:注意:注意:注意:注意:
注意:注意:注意:注意:注意:注意:
要在 li 选择器里面设置行高和每个单元格的大小,不要在.xia 选择器里面设置
正确:正确:正确:
li{list-style: none;line-height: 50px;height: 50px;width: 110px;text-align: center;}
错误:错误:错误:
.xia{display: block;line-height: 50px;height: 50px;width: 110px;display: none;}
否则会变成只有第一行显示(血泪教训)
🥰如果大家有不明白的地方,或者文章有问题,欢迎大家在评论区讨论,指正🥰