请老师检查,谢谢!
来源:2-2 编程练习
Cloud_轩
2020-11-25 16:11:31
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<--结构部分-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" href="nav.css" />
</head>
<body>
<header>
<div class="container">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png" />MYMOOC</a>
<nav>
<a class="Home active" href="index.heml">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>
<--结构部分-->
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial;
}
a{
text-decoration: none;
color: #fff;
}
header{
height: 80px;
background: black;
}
header > .container{
width: 1200px;
margin: 0 auto;
}
header > .container > a{
display: block;
float: left;
font-size: 32px;
margin: 20px 50px;
}
header > .container > a > img{ margin-right: 10px;}
header > .container > nav{
float: right;
margin-right: 50px;
}
header > .container > nav > a{
display: block;
width: 100px;
height: 75px;
float: left;
line-height: 75px;
text-align: center;
}
header > .container > nav > .Home{background: #ff0033;}
header > .container > nav > .Course{background: #ffcc33;}
header > .container > nav > .Actual{background: #00ff00;}
header > .container > nav > .Plan{background: #3333cc;}
header > .container > nav > .FAQ{background: #ff9900;}
header > .container > nav > .Notes{background: #0099ff;}
header > .container > nav > a:hover,
header > .container > nav > .active{padding-bottom: 5px;}
1回答
同学你好,效果中有两点优化建议:
(1)因为container容器里的子元素设置了浮动,建议给container容器设置overflow:hidden,清除浮动。

(2)如下图所示:主体内容有底部边距

这是因为logo设置了上下边距样式,建议只设置margin-top来实现logo图垂直居中的效果,参考下图:

修改之后的效果:

祝学习愉快!
相似问题