老师,请帮我查看一下代码,谢谢!

老师,请帮我查看一下代码,谢谢!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{margin:0;padding:0;border:none;font-family:Arial;}
a{text-decoration:none;}
header{height:80px;background:#000;}
header .container{width:1200px;margin:0 auto;}
header .container > a{display:block;float:left;margin:20px;}
header .container > a > img{display:block;}
header .container > span{line-height:80px;margin-left:-10px;color:#fff;}
header .container > nav{float:right;}
header .container > nav > a{display:block;float:left;width:100px;background:red;text-align:center;line-height:73px;color:#fff;}
header .container > nav > a.Home{background:#d40112}
header .container > nav > a.Course{background:#feb800}
header .container > nav > a.Actual{background:#78b917}
header .container > nav > a.Plan{background:#433b90}
header .container > nav > a.FAQ{background:#f27c01}
header .container > nav > a.Notes{background:#017fcb}
header .container > nav > a:hover{padding-bottom:7px;}
header .container > nav > a.active{padding-bottom:7px;}
</style>
</head>
<body>
<header>
<div class="container">
<a href="https://www.imooc.com"><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png" alt="慕课网首页"></a>
<span>MYMOOC</span>
<nav>
<a class="Home active" href="https://www.imooc.com">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

登陆购买课程后可参与讨论,去登陆

1回答
樱桃小胖子 2019-08-17 15:48:28

效果实现的是可以的,但是建议简化一下代码

http://img1.sycdn.imooc.com//climg/5d57b1430001c88309260230.jpg

希望可以帮到你!

  • 提问者 秋之枫华 #1
    就是把这两个相同属性的选择器写在一起是吧?
    2019-08-17 15:53:44
  • 樱桃小胖子 回复 提问者 秋之枫华 #2
    是哒,这样可以简化代码,提高网页的性能!
    2019-08-17 16:11:17
  • 提问者 秋之枫华 回复 樱桃小胖子 #3
    好的,记住了,多谢!
    2019-08-17 19:58:29
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师