2-2编程作业提交
来源:2-2 编程练习
Liiiu
2020-09-08 13:13:42
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; margin: 0; } a { text-decoration: none; } header { height: 80px; background: black; } header > div { width: 1200px; margin: 0 auto; } header > div > a { display: block; float: left; color: white; margin-top: 20px; font-size: 24px; } header > div > a > img { margin-right: 8px; } header > div > nav { float: right; } header > div > nav > a { height: 73px; width: 100px; text-align: center; color: white; display: block; float: left; line-height: 73px; } header > div > nav > a.Home{ background: rgb(212, 1, 18); } header > div > nav > a.Course{ background: rgb(254, 184, 0); } header > div > nav > a.Actual{ background: rgb(120, 185, 23); } header > div > nav > a.Plan{ background: rgb(67, 59, 144); } header > div > nav > a.FAQ{ background: rgb(242, 124, 1); } header > div > nav > a.Notes{ background: rgb(1, 127, 203); } header > div > nav > a:hover, header > div > nav > a.active{ padding-bottom: 8px; } </style> </head> <body> <header> <div> <a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png">MYIMOOC</a> <nav> <a href="#" class="Home active">Home</a> <a href="#" class="Course">Course</a> <a href="#" class="Actual">Actual</a> <a href="#" class="Plan">Plan</a> <a href="#" class="FAQ">FAQ</a> <a href="#" class="Notes">Notes</a> </nav> </div> </header> </body> </html>
1回答
同学你好,使用同学提供的代码测试,鼠标经过时,每项背景向下沿延,高度溢出父级1px,如下:
父级高度为80px,导航项本身的高度是73px,那么实现先下延伸的效果时,padding-bottom设置7px即可,代码参考:
其他地方实现的不错,继续加油,祝学习愉快~
相似问题