请老师检查,谢谢
来源:2-2 编程练习
ChildMu
2020-01-18 11:01:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景下延</title>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<header>
<div class="container">
<a href="h52-2.html"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"><samp>MYMOOC</samp></a>
<nav>
<a href="h52-2.html" class="Home active">Home</a>
<a href="h52-2.html" class="Course">Course</a>
<a href="h52-2.html" class="Actual">Actual</a>
<a href="h52-2.html" class="Plan">Plan</a>
<a href="h52-2.html" class="FAQ">FAQ</a>
<a href="h52-2.html" class="Notes">Notes</a>
</nav>
</div>
</header><!-- 在此完成网页的HTML代码-->
</body>
</html>
2回答
同学你好,logo部分的内容溢出父级,效果图如下:

建议:调整margin值,示例:

如果我的回答帮到了你,欢迎采纳,祝学习愉快~
ChildMu
提问者
2020-01-18
*{
margin:0;
padding:0;
font-family:Arial;
border:none;
}
a{
text-decoration:none;
}
header{
background-color: black;
}
header > .container{
width: 1200px;
height: 80px;
margin: 0 auto;
}
header > .container > a{
display: block;
float: left;
margin:20px 25px;
font-size: 30px;
color: white;
}
header > .container > nav{
float: right;
}
header > .container > nav > a{
display: block;
float: left;
font-size: 25px;
height: 73px;
width: 120px;
line-height: 73px;
text-align: center;
color: white;
}
header > .container > nav > a.Home{background-color: #d40112;}
header > .container > nav > a.Course{background-color: #feb800;}
header > .container > nav > a.Actual{background-color: #78b917;}
header > .container > nav > a.Plan{background-color: #433b90;}
header > .container > nav > a.FAQ{background-color: #f27c01;}
header > .container > nav > a.Notes{background-color: #017fcb;}
header > .container > nav > a:hover,
header > .container > nav > .active{
padding-bottom: 7px;
}相似问题