请老师检查，谢谢！
来源：2-2 编程练习
努力的刘同学
2020-02-21 23:09:14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
/*清除默认*/
*{margin:0;
padding:0;
}
a{text-decoration:none;}
/*header*/
header{ height:80px; background:#000;}
header > .container{ width:1200px; margin:0 auto;}
header > .container > a{display: block;
color: #fff; margin: 20px 0 0 10px;
float: left;
font-size: 30px;}
/* 导航栏 */
header > .container > nav{float: right;}
header > .container > nav > a{color: #fff; display: block;
float: left;
width:100px; height: 73px;
background: pink;
line-height: 73px;
text-align: center;
font-size: 18px;
}
header > .container > nav > .Home{background: #433B90;}
header > .container > nav > .Course{background: #017FCB;}
header > .container > nav > .Actual{background: #78b917;}
header > .container > nav > .Plan{background: #feb800;}
header > .container > nav > .FAQP{background: #f27c01;}
header > .container > nav > .Notes{background: #d40112;}
/* 滑动效果 */
header > .container > nav > a:hover,
header > .container > nav > a.active{ padding-bottom: 7px;}
</style>
</head>
<body>
<header>
<div class="container">
<!-- logo图 -->
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png">MYMOOC</a>
<!-- 导航栏 -->
<nav>
<a href="#" class="active 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>
<a href="#" class="Notes">Notes</a>
</nav>
</div>
</header>
</body>
</html>写回答
1回答
-
好帮手慕星星
2020-02-22
同学你好，代码布局以及实现效果很棒。继续加油，祝学习愉快！
0
相似问题