请老师检查，谢谢！
来源：2-2 编程练习
LostInDark
2019-05-20 19:48:03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<header>
<div class="container">
<a href="#">
<img src="http://climg.mukewang.com/582e5f160001b17100400040.png">MYMOOC
</a>
<nav>
<a href="#" class="Home">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>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
header{
height: 80px;
width: 1366px;
background: #000;
}
header .container{
width: 1000px;
margin: 0 auto;
}
header .container > a{
color: #fff;
float: left;
line-height: 80px;
font-size: 24px;
}
header .container > a img{
height: 30px;
}
header .container nav{
height: 80px;
float: right;
line-height: 80px;
}
header .container nav a{
color: #fff;
font-size: 16px;
height: 70px;
width: 90px;
display: inline-block;
text-align: center;
}
.Home{background: red;}
.Course{background: yellow;}
.Actual{background: green;}
.Plan{background: blue;}
.FAQ{background: orange;}
.Notes{background: purple;}
header .container nav a:hover{
height: 80px;
}
a标签外边距怎么去掉
1回答
-
好帮手慕夭夭
2019-05-21
你好同学，根据效果图，建议如下美化效果：
大盒子设置宽度100%更好看：
container的子元素设置了浮动，使它高度塌陷，给container清除浮动：
a标签的间隙是默认的，是因为行内标签换行导致的，这属于行内元素的特殊现象，给他设置成块元素即可。如果想要导航在一行显示，可以设置浮动，如下：
祝学习愉快 ，望采纳。
0
相似问题