老师，我按视频中的代码显示的效果和视频中不一样，右边会凸出来一部分且有水平滚动条？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<header>
<div class="container">
<a href="index.html"><img src="images/logo.png"/></a>
<nav>
<a href="index.html" class="Home active">Home</a>
<a href="#" class="Course">Course</a>
<a href="#" class="Actual">Actual</a>
<a href="#" class="Plan">Plan</a>
<a href="#" class="FAQ">FAQ</a>
<a href="#" class="Notes">Notes</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li class="active"><img src="images/banner/banner1.jpg"/></li>
<li class="left"><img src="images/banner/banner3.jpg"/></li>
<li class="right"><img src="images/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="images/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="images/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>JavaScript</dt>
<dd><img src="images/Course/09_07.png"></dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="images/Course/02_09.png"></dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</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="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>
</section>
<footer>
<div class="container">
<p>
Copyright © 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>
*{
padding:0;
margin:0;
border:none;
font-family:Arial;
font-size:14px;
}
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:right;
}
header > .container > nav > a{
font-size:24px;
display:block;
width:110px;
height:73px;
line-height:73px;
text-align:center;
float:left;
color:#fff;
}
header > .container > nav > a.Home{background:#433b90;}
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;}
header > .container > nav > a:hover,
header > .container > nav > a.active{
padding-bottom:7px;
}
.banner {
background:#eaeaea;
}
.banner > ul{
position:relative;
width:1490px;
height:538px;
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;
left:-30%;
height:100%;
}
正在回答 回答被采纳积分+1
老师，以下是我的代码效果图，却是有水平滚动条，且右边的图片凸出
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星