container和header的高度

首页课程实战体系课手记专栏慕课教程

container和header的高度

来源：2-2 编程练习

weixin_慕容1436440

2020-12-12 03:10:51

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

container的高度为什么没有被元素撑起来是0？

header宽度没有设定，是默认电脑分辨率的宽度吗？还是元素撑起的宽度。

在这里输入代码，可<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>

<style type="text/css">
*{
padding:0;
margin:0;
}
header{
height:80px;
background:#000;
}
a{
text-decoration:none;
}
header > .container{
width:1200px;
margin:0 auto;
}
header > .container > a {
display:block;
float:left;
margin:20px 25px;
font-size:24px;
color:#fff;
}
header > .container > nav{
float:right;
}
header > .container > nav > a {
display:block;
line-height:73px;
float:left;
height:73px;
width:100px;
text-align:center;
color:#fff;
}
header > .container > nav > a.Home{
background:red;
}
header > .container > nav > a.Course{
background:yellow;
}
header > .container > nav > a.Actual{
background:green;
}
header > .container > nav > a.Plan{
background:purple;
}
header > .container > nav > a.FQU{
background:orange;
}
header > .container > nav > a.Notes{
background:blue;
}
header > .container > nav > a:hover,
header > .container > nav > a.active{
padding-bottom:7px;
}

</style>
</head>
<body>

<header>
<div class="container">
<a href=""><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"/>
<span>MYMOOC</span></a>
<nav>
<a class="Home active" href="">Home</a>
<a class="Course" href="">Course</a>
<a class="Actual" href="">Actual</a>
<a class="Plan" href="">Plan</a>
<a class="FQU" href="">FQU</a>
<a class="Notes" href="">Notes</a>
</nav>
</div>
</header>
</body>
</html>通过选择【代码语言】突出显示