老师 您看下我的代码有什么问题吗,logo和文字部分定位的方式有需要改进的吗?
来源:2-2 编程练习
慕粉3924036
2019-12-29 18:07:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/03.css">
</head>
<body>
<header>
<div class="content">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"></a>
<p>MYMOOC</p>
</div>
<nav>
<a href="#" class="active">Home</a>
<a href="#">Course</a>
<a href="#">Acture</a>
<a href="#">Plan</a>
<a href="#">FAQ</a>
<a href="#">Notes</a>
</nav>
</div>
</header>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: Arial;
color: aliceblue;
}
a{
text-decoration: none;
}
header{
height: 80px;
background: black;
opacity: 0.8;
}
header > .content{
width: 1000px;
margin: 0 auto;
}
header > .content > .logo{
/*width: 200px;*/
/*height: 70px;*/
/*border: antiquewhite solid 2px;*/
position: absolute;
}
header > .content > .logo a{
float: left;
display: block;
margin: 20px 10px;
}
header > .content > .logo p{
float: left;
/*line-height: 75px;*/
position: absolute;
left: 56px;
top: 40px;
font-size: 20px;
}
header > .content > nav{
float: right;
/*height: 73px;*/
}
header > .content > nav a{
display: block;
float: left;
width: 65px;
height: 73px;
line-height: 80px;
text-align: center;
/*border: aqua solid 1px;*/
}
header > .content > nav a:nth-child(1){background-color: #032165;}
header > .content > nav a:nth-child(2){background-color: #265999;}
header > .content > nav a:nth-child(3){background-color: #333333;}
header > .content > nav a:nth-child(4){background-color: #502323;}
header > .content > nav a:nth-child(5){background-color: #632572;}
header > .content > nav a:nth-child(6){background-color: #123456;}
header > .content > nav a:hover,
header > .content > nav a.active{
padding-bottom: 7px;
}
1回答
好帮手慕粉
2019-12-29
同学你好,logo部分的a标签超出了父容器:

这是由于图片是内联元素,底部默认存在间隙,将盒子撑大了,可以将图片设置为block块去除默认间隙:

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题