<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
.inner{
margin:0 auto;
}
.top{
width: 100%px;
height: 491px;
}
.top .logo{
width: 100%px;
height: 143px;
background-color: black;
}
.top .logo .inner{
width: 994px;
height: 143px;
}
.top .logo .left{
width: 451px;
height: 143px;
float: left;
background-image: url(images/logo_02.png);
}
.top .logo .left h1 a{
display: block;
width: 451px;
height: 143px;
text-indent: -2000px;
}
.top .logo .right{
width: 486px;
height: 143px;
float: right;
}
.top .logo .right ul li{
float: left;
line-height: 143px;
list-style: none;
margin-right: 29px;
font-size: 12px;
color:#7f7f7f;
}
.top .logo .right ul li a{
color:#7f7f7f;
text-decoration: none;
}
.top .nav{
width: 100%px;
height: 348px;
background-image: url(images/帽子_03.png);
}
.top .nav .inner{
width: 965px;
height: 283px;
padding-top:65px;
padding-left:29px;
position: relative;
}
.top .nav .inner h2{
font-size: 24px;
color:#ffffff;
margin-bottom:22px;
}
.top .nav .inner p{
width: 585px;
font-size: 12px;
line-height: 25px;
color:#7f7f7f;
margin-bottom:22px;
}
.top .nav .inner p a{
color:#cb2800;
}
#a1{
display: block;
width: 106px;
height: 41px;
background-image: url(images/按钮背景_03.png);
text-decoration: none;
font-size: 16px;
line-height: 41px;
text-align:center ;
border-radius: 4px;
}
.top .nav .inner img{
position: absolute;
left:629px;
top:-31px;
}
.bottom{
width: 100%px;
height: 896px;
background-image: url(images/bottom背景_03.png);
}
.bottom .inner{
width: 940px;
padding-top:40px;
padding-left:29px;
padding-right:25px;
}
.bottom .inner .top{
width: 940px;
height: 180px; }
.bottom .inner .top img{
margin-right:15px;
}
.bottom .inner .left{
width: 620px;
height: 624px;
float: left;
padding-top:52px;
}
.bottom .inner .left h2{
font-size: 27px;
color:#ffffff;
margin-bottom:16px;
}
.bottom .inner .left img{
display: block;
float: left;
}
.bottom .inner .left p{
width: 540px;
float: right;
font-size: 12px;
line-height: 24px;
color:#7f7f7f;
}
.bottom .inner .left p span{
color:white;
}
.bottom .inner .left #a2{
display: block;
width: 106px;
height: 41px;
background-image: url(images/按钮背景_03.png);
text-decoration: none;
font-size: 16px;
line-height: 41px;
text-align:center ;
border-radius: 4px;
clear:both;
margin-left:21px;
margin-bottom:30px;
}
.bottom .inner .left .border{
width: 620px;
height: 1px;
border-bottom: 1px dotted #3c3d3d;
margin-bottom:30px;
}
.bottom .inner .right{
width: 300px;
height: 636px;
float: right;
padding-top:40px;
}
.bottom .inner .right .a{
width: 300px;
height: 49px;
background-color: black;
color:white;
font-size: 20px;
line-height: 49px;
text-indent: 22px;
margin-bottom:24px;
}
.bottom .inner .right ul li{
list-style: none;
font-size: 12px;
color:white;
width: 280px;
height: 34px;
list-style-image: url(images/sanjiao_03.png);
background-repeat: no-repeat;
margin-left:20px;
border-bottom: 1px dotted #3c3d3d;
line-height: 34px;
}
.bottom .inner .right .b{
width: 280px;
height: 211px;
background-color: black;
padding-top:21px;
padding-left:20px;
}
.bottom .inner .right .b img{
margin-bottom:20px;
}
.bottom .inner .right .b h3{
color:white;
font-size: 16px;
margin-bottom:14px;
}
.bottom .inner .right .b h4{
color:white;
font-size: 12px;
margin-bottom:8px;
}
.bottom .inner .right .b p{
color:#7f7f7f;
font-size: 12px;
line-height: 24px;
}
.footer{
width: 100%px;
height: 124px;
background-color: black;
}
.footer .inner{
width: 994px;
height: 124px;
}
.footer .inner .left{
width: 549px;
height: 86px;
float: left;
padding-top:38px;
padding-left:203px;
}
.footer .inner .left p{
color:#7f7f7f;
font-size: 12px;
line-height: 24px;
}
#p1{
text-indent: 66px;
}
.footer .inner .right{
width: 242px;
height: 74px;
float: right;
padding-top:50px;
}
.footer .inner .right img{
margin-right:10px;
}
</style>
</head>
<body>
<div class="top">
<div class="logo">
<div class="inner">
<div class="left">
<h1>
<a href="">Eagels Troop</a>
</h1>
</div>
<div class="right">
<ul>
<li> <a href="" style="color:#cc2700;">About</a></li>
<li> <a href="">Foundsation</a></li>
<li> <a href="">Program</a></li>
<li> <a href="">Program</a></li>
<li> <a href="">Gallery</a></li>
<li> <a href="">Contacts</a></li>
</ul>
</div>
</div>
</div>
<div class="nav">
<div class="inner">
<h2>Welcome to Eagles Boy Scout Troops</h2>
<p>Welcome to Eagles <a href="">Boy Scout</a> TroopsWelcome to Eagles Boy Scout <a href="">TroopsWelcome</a> to Eagles Boy Scout TroopsWelcome to Eagles Boy Scout TroopsWelcome to Eagles Boy Scout TroopsWelcome to Eagles Boy Scout TroopsWelcome to Eagles Boy Scout Troops</p>
<a href="" id="a1">more</a>
<img src="images/bottom帽子_03.png" alt="">
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="inner">
<div class="top">
<img src="images/ying_03.png" alt="">
<img src="images/shu_03.png" alt="">
<img src="images/zhangpeng_03.png" alt="" style="margin-right:0px">
</div>
<div class="left">
<h2>Next Event</h2>
<img src="images/riqi_03.png" alt="">
<p style="margin-bottom:12px"><span>to Eagles Boy Scout TroopsWelcome</span> to Eagles Boy Scout gles Boy Scout TroopsWeTroopsWelcogles Boy Scout TroopsWeme to Eagles Boy Scout TroopsWelcome to Eagles Boy Scout TroopsWelcome to Eagles Boy Scout Troops</p>
<p style="margin-bottom:20px">gles Boy Scout Trout TroopsWegles Boy Scout TroopsWegles Boy Scout TroopsWegles Boy Scout TroopsWe</p>
<a href="" id="a2">more</a>
<div class="border"></div>
<img src="images/riqi_03.png" alt="" style="margin-right:21px">
<img src="images/ren_03.png" alt="" style="margin-bottom:30px">
<p style="width: 300px">gles Boy Scout Trout TroopsW Boy Scout Trout TroopsWegles Boy Segles Boy Scout TroopsWegles Boy Scout TroopsWegles Boy Scout TroopsWegles Boy Scout Trout TroopsWegles Boy Scout TroopsWegles Boy Scout TroopsWegles Boy Scout TroopsWe</p>
<a href="" id="a2">more</a>
</div>
<div class="right">
<div class="a">Our Adventures</div>
<ul>
<li>Our Adventureshelloworld</li>
<li>Our Adventureshelloworld</li>
<li>Our Adventureshelloworld</li>
<li>Our Adventureshelloworld</li>
<li>Our Adventureshelloworld</li>
<li>Our Adventureshelloworld</li>
<li style="border-bottom:0px;margin-bottom:32px">Our Adventureshelloworld</li>
<div class="b">
<h3>Troop 3 345 Meetings</h3>
<img src="images/帽zhangpeng2_03.png" alt="">
<h4>Monday:9:00~12:00</h4>
<p>our AdventureshelloworldOur Adventureshelloworld</p>
</div>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="inner">
<div class="left">
<p id="p1">Eagles Troops @2012</p>
<p> <a href="" style="color:#cc2800">Website Template</a>by TemplateMonster.com</p>
</div>
<div class="right">
<img src="images/1_03.png" alt="">
<img src="images/2_03.png" alt="">
<img src="images/3_03.png" alt="">
<img src="images/4_03.png" alt="">
</div>
</div>
</div>
</body>
</html>
