<!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;
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;
}
.more1{
position:absolute;
top:261px;
}
.maozi{
position:absolute;
left:660px;
top:-30px;
}
.main{
width:100%;
height:896px;
background-image: url(images/d_07.png);
}
.main-top{
width: 965px;
height: 180px;
margin:0 auto;
padding-top:40px;
padding-left:29px;
}
.tu1{
margin-right: 20px;
}
.tu2{
margin-right: 20px;
}
.main-middle{
width: 965px;
height: 314px;
margin:0 auto;
padding-top:40px;
padding-left:29px;
position: relative;
}
h2{
color:#ffffff;
margin-bottom: 23px;
}
.tu4{
margin-top: -2px;
margin-right: 21px;
float:left;
}
.main-middle-p1{
width: 528px;
color:#7f7f7f;
font-size:12px;
line-height:25px;
float:left;
margin-bottom: 15px;
}
.lorem{
color:#ffffff;
}
.main-middle-p2{
width: 447px;
color:#7f7f7f;
font-size:12px;
line-height:25px;
padding-left: 81px;
}
.more2{
position:absolute;
top:265px;
left:110px;
}
.our{
position: absolute;
left:677px;
top:25px;
}
.main-middle-asd ul{
position: absolute;
top:120px;
}
.main-middle-asd li{
list-style:none;
font-size: 12px;
color:#ffffff;
margin-left: 660px;
}
.main-bottom{
width: 994px;
height: 322px;
margin:0 auto;
position: relative;
}
.main-bottom li{
list-style:none;
color:#3c3d3d;
}
.tu5{
margin-top:30px;
margin-right: 21px;
float:left;
}
.tu6{
margin-top: 30px;
margin-right: 42px;
float:left;
}
.main-bottom-stet{
color:#7f7f7f;
font-size:12px;
margin-top: 30px;
}
.Stet{
color:#fefefe;
}
.tu7{
position:absolute;
left:677px;
top: 50px;
}
.more3{
margin-left: 81px;
margin-top: 10px;
}
.footer{
width:100%;
height:184px;
background-color: black;
}
.footer-inner{
width: 994px;
height: 124px;
margin:0 auto;
}
.footer-inner-chuban{
width: 669px;
height: 124px;
float:left;
}
.footer-E{
color:#7f7f7f;
font-size:12px;
margin-top: 58px;
margin-left: 159px;
}
.footer-W{
color:#7f7f7f;
font-size:12px;
margin-left: 93px;
}
.footer-inner-shangbiao{
width: 325px;
height: 124px;
float:right;
margin-top: 49px;
margin-left: 0px;
}
</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/j_03.png" alt="" class="more1">
<img src="images/mauzi_03.png" alt="" class="maozi">
</div>
</div>
</div>
<div class="main">
<div class="main-top">
<img src="images/a_03.png" alt="" class="tu1">
<img src="images/b_05.png" alt="" class="tu2">
<img src="images/c_07.png" alt="" class="tu3">
</div>
<div class="main-middle">
<h2>Next Event</h2>
<img src="images/f_04.png" alt="" class="tu4">
<p class="main-middle-p1"><a class="lorem">Lorem ipsum dolor sit amet,consetetur sadipscing elitr</a> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At veroeos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no seatakimata sanctus ipsum dolor sit amet.</p>
<p class="main-middle-p2">
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet lorem ipsum dolor sit amet.
</p>
<img src="images/j_03.png" alt="" class="more2">
<img src="images/45_03.png" alt="" class="our">
<div class="main-middle-asd">
<ul>
<li>▶ Lorem ipsum dolor sit amet</li>
<li>┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┄┄┄┄┈┈┈┄┈┈┈┈</li>
<li>▶ Consetetur sadipscing elitr sed diam</li>
<li>┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┄┄┄┄┈┄┈┈┈┈┈┈</li>
<li>▶ Nonumy eirmod tempor invidunt ut</li>
<li>┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┄┄┄┄┈┄┈┈┈┈┈┈</li>
<li>▶ Labore et dolore magna</li>
<li>┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┄┄┄┄┈┈┄┈┈┈┈┈</li>
<li>▶ Aliquyam erat sed diam voluptua</li>
<li>┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┄┄┄┄┈┈┈┄┈┈┈┈┈</li>
<li>▶ Vero eos et accusam et justo duo</li>
<li>┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┄┄┄┄┈┈┈┄┈┈┈┈┈</li>
<li>▶ Stet clita kasd gubergren</li>
</ul>
</div>
</div>
<div class="main-bottom">
<ul>
<li>┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┈┈┈┄┄┄┄┈┈┈┈┈┄┄┄┄┈┈┈┄┈┈┈</li>
</ul>
<img src="images/g_03.png" alt="" class="tu5">
<img src="images/h_03.png" alt="" class="tu6">
<p class="main-bottom-stet"><a class="Stet">Stet clita gubergren</a>,no sea takimata sanctus est Lorem ipsum dolor sit amet lorem ipsum dolor sit amet,sed diam voluptua.At vero eos et accusam et justo duo dolores et earebum.Stet clita kasd gubergren,no sea takimata sanctus eat Lorem ipsum dolor sit amet.</p>
<img src="images/k_03.png" alt="" class="tu7">
<img src="images/j_03.png" alt="" class="more3">
</div>
</div>
<div class="footer">
<div class="footer-inner">
<div class="footer-inner-chuban">
<p class="footer-E">Eagles Troops @ 2012 <br></p>
<p class="footer-W"><a>Website Template</a> by TemplateMonster.com
</p>
</div>
<div class="footer-inner-shangbiao">
<img src="images/l_03.png" alt="">
<img src="images/m_03.png" alt="">
<img src="images/n_03.png" alt="">
<img src="images/o_03.png" alt="">
</div>
</div>
</div>
</body>
</html>
Copy the code