设置下面图片的位置
找到<div class="header-bottom-inner"></div>容器，在里面打出<img src="images/maozi_03.png" alt="" >标签。
<--在网站开发过程中，发现某一个元素的位置较为特殊，给对应的元素添加定位（绝对定位）属性。
position:absolute;
left:0;和top:0;是坐标原点，默认的坐标原点是屏幕的左上角。
left: 横向移动（相对于坐标原点） left的值是正数往右移动；
top: 纵向移动（相对于坐标原点）top的值是正数往下移动；
通常采用绝对定位的元素，都让其父级的左上角做其坐标原点：
给父级元素添加position:relative;
-->
<img src="images/maozi_03.png" alt="" class="maozi">
.header-bottom-inner{
width: 965px;
height: 282px;
margin: 0 auto;
padding-top: 65px;
padding-left: 29px;
position: relative;
}
.maozi{
position: absolute;
left:660px;
top:-45px;
}
最后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面还原</title>
<style>
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:491px;
background-color:black;
}
.header-top{
width: 100%;
height:144px;
background-color: black;
}
.header-top-inner{
width:994px;
height:144px;
margin:0 auto;
}
.logo{
width:451px;
height:144px;
background-color: blue;
float:left;
}
h1{
width:451px;
height:144px;
background-image: url(images/logo_02.png);
}
h1 a{
display:block;
width:451px;
height:144px;
text-indent:-2000px;
}
.nav{
width:480px;
height:144px;
float:right;
}
.nav li{
list-style:none;
float:left;
font-size: 12px;
margin-right: 28px;
height: 148px;
line-height: 148px;
color:#7f7f7f;
}
.nav .active{
color:#cb2700;
}
.header-bottom{
width:100%;
height:347px;
background-image: url(images/2_02.png);
}
.header-bottom-inner{
width:965px;
height: 284px;
margin:0 auto;
padding-top:63px;
padding-left:29px;
position:relative;
}
h3{
color:white;
font-size: 24px;
margin-bottom: 19px;
}
p{
width: 586px;
color:#7f7f7f;
line-height:25px;
}
p a{
color:#cb2800;
}
.maozi{
position:absolute;
left:660px;
top:-39px;
}
.main{
width:100%;
height:896px;
background-image: url(images/1_02.png);
}
.footer{
width:100%;
height:124px;
background-color: black;
}
</style>
</head>
<body>
<div class="header">
<div class="header-top">
<div class="header-top-inner">
<div class="logo">
<h1>
<a href="#">EaglesTroop</a>
</h1>
</div>
<div class="nav">
<ul>
<li class="active">About</li>
<li>Foundation</li>
<li>Program</li>
<li>Leaders</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</div>
</div>
</div>
<div class="header-bottom">
<div class="header-bottom-inner">
<h3>Welcome to Eagles Boy Scout Troops!</h3>
<p>Eagles is one of <a href="#">free web templates</a> created by Template.com team. It is optimized for 1280x1024 resolution. This <a href="#">Eagles Template </a> goes with two packages-with PSD source files and without them. PSD files are available for the registered members of Template Monster. The basic package(without PSD source) is available for anyone without registration.</p>
<img src="images/mauzi_03.png" alt="" class="maozi">
</div>
</div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
最后的效果图：
