请帮忙检查一下
来源：2-2 编程练习
慕后端9221755
2019-11-20 14:25:43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 80px;
background: #000;
}
header > .cantainer{
width: 1000px;
margin: 0 auto;
}
header > .cantainer > a{
display: block;
float: left;
margin: 20px 0;
}
header > .cantainer > a > span{
font-size: 30px;
color: #fff;
margin-left: 8px;
}
header > .cantainer > nav{
float: right;
}
header > .cantainer > nav > a{
width: 100px;
height: 73px;
display: block;
float: left;
line-height: 73px;
text-align: center;
font-size: 24px;
color: #fff;
overflow: hidden;
zoom: 1;
}
header > .cantainer > nav > a.Home{background: #d40112;}
header > .cantainer > nav > a.Course{background: #feb800;}
header > .cantainer > nav > a.Actual{background: #78b917;}
header > .cantainer > nav > a.Plan{background: #433b90;}
header > .cantainer > nav > a.FAQ{background: #f27c01;}
header > .cantainer > nav > a.Notes{background: #017fcb;}
header > .cantainer > nav > a:hover,
header > .cantainer > nav > a.active{
padding-bottom: 7px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<header>
<div class="cantainer">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"><span>MYMOOC</span></a>
<nav>
<a class="Home active" href="#">Home</a>
<a class="Course" href="#">Course</a>
<a class="Actual" href="#">Actual</a>
<a class="Plan" href="#">Plan</a>
<a class="FAQ" href="#">FAQ</a>
<a class="Notes" href="#">Notes</a>
</nav>
</div>
</header>
</body>
</html>
1回答
-
同学你好，如下图所示，通过检查元素发现，a标签设置了上下间距，导致实际占据的高度超出了父元素高度
建议：去除a的margin值，给a设置与父元素相同的高度， 给图片设置适当的高度，计算margin-top值，让图片垂直居中显示效果会更好
效果图：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题