效果跟老师不同.代码检查很多遍了
* {
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
height: 80px;
background: #000;
}
header > .container {
width: 1200px;
margin:auto;
}
header > .container > a {
display: block;
float: left;
margin: 5px 25px;
}
header > .container > nav {
float: right;
}
header > .container > nav > a {
font-size: 24px;
line-height: 73px;
display: block;
float: left;
width: 110px;
height: 73px;
text-align: center;
color: #fff;
}
header>.container>nav >a.Home{background: #433b90;}
header>.container>nav >a.Courseheader{background:#017fcb;}
header>.container>nav >a.Acrual{background: #78b917;}
header>.container>nav >a.Plan{background: #feb800;}
header>.container>nav >a.FAQ{background: #f27c01;}
header>.container>nav >a.Notes{background: #d40112;}
正在回答 回答被采纳积分+1
在课程的右侧有老师讲的案例的源代码，你可以下载下来认真比对一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div>
<a href="imooc.html"><img src="images/logo.png"></a>
<nav>
<a href="imooc.html">Home<a>
<a href="#">Course<a>
<a href="#">Acrual<a>
<a href="#">Plan<a>
<a href="#">FAQ<a>
<a href="#">Notes<a>
</nav>
</div>
</header>
<section>
<ul>
<li><img src="images/banner/banner1.jpg"></li>
<li><img src="images/banner/banner2.jpg"></li>
<li><img src="images/banner/banner3.jpg"></li>
</ul>
</section>
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dd>
<dt>Hyper Text Markup Language</dt>
<dd><img src="images/Course/05_05.png" alt=""></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="images/Course/06_04.png" alt=""></dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
2
</dl>
<dt>JavaScript</dt>
<dd><img src="images/Course/09_07.png" alt=""></dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dt>AngularJS</dt>
<dd><img src="images/Course/02_09.png" alt=""></dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
</aside>
</section>
<article>
<h1>Welcome to <samp>Massive Open Online Course!<samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="images/article.jpg">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
<footer>
<div>
<p>Copyright © 2016 imooc.com All Rights Reserved.</p>
<span>
<img src="images/icon/weichat.png">
<img src="images/icon/sina.png">
<img src="images/icon/qq.png">
</span>
<div>
</footer>
</body>
</html>
//+++++++++++++++++++++++++++++CSS++++++++++++++++++++++++++++//
* {
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
height: 80px;
background: #000;
}
header > .container {
width: 1200px;
margin: 0 auto;
}
header > .container > a {
display: block;
float: left;
margin: 5px 25px;
}
header > .container > nav {
float: left;
}
header > .container > nav > a {
font-size: 24px;
line-height: 73px;
display: block;
float: left;
width: 110px;
height: 73px;
text-align: center;
color: #fff;
}
header >.container > nav >a.Home{background: #433b90;}
header >.container > nav >a.Courseheader{background:#017fcb;}
header >.container > nav >a.Acrual{background: #78b917;}
header >.container > nav >a.Plan{background: #feb800;}
header >.container > nav >a.FAQ{background: #f27c01;}
header >.container > nav >a.Notes{background: #d40112;}
header >.container > nav > a:hover,
header >.container > nav > a:active { padding-bottom: 7px; }
* {
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
height: 80px;
background: #000;
}
header > .container {
width: 1200px;
margin: 0 auto;
}
header > .container > a {
display: block;
float: left;
margin: 5px 25px;
}
header > .container > nav {
float: left;
}
header > .container > nav > a {
font-size: 24px;
line-height: 73px;
display: block;
float: left;
width: 110px;
height: 73px;
text-align: center;
color: #fff;
}
header >.container > nav >a.Home{background: #433b90;}
header >.container > nav >a.Courseheader{background:#017fcb;}
header >.container > nav >a.Acrual{background: #78b917;}
header >.container > nav >a.Plan{background: #feb800;}
header >.container > nav >a.FAQ{background: #f27c01;}
header >.container > nav >a.Notes{background: #d40112;}
header >.container > nav > a:hover,
header >.container > nav > a:active { padding-bottom: 7px; }
html代码中没有对应的类名呀，你再校对一下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div>
<a href="imooc.html"><img src="images/logo.png"></a>
<nav>
<a href="imooc.html">Home<a>
<a href="#">Course<a>
<a href="#">Acrual<a>
<a href="#">Plan<a>
<a href="#">FAQ<a>
<a href="#">Notes<a>
</nav>
</div>
<section>
<ul>
<li><img src="images/banner/banner1.jpg"></li>
<li><img src="images/banner/banner2.jpg"></li>
<li><img src="images/banner/banner3.jpg"></li>
</ul>
</section>
<section>
<h1>Recent <samp>Course</samp></h1>
<dd>
<dt>Hyper Text Markup Language</dt>
<dd><img src="images/Course/05_05.png" alt=""></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="images/Course/06_04.png" alt=""></dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<dt>JavaScript</dt>
<dd><img src="images/Course/09_07.png" alt=""></dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dt>AngularJS</dt>
<dd><img src="images/Course/02_09.png" alt=""></dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
</section>
<article>
<h1>Welcome to <samp>Massive Open Online Course!<samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="images/article.jpg">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
<footer>
<div>
<p>Copyright © 2016 imooc.com All Rights Reserved.</p>
<span>
<img src="images/icon/weichat.png">
<img src="images/icon/sina.png">
<img src="images/icon/qq.png">
</span>
<div>
</footer>
</header>
</body>
</html>
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星