老师，麻烦看一下我的代码有没有什么问题，谢谢！
来源：2-2 编程练习
慕先生0592982
2020-06-28 14:44:12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding: 0;margin: 0;border: none;}
a{text-decoration: none;}
header{height: 80px;background-color: black;}
.container{width: 1200px;margin: 0 auto;}
.container .logo a{display: block;float: left;margin: 20px 5px 20px 150px;}
span{color: white;font-size: 25px;display: block;float: left;margin-top: 30px;}
nav{float: right;margin-right: 100px;}
nav a{float: left;width: 80px;height:72px;color: white;display: block;line-height: 70px;text-align: center;}
.home{background-color: red;}
.course{background-color: orange;}
.actual{background-color: yellowgreen;}
.plan{background-color: purple;}
.faq{background-color: chocolate;}
.notes{background-color: darkblue;}
.container nav .active:hover{padding-bottom: 8px;}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png" /></a>
<span>MYMOOC</span>
</div>
<nav>
<a href="#" class="home active">Home</a>
<a href="#" class="course active">Course</a>
<a href="#" class="actual active">Actual</a>
<a href="#" class="plan active">Plan</a>
<a href="#" class="faq active">FAQ</a>
<a href="#" class="notes active">Notes</a>
</nav>
</div>
</header>
</body>
</html>写回答
1回答
-
好帮手慕久久
2020-06-28
同学你好，代码中有如下问题可优化：
1. 左侧logo中的文字没有链接效果:
建议将文字包裹在a标签中，如下：
2. 右侧导航第一项，默认没有激活样式：
可做如下调整：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题