HTML+CSS+Photoshop静态网页还原
还原网页
图片提取链接：https://pan.baidu.com/s/1ZQ9uSsNvWCZJz0mvdxwTMg
提取码：0000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>主界面</title>
<style>
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
.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;
}
.header-top .inner .logo{
width: 448px;
height: 144px;
float: left;
}
.header-top .inner .logo h1{
width: 448px;
height: 144px;
background-image: url(images/index_02.png);
text-indent: -1000px;
}
.header-top .inner .logo h1 a{
width: 448px;
height: 144px;
display: block;
}
.header-top .inner .nav{
width: 480px;
height: 144px;
float: right;
}
.header-top .inner .nav ul li{
height: 144px;
list-style: none;
float: left;
/*和高度一样 ，设置垂直居中*/
line-height: 144px;
margin-right: 29px;
}
.header-top .inner .nav ul li a{
/*取消超链接下划线*/
text-decoration: none;
font-size: 12px;
color: #7f7f7f;
}
.header-top .inner .nav ul li .active{
color: #cb2700;
}
.header-bot
{
width: 100%;
height: 347px;
/*设置背景图,默认具有平铺属性*/
background-image: url(images/index_03.png);
}
.header-bot .inner{
width: 965px;
height: 281px;
/*background-color: green;*/
/*元素水平居中*/
margin: 0 auto;
/*给元素添加padding之后，会增加 网页中的实际占位 */
padding-top: 66px;
padding-left: 29px;
position: relative;
}
.header-bot .inner h3{
color: white;
font-size: 24px;
margin-bottom: 17px;
}
.header-bot .inner p{
width: 584px;
color: #7f7f7f;
line-height: 25px;
font-size: 12px;
margin-bottom: 19px;
}
.header-bot .inner p a{
color: #cb2800;
}
.header-bot .inner .more{
display: block;
width: 106px;
height: 41px;
background-image: url(images/more_10.png);
line-height: 41px;
color: white;
text-align: center;
text-decoration: none;
border-radius: 4px;
font-size: 20px;
}
.header-bot .inner img{
position: absolute;
left: 659px;
top: -27px;
}
.main{
width: 100%;
height: 896px;
/*设置背景图,默认具有平铺属性*/
background-image: url(images/index_01_03.png);
}
.main .inner{
width: 942px;
height: 854px;
/*background-color: red;*/
margin: 0 auto;
padding-left: 29px;
padding-top: 42px;
padding-right: 24px;
}
.main .inner .top{
width: 942px;
height: 180px;
/*background-color: blue;
*/
}
.main .inner .top ul li{
list-style: none;
float:left ;
margin-right:21px;
}
.main .inner .top ul .active{
margin-right:0px;
}
.main .inner .top ul li img{
display: block;
}
.main .inner .left{
width: 621px;
height: 622px;
/*background-color: pink;*/
float: left;
padding-top: 52px;
}
.main .inner .left h3{
font-size: 26px;
color:white;
margin-bottom: 20px;
}
.main .inner .left .teusday{
display: block;
float: left;
}
.main .inner .left .one{
margin-bottom: 10px;
}
.main .inner .left .one,.main .inner .left .two{
width: 539px;
line-height: 24px;
float: right;
color: #7f7f7f;
font-size: 13px;
}
.main .inner .left .one span
{
color: white;
}
.main .inner .left .two{
margin-bottom: 20px;
}
.main .inner .left .more{
display: block;
width: 106px;
height: 41px;
background-image: url(images/more_10.png);
line-height: 41px;
color: white;
text-align: center;
text-decoration: none;
border-radius: 4px;
font-size: 20px;
/*清除浮动的影响*/
clear: both;
margin-left: 82px;
margin-bottom: 30px;
}
.main .inner .left .ibox{
border-bottom: 1px dotted #3C3D3D;
margin-bottom: 30px;
}
.main .inner .left .monday{
display: block;
float: left;
}
.main .inner .left .boy{
display: block;
float: left;
margin-left: 20px;
margin-bottom: 30px;
}
.main .inner .left .three{
width: 298px;
line-height: 25px;
float: right;
color: #7f7f7f;
font-size: 13px;
}
.main .inner .right{
width: 300px;
height: 634px;
/*background-color: yellowgreen;*/
float: right;
padding-top: 40px;
}
.main .inner .right h3{
width: 300px;
height: 48px;
line-height: 48px;
background-color: black;
font-size: 24px;
color: white;
text-indent: 22px;
margin-bottom: 20px;
}
.main .inner .right ul li{
width:300px;
height: 36px;
line-height: 36px;
margin-left: 20px;
color: white;
font-style: italic;
text-indent: 12px;
border-bottom: 1px dotted #3c3d3d;
background-image: url(images/sj_03.png);
background-repeat: no-repeat;
background-position: left center;
font-size: 14px;
}
.main .inner .right ul .last{
border-bottom: none;
margin-bottom: 30px;
}
.main .inner .right .ibox{
width: 280px;
height: 212px;
background-color: black;
color: white;
padding-top: 20px;
padding-left: 20px;
}
.main .inner .right .ibox h5{
font-family: "arial narrow";
font-size: 18px;
margin-bottom: 15px;
}
.main .inner .right img{
display: block;
margin-bottom: 23px;
}
.main .inner .right .ibox p{
font-size: 12px;
}
.main .inner .right .ibox .fp{
font-weight: bold;
margin-bottom: 5px;
}
.main .inner .right .ibox .lp{
color: #7f7f7f;
line-height: 20px;
}
.footer{
width: 100%;
height: 124px;;
background-color: black;
}
.footer .inner{
width: 994px;
height: 124px;
/*background-color: red;*/
margin: 0 auto;
}
.footer .inner .left{
width: 751px;
height: 86px;
padding-top: 38px;
/*background-color: blue;*/
float: left;
text-align: center;
}
.footer .inner .left p{
color: #7f7f7f;
font-size: 12px ;
}
.footer .inner .left .one{
margin-bottom: 12px;
}
.footer .inner .left .two a{
color: #cb2800;
}
.footer .inner .right{
width: 243px;
height: 25px;
padding-top: 50px;
/*background-color: red;*/
float: right;
}
.footer .inner .right ul li{
float: left;
margin-right: 10px;
}
.footer .inner .right ul li a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="header">
<div class="header-top">
<div class="inner">
<!--盒子默认是块元素-->
<!--使用浮动，让两个元素并排显示-->
<div class="logo">
<h1>
<a href="index.html">Eagles Troop</a>
</h1>
</div>
<div class="nav">
<ul>
<!--具有相同的样式 并且在一排，用li标签-->
<li>
<a href="index.html" class="active">About</a>
</li>
<li>
<a href="index.html">Foundation</a>
</li>
<li>
<a href="index.html">Program</a>
</li>
<li>
<a href="index.html">Leaders</a>
</li>
<li>
<a href="index.html">Gallery</a>
</li>
<li>
<a href="index.html">Contacts</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header-bot">
<div class="inner">
<h3>Welcome to Eagles Boy Scout Troops!</h3>
<p>Eagles is one of<a href="#">free web termplates </a>created by TemplateMonster.com team. It is optimized for 1280×1024 resolution.
This <a href="#">Eagles Template</a> goes with two package-with PSD source files and without them. PSD file are available for the
registeres members of Template Monster. The basic package (withput PSD source) is available for anyyone without registration.</p>
<a href="#" class="more">more</a>
<img src="images/11_03.png" />
</div>
</div>
</div>
<div class="main">
<div class="inner">
<div class="top">
<ul>
<li><img src="images/bird_03.png"/></li>
<li><img src="images/tree_03.png"/></li>
<li class="active"><img src="images/trip_03.png" /></li>
</ul>
</div>
<div class="left">
<h3>Next Event</h3>
<img src="images/teusday_03.png" class="teusday"/ >
<p class="one"><span>Lorem ipsum dolor sit amet, consettetue sadipscing elite</span> sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores er ea rebum. Stet clita ksad gubergrenm, no sea
takimate sanctus ipsum dolor sit amet.
</p>
<p class="two">Stet clita kasd gubergrenm no sea takimara sanctus ser Lorem ipusm dolor sir amet
oprem ipsum dolor sit amet.</p>
<a href="#" class="more">more</a>
<div class="ibox">
</div>
<img src="images/monday_03.png" class="monday"/>
<img src="images/boy_03.png"/ class="boy">
<p class="three"><span>Slet clita kasd gubergren</span>no sea takimata
sanctus est Lorem ipsum dolor sit ameet lorem ipsum dolor sit ametm sad diam vuluptua. At vero eos
et accisam et justo duo dolores et earebim. Stet clita kasd gubergren,no sea takimara sanctus est L
orem ipsum dolor sit amet.
</p>
<a class="more" href="#">more</a>
</div>
<div class="right">
<h3>Our Adventures</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consetetur sadipascing elitr sed diam</li>
<li>Nonumy eirmod tempor invidunt ut</li>
<li>Labore et dolore magna</li>
<li>Aliquyam erat sed diam volupfua</li>
<li>Vero eos et accisam et justo duo</li>
<li class="last">Stet clita kasd gubergreen</li>
</ul>
<div class="ibox">
<h5>Troop # 345 Meetings</h5>
<img src="images/house_03.png"/>
<p class="fp">Monday 9:00 - 12:00</p>
<p class="lp">Lorem ipsum dolor sit amet, consettetue sadipscing elite sed diam nonumy.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">
<div class="left">
<p class="one">Eagles Troops @ 2012</p>
<p class="two"><a href="#">Website Template</a> by TemplateMonster.com</p>
</div>
<div class="right">
<ul>
<li><a href="#"><img src="images/one_05.png"/></a></li>
<li><a href="#"><img src="images/two_06.png"/></a></li>
<li><a href="#"><img src="images/three_06.png"/></a></li>
<li><a href="#"><img src="images/four_06.png"/></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
