HTML+CSS+Photoshop静态网页还原

编程入门行业动态更新时间:2024-10-08 06:20:14
HTML+CSS+Photoshop<a href=https://www.elefans.com/category/jswz/34/1771395.html style= 静态网页还原"/>
HTML+CSS+Photoshop静态网页还原

还原网页

图片提取链接：

提取码：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 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 eirmodtempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At veroeos et accusam et justo duo dolores er ea rebum. Stet clita ksad gubergrenm, no seatakimate sanctus ipsum dolor sit amet.</p><p class="two">Stet clita kasd gubergrenm no sea takimara sanctus ser Lorem ipusm dolor sir ametoprem 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 takimatasanctus 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 Lorem 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</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>