老师麻烦帮忙检查下代码 谢谢~
来源：2-2 编程练习
慕粉2243585596
2020-04-29 19:46:34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5标签布局</title>
<style type="text/css">
/*在此完成CSS样式设置*/
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
header{
height: 80px;
background-color: black;
}
header >.container{
width: 1200px;
margin:0 auto;
}
header >.container >a{
display: block;
float: left;
color: #FFF;
height: 80px;
font-size: 24px;
}
header >.container >a>img{
margin-top: 20px;
}
header >.container>nav{
float: right;
height: 75px;
line-height: 75px;
}
header >.container>nav>a{
width: 80px;
display: block;
float: left;
text-align: center;
color: #fff;
font-size: 18px;
}
header >.container>nav>a:hover{
padding-bottom: 5px;
}
header >.container>nav>.home{
background : red;
}
header >.container>nav>.course{
background : #ffcc33;
}
header >.container>nav>.actual{
background : green;
}
header >.container>nav>.plan{
background : purple;
}
header >.container>nav>.faq{
background : orange;
}
header >.container>nav>.notes{
background: blue;
}
</style>
</head>
<body>
<header>
<div class="container">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"> MYMOOC</a>
<nav>
<a class="home" href="#">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>
1回答
-
同学你好，代码布局以及实现效果是可以的。
优化：建议第一项导航默认为激活状态
祝学习愉快！
0
相似问题