老师,请检查一下我的代码

老师,请检查一下我的代码

<!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;

}


正在回答

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

2回答

你好同学,是说的logo边上的文字吗?很抱歉老师以为你是为了省时间所以没写文字,是因为代码中本身就没有设置文字哦,在图片后面加一个span添加文字内容即可,例如如下,可以把前面的a去掉。

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

记得把文字设置成白色字体哦。另外,本题中logo不要求必须设置居中,因为重点考察导航的效果,所以logo图片img设置一个margin-top:20px就行哦。

祝学习愉快 ,望采纳。


好帮手慕夭夭 2019-05-06 11:28:29

你好同学,实现的很不错,继续加油, 祝学习愉快 !

  • 提问者 宝慕林4199460 #1
    老师,能再帮我看看嘛,我的logo没有居中,然后logo字体上面的字没有显示出来,该怎么修改呢。
    2019-05-06 12:14:38
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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