导航栏float。
来源：2-5 编程练习
滚回去立正坐好
2019-08-06 11:59:43
<!DOCTYPE html>
<html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link type="text/css" href="css/h5.css" rel="Stylesheet">
</head>
<body>
<header>
<div class="container">
<a href="h5.html"><img src="h5images/logo.png"/></a>
<nav>
<a class="HOME active" href="h5.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>
<section class="banner">
<ul>
<li class="active"><img src="h5images/banner/banner1.jpg"/></li>
<li class="left"><img src="h5images/banner/banner3.jpg"/></li>
<li class="right"><img src="h5images/banner/banner2.jpg"/></li>
</ul>
</section>
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="h5images/Course/05_05.png"></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>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="h5images/Course/06_04.png"></dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="h5images/Course/02_09.png"></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>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="h5images/Course/09_07.png"></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>
</aside>
<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="h5images/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>
</section>
<footer>
<p>Copyright © 2016 imooc.com All Rights Reserved.</p>
<div class="icon">
<img src="h5images/icon/weichat.png"/>
<img src="h5images/icon/sina.png"/>
<img src="h5images/icon/qq.png"/>
</div>
</footer>
</body>
</html>
*{
padding:0;
margin:0;
border:none;
font-size: 14px;
font-family: Arial
}
a{
text-decoration: none;
}
header{
height:80px;
background-color: #000;
}
header > .container{
width:1200px;
margin:0 auto;
}
header > .container > a{
display: block;
float:left;
margin:5px 25px;
}
header > .container > nav{
float:right;
}
header > .container > nav > a{
font-size: 20px;
display: block;
height:73px;
width:110px;
float:right; /*网页上a从右往左显示*/
line-height: 73px;
text-align: center;
}
header > .container > nav a.HOME{
background: #433b90;
}
nav a:hover,
nav a.HOME.active{
padding-bottom:7px;
}
header > .container > nav a.COURSE{
background: #017fcb;
}
header > .container > nav a.ACTUAL{
background: #78b917;
}
header > .container > nav a.PLAN{
background: #feb800;
}
header > .container > nav a.FAQ{
background: #f27c01;
}
header > .container > nav a.NOTES{
background: #d40112;
}
.banner{
background: #eaeaea;
}
.banner > ul{
position:relative;
width:1490px;
height:530px;
margin:0 auto;
padding-top:10px;
}
.banner > ul > li{
position:absolute;
width:610px;
height:300px;
overflow: hidden;
}
.banner > ul > li.active{
z-index:2;
top:37px;
right:0;
left:0;
width:960px;
height:460px;
margin:auto;
border:1px solid #fff;
}
.banner > ul > li.left{
z-index: 1;
top:0;
bottom:0;
left:0;
margin:auto;
}
.banner > ul > li.right{
z-index: 1;
top:0;
right: 0;
bottom:0;
margin:auto;
}
.banner > ul > li > img{
position:absolute;
height:100%;
}
.main{
width:1200px;
height:473px;
margin:34px auto 0;
}
.main h1{
font-size:30px;
font-weight: lighter;
margin-bottom: 23px;
}
.main h1 samp{
font-size: 30px;
color:#7c7c7c;
}
.main > aside{
float: left;
width:450px;
}
.main > aside > dl{
position: relative;
height: 74px;
margin-bottom: 17px;
}
.main > aside > dl > dt{
font-weight: bold;
text-decoration: underline;
position:absolute;
top:-1px;
left:92px;
font-size: 16px;
line-height: 16px;
}
.main > aside > dl > dd:first-of-type{
position: absolute;
left:0;
}
.main > aside > dl > dd:last-of-type{
position: absolute;
font-size: 14px;
left:90px;
top:20px;
}
.main > article{
float:right;
width:720px;
overflow: hidden;
}
.main > article > p,
.main > article > img{
font-size: 14px;
margin-bottom:20px;
}
footer{
width:100%;
height:70px;
background: #000;
}
footer > p{
color:#fff;
font-size: 14px;
line-height: 70px;
float:left;
}
footer > div{
float:right;
margin:14px 40px;
}
footer > div > img{
opacity:0.7;
margin-left: 4px;
}
footer > div > img:hover{
opacity: 1;
cursor:pointer;
}
麻烦解释一下 导航栏设置成float:right; 网页上a从右往左显示。
1回答
-
好帮手慕言
2019-08-06
同学你好，因为a标签设置的是右浮动，所以第一个就会在最右侧，第二个排在第一个a标签的后面，以次类推。也就是同学写出的这种效果。
建议：给a标签设置左浮动就可以实现正常排列的顺序。
如果帮助到了你，欢迎采纳~祝学习愉快~
0
