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即可,代码参考:

其他地方实现的不错,继续加油,祝学习愉快~
相似问题