请检查我的！老师有一处不对，banner的背景宽度设成1400多了，超过了头部和主体1200的宽度。

来源：2-5 编程练习

Sherlock_bourne

2019-03-23 19:43:59

我的html和css部分，分别叫2-2.html，和2-2.css。banner部分的图片就是源码banner文件夹下的banner.jpg1到banner.jpg3。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="2-2.css">
</head>
<body>
<header>
<div class="container"><!-- container：容器 -->
<a href="2-2.html"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png" alt="logo">MYMOOC</a>
<nav>
<a class="Home active" href="2-2.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"><!-- 在CSS中会用到通配符，如果此处用ID，
因为ID权重大于*，所以CSS尽量别用，
把ID留给后面js用 -->
<ul>
<li class="active"><img src="banner1.jpg"></li>
<li class="left"><img src="banner3.jpg"></li>
<li class="right"><img src="banner2.jpg"></li>
</ul>
</section>
<section class="main">
<aside>
<h1>Recent<!-- 此处不换行，两单词将会无间隙相连 -->
<samp>Course</samp>
</h1><!-- 添加dt时，可以先选中全部<dl>。ctrl+d选择同标签 -->
<!-- dl*4>dd*2 -->
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>1</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 Sheet</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>2</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="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>3</dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dd>
<dd>4</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="http://climg.mukewang.com/582e61180001ede703300130.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>

</body>
</html>

*{
	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:20px 150px;
	font-size: 30px;
	color: #fff;

}
header>.container>nav{
	float:right;
}
header>.container>nav>a{
	font-size:24px;
	display:block;
	width:110px;
	height:73px;
	line-height:73px;/*让文字居中*/
	float:left;/*如果不加，因为已经成了block，
					故每个a会独占一行，
				所以要用浮动让他们脱离文档流，在一行显示*/
	text-align:center;
	color:#fff;
}
header>.container>nav>a.Home{background-color:  #d40112; }
header>.container>nav>a.Course{background-color: #feb800; }
header>.container>nav>a.Actual{background-color: #78b917; }
header>.container>nav>a.Plan{background-color: #433b90; }
header>.container>nav>a.FAQ{background-color: #f27c01; }
header>.container>nav>a.Notes{background-color: #017fcb; }
header>.container>nav>a:hover,header>.container>nav>a.active{
	padding-bottom: 7px;
}

.banner{/*三张图片的背景色*/
	background:gray;
}
.banner>ul{/*三个包含图片的li相对父级元素定位，故把相对定位设置给父级元素ul。*/
	position: relative;
	width: 1200px;
	height: 360px;
	margin:0 auto;/*未居中，所以加个它*/
	padding-top: 10px;/*不要用外边距，否则整个head以下都会被往下10px*/
	/*overflow: hidden;*//*原图非常大，故超出部分把它隐藏掉*/
}
.banner>ul>li{/*可以直接设置图片尺寸啊！不需要溢出隐藏！保留图片内容完整性！*/
	position: absolute;
	width: 550px;/*先把三张图都设置两个小图的尺寸，最后设置大图的*/
	height: 200px;
	overflow: hidden;/*同样溢出隐藏*/
}/*此时三张图片是叠加在一起的*/
.banner>ul>li.active{
	z-index:2;/*因为第二张图是在最上面，所以给zui高得值*/
	top:37px;
	right:0;
	left:0;/*左右为0，就会左右拔河，故会居中显示*/
	width: 650px;
	height: 300px;
	margin: auto;/*拔河效应*/
	border: 1px solid #fff;
	box-shadow:;
}
.banner>ul>li.left{
	z-index: 1;
	top: 0;/*上下拔河吧*/
	bottom: 0;
	left: 0;
	margin:auto;/*拔河*/
}
.banner>ul>li.right{
	z-index: 1;
	top: 0;/*上下拔河吧*/
	bottom: 0;
	right: 0;
	margin:auto;/*拔河*/
}
/*此时只显示了辣么大一张图的中的一小部分，所以我们现在整体调整下*/
.banner>ul>li>img{
	position: absolute;
	left: -30%;
	height: 100%;
}

/*主体*/

.main{
	width: 1200px;
	height: 480px;
	margin:34px auto 0;
}
.main h1{
	font-size:30px;
	font-weight:lighter;/*瘦一点*/
	margin-bottom:23px;
}
.main h1>samp{
	font-size: 30px;/*若不设，<samp>内字体将比父元素小一号*/
	color: #7c7c7c;
}
.main>aside{
	float:left;/*将两个块级元素显示在同一行，故得加浮动。*/
	width: 450px;
}

/*此时aside部分的dtdd独占一行，要实现这样位置，只能用相对定位*/
.main>aside>dl{
	position: relative;
	display: block;/*把dl改成块级元素*/
	height: 75px;
	margin-bottom: 18px;
}
.main>aside>dl>dt{
	position: absolute;
	top: -1px;
	left: 87px;
	font-size: 16px;
	font-weight: bold;
	line-height: 16px;
	text-decoration: underline;/*添加下划线*/
}
.main>aside>dl>dd:nth-of-type(1){/*选择属于这个元素下的第一个元素*/
	position: absolute;
	left: 0;
	z-index: -1;
}
.main>aside>dl>dd:nth-of-type(2){
	position: absolute;
	color: #fff;
	font-size: 24px;
	top: 12px;
	left:18px;
	z-index: 3;
}
.main>aside>dl>dd:nth-of-type(3){
	position: absolute;
	top: 20px;
	left: 90px;/*相对上面dt往右错开3px*/
}


.main>article{
	float: right;
	width: 720px;
	/*若不给宽度，因为是块级元素，故会显100%，故会跑到下一行*/
	overflow: hidden;/*因为原图大于以上宽度，故设溢出隐藏*/
}
.main>article>img{
	width: 720px;
	height: 220px;
	margin:10px;
}
.main>article>p{
	margin:10px;
}