在代码里只设置了头部的样式，显示不出来导航。
来源：2-1 html5页面布局（表现层_header）
晚风142536
2020-01-19 11:50:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
font-family: Arial;
font-size: 14px;
border: none;
}
a{
text-decoration: none;
}
header{
background-color: black;
height: 80px;
}
header .container{
width: 1200px;
margin: 0 auto;
}
.container a{
float: left;
display: block;
margin: 5px 25px;
}
header nav{
float: right;
}
nav > a{
font-size: 24px;
line-height: 73px;
display: block;
float: left; width: 110px;
height: 73px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<header>
<div class="container">
<a href=""><img src="images/logo.png" alt="logo"/></a>
<nav>
<a href="">Home</a>
<a href="">Course</a>
<a href="">Actual</a>
<a href="">Plan</a>
<a href="">FAQ</a>
<a href="">Notes</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li><img src="images/banner/banner1.jpg" alt=""></li>
<li><img src="images/banner/banner2.jpg" alt=""></li>
<li><img src="images/banner/banner3.jpg" alt=""></li>
</ul>
</section>
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</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>
<h1></h1>
<dl>
<dt>Cascading Style Sheets</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>
<h1></h1>
<dl>
<dt>JavaScript</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>
<h1></h1>
<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" alt="">
<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>
<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>
</footer>
</body>
</html>
1回答
-
好帮手慕星星
2020-01-19
同学你好，导航在下面显示了
图片宽度为198px，左右间距共50px，nav导航整体宽度由内容撑起来为960px，计算出来宽度是：198+50+960=1208px，大于外层盒子1200px，所以右侧导航会换行显示。
建议只给左侧a标签设置左右间距，右侧导航项中a标签就不设置了
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题