请帮忙检查下，谢谢~~
来源：2-2 编程练习
慕UI9243256
2019-09-02 22:37:55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html5 页面布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 20px;
color: white;
}
a{
text-decoration: none;
line-height: 80px;
}
header{
height: 80px;
background-color: #000000;
}
.container{
width: 1200px;
margin: 0 auto;
}
header .container a{
display: block;
float: left;
letter-spacing: 5px;
}
header .container img{
width: 35px;
padding: 0 30px;
}
header .container nav a{
display: block;
float: left;
width: 110px;
height: 73px;
text-align: center;
margin: 5px;
}
header .container nav{
float: right;
}
header .container nav .home{
background-color: aqua;
}
header .container nav .course{
background-color:blue;
}
header .container nav .actual{
background-color: orange;
}
header .container nav .plan{
background-color: green;
}
header .container nav .faq{
background-color:orchid;
}
header .container nav a:hover{
padding-bottom: 7px;
}
</style>
</head>
<body>
<header>
<div class="container">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png" alt="logo">IMOOC</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>
</nav>
</div>
</header>
</body>
</html>写回答
1回答
-
好帮手慕星星
2019-09-03
同学你好，
代码整体布局是可以的，但是样式上还需要完善。
1、左侧logo没有垂直居中显示：
可以添加vertical-align属性，参考：
2、右侧导航项四周有空隙：
这是设置了margin值的原因，需要清除掉，否则不仅有间距，还会超出父容器，参考：
可以默认给第一个导航项添加上下间距。
自己再测试下，祝学习愉快！
0
相似问题