老师,请检查一下我的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link rel="stylesheet" type="text/css" href="nav.css"> </head> <body> <header> <div class="container"> <a href="index.html"></a><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"> <nav> <a class="Home active" href="index.html">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>
*{
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
header{
height: 80px;
background:black;
}
header > .container{
width: 1200px;
margin:0 auto;
}
header > .container > a{
float: left;
display: block;
margin:0 20px;
}
header > .container > nav{
float: right;
}
header >.container > nav > a{
font-size: 24px;
height: 73px;
width: 110px;
display: block;
float: left;
line-height: 73px;
color: white;
text-align: center;
}
header .container nav a.Home{background: red;}
header .container nav a.Course{background: yellow;}
header .container nav a.Actual{background: green;}
header .container nav a.Plan{background:purple; }
header .container nav a.FAQ{background:orange; }
header .container nav a.Notes{background:blue; }
header .container nav a:hover,
header .container nav a:active{
padding-bottom: 7px;
}
正在回答
你好同学,是说的logo边上的文字吗?很抱歉老师以为你是为了省时间所以没写文字,是因为代码中本身就没有设置文字哦,在图片后面加一个span添加文字内容即可,例如如下,可以把前面的a去掉。
记得把文字设置成白色字体哦。另外,本题中logo不要求必须设置居中,因为重点考察导航的效果,所以logo图片img设置一个margin-top:20px就行哦。
祝学习愉快 ,望采纳。
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星