请老师查看下,谢谢。
来源:2-2 编程练习
qq_慕移动3101913
2019-07-31 12:42:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
*{margin:0;padding:0;color:#fff;}
a{text-decoration: none;}
header{height:80px;background:#000;}
header>.zhuti{width:1200px;margin:0 auto;}
header>.zhuti>a{display:block;float:left;margin:18px 25px;font-size:20px;}
/* header>.zhuti>a>span{line-height: 80px;}*/
header>.zhuti>nav{float:right;}
header>.zhuti>nav>a{float:left;display:block;width:110px;height:73px;text-align: center;line-height: 73px;}
header>.zhuti>nav>a.color1{background:#d40112;}
header>.zhuti>nav>a.color2{background:#feb800;}
header>.zhuti>nav>a.color3{background:#78b917;}
header>.zhuti>nav>a.color4{background:#422b90;}
header>.zhuti>nav>a.color5{background:#f27c01;}
header>.zhuti>nav>a.color6{background:#017fcb;}
/*鼠标经过*/
header>.zhuti>nav>a:hover,
header>.zhuti>nav>a.active{
padding-bottom:7px;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<header>
<div class="zhuti">
<a>
<img src="http://climg.mukewang.com/582e5f160001b17100400040.png">
<span>MYMOOC</span>
</a>
<nav>
<a href="#" class="color1 active">Home</a>
<a href="#" class="color2">Course</a>
<a href="#" class="color3">Actual</a>
<a href="#" class="color4">Flan</a>
<a href="#" class="color5">FAQ</a>
<a href="#" class="color6">Notes</a>
</nav>
</div>
</header>
</body>
</html>
1回答
同学你好!
代码效果实现的可以,不过代码中有使用了中文分号和冒号:
如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题