检查代码，看看有不有错误和优化的地方
来源：2-2 编程练习
weixin_慕的地5241954
2019-08-21 23:13:21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link rel="stylesheet" href="css/nav.css" type="text/css"/> </head> <body> <!-- 在此完成网页的HTML代码--> <header> <div class="container"> <a href="index.html" class="logo"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"> MYMOOC</a> <nav> <a href="index.html" class="Home active">Home</a> <a href="#" class="Coures">Coures</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;
color: #ffffff;
}
a{
text-decoration: none;
}
header .container{
width: 100%;
height: 80px;
background: #000;
}
header .container a.logo{
float: left;
margin-top: 20px;
margin-left: 300px;
font-size: 24px;
}
header .container nav{
float: right;
margin-right: 300px;
}
header .container nav a{
display: block;
width: 100px;
height: 73px;
float: left;
line-height: 73px;
text-align: center;
font-size: 20px;
}
header .container nav a.Home{
background: red;
}
header .container nav a.Coures{
background: yellow;
}
header .container nav a.Actual{
background: green;
}
header .container nav a.Plan{
background: purple;
}
header .container nav a.FAQ{
background: darkorange;
}
header .container nav a.Notes{
background: blue;
}
header .container nav a:hover,
header .container nav a.active{
padding-bottom: 7px;
}页面缩小的时候，右边的导航a标签，会移动到下方，是为什么，这样是正常的吗？
写回答
2回答
-
同学你好！
当页面缩小的时候，右侧的导航被挤到下方是正常现象。因为页面缩小，宽度会变小，最终无法包含logo和右侧导航。同学添加了header .container的样式之后还是无法实现：
现阶段中，可以设置一定的最小宽度来避免这个情况：
后期会学到响应式布局来解决这个问题，到时候同学可以着重看下：
如果帮助到了你，欢迎采纳，祝学习愉快~
0 -
weixin_慕的地5241954
提问者
2019-08-21
我检查出来了，是没有设置这些属性，应该要把container设置成一个盒子
header .container{
width: 1200px;
height: 80px;
margin: 0 auto;
overflow: hidden;
zoom: 1;
}
0
相似问题