<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业 图片还原</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 158px; /*80 78*/
}
.header_top{
width:100%;
height:80px;
background-image: url(images/headerback_03.png);
}
.header_top .inner{
width: 940px;
height: 80px;
margin: 0 auto;
}
.header .header_top .inner .logo{
width: 224px;
height: 80px;
float: left;
}
.header .header_top .inner .logo h1{
width:224px;
height:80px;
background-image: url(images/logo_02.png);
}
.header .header_top .inner .logo h1 a{
width:224px;
height:80px;
display: block;
text-indent: -1000px;
}
.header .header_top .inner .nav{
width:171px;
height:80px;
float: right;
}
.header .inner .nav p{
float: left;
font-size: 16px;
line-height: 80px;
color: #636f6f;
line-height: 80px;
margin-right: 3px;
}
.header .inner .nav ul li{
list-style: none; /*列表符号清楚*/
/*行高等于容器高度时,文本垂直居中*/
margin-right: 7px;
float: right;
margin-top: 30px;
}
.header .inner .nav ul li img3{
margin-right: 0;
}
.header_bottom{
width: 100%;
height: 78px;
background-color: black;
}
.header_bot{
width: 939px;
height: 78px;
margin: 0 auto;
}
.header .header_bottom .header_bot ul li{
list-style: none; /*列表符号清楚*/
float: left;
font-size: 15px;
/*间距*/
margin-right: 34px;
margin-top: 12px;
}
.header .header_bot ul li a{
text-decoration: none;
color: white;
}
.header .header_bot ul li .header_bot3{
color: #b4533e;
}
.main{
width: 100%;
height: 580px;
background-color:black;
}
.main .inner{
width: 939px;
height: 580px;
margin: 0 auto;
}
.main .inner .left{
width: 282px;
height: 580px;
float: left;
}
.main .inner .left .left_top{
width: 282px;
height: 187px;
margin-bottom: 30px;
}
.main .inner .left h3{
font-size: 28px;
color: white;
margin-bottom: 9px;
}
.main .inner .left img{
display: block;
float:left;
margin-right: 20px;
margin-bottom: 14px;
}
.main .inner .left .one{
font-size: 18px;
color: white;
margin-bottom: 14px;
}
.main .inner .left .two{
font-size: 14px;
color: #536f6f;
line-height: 18px;
}
.main .inner .left .left_bottom{
width: 282px;
height: 363px;
}
.main.inner .left .left_bottom h3{
font-size: 28px;
color: white;
margin-bottom: 10px;
}
.main .inner .left .left_bottom ul li{
font-size: 14px;
color: white;
list-style: none;
line-height: 30px;
text-indent: 12px;
/*取消背景图的平铺*/
background-repeat: no-repeat;
background-image: url(images/jiantou_03.png);
background-position: left center;
}
.main .inner .right{
width: 607px;
height: 580px;
float: right;
}
.main .inner .right h3{
font-size: 28px;
color: white;
margin-bottom: 13px;
}
.main .inner .right ul li{
width: 171px;
height: 539px;
margin-right: 47px;
list-style: none;
float: left;
}
.main .inner .right ul .img3{
margin-right: 0;
float: right;
}
.main .inner .right ul li img{
/*清楚图片自带的格式*/
display: block;
margin-bottom: 18px;
}
.main .inner .right ul li .one{
font-size: 18px;
color:white;
margin-bottom: 14px;
}
.main .inner .right ul li .two{
font-size: 14px;
color:white;
margin-bottom: 14px;
line-height: 26px;
}
.main .inner .right ul li .three{
font-size: 14px;
color: #536f6f;
margin-bottom: 14px;
line-height: 26px;
}
.main .inner .right ul li .more{
display: block;
width: 114px;
height: 38px;
color: white;
background-image: url(images/more_07.png);
text-decoration: none; /*无文本修饰*/
line-height: 41px;
text-align: center;
font-size: 20p;
/*清除浮动*/
clear: both;
}
.footer{
width: 100%;
height: 235px;
background-color:black;
}
.footer .inner{
width: 939px;
height: 235px;
margin: 0 auto;
}
.footer .inner .footer_top{
border-bottom: 1px dotted #3c3d3d;
margin-bottom: 1px;
}
.footer .inner .left1{
width: 196px;
height: 197px;
float: left;
padding-top: 39px;
margin-right: 41px;
}
.footer .inner .left1 h3{
color: white;
font-size: 20px;
margin-bottom: 18px;
}
.footer .inner .left1 ul li{
list-style: none;
font-size: 10px;
color: #536f6f;
text-indent: 12px;
background-repeat: no-repeat;
background-image: url(images/jiantou1_06.png);
background-position: left center;
}
.footer .inner .left2{
width: 174px;
height: 197px;
float: left;
padding-top: 39px;
margin-right: 37px;
}
.footer .inner .left2 h3{
color: white;
font-size: 20px;
margin-bottom: 18px;
}
/*.footer .inner .left2 ul li{
list-style: none;
font-size: 10px;
color: white;
}
.footer .inner .left2 ul li span{
margin-left: 12px;
color:#536f6f;
}
.footer .inner .left2 ul li span .a2{
margin-left: 27px;
color:#c96f53;
}*/
.footer .inner .left2 table{
font-size: 10px;
color: white;
}
.footer .inner .left2 table .two{
color:#536f6f ;
}
.footer .inner .left2 table .three{
color:#c96f53;
}
.footer .inner .right1{
width: 179px;
height: 197px;
float: left;
padding-top: 39px;
margin-right: 64px;
}
.footer .inner .right1 h3{
color: white;
font-size: 20px;
margin-bottom: 18px;
}
.footer .inner .right2{
width: 179px;
height: 197px;
float: right;
padding-top: 39px;
}
.footer .inner .right2 p{
font-size: 10px;
color: #536f6f;
}
.footer .inner .right2 p span{
color:#c96f53;
}
</style>
</head>
<body>
<div class="header">
<div class="header_top">
<div class="inner">
<div class=" logo">
<!--logo用H1标签-->
<h1><a href="index1.html">EaglesTroop</a></h1>
</div>
<div class="nav">
<p>Follow Us:</p>
<!--相同元素的并列排序，都是使用无序列表-->
<ul>
<li>
<img src="images/top_03.png" />
</li>
<li>
<img src="images/top3_03.png" />
</li>
<li>
<img class="img3" src="images/top4_03.png" />
</li>
</ul>
</div>
</div>
</div>
<div class="header_bottom">
<div class="header_bot">
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">BREEDING</a>
</li>
<li>
<a href="#" class="header_bot3">HORSESALE</a>
</li>
<li>
<a href="#">EVENTS</a>
</li>
<li>
<a href="#">GALLERY</a>
</li>
<li>
<a href="#">CONTACIS</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="inner">
<div class="left">
<div class="left_top">
<h3>Special Note</h3>
<img class="img" src="images/tanhao_03.png" />
<p class="one">Consetrtur sadipscing elitr sed diam nonumy.</p>
<p class="two">Consetrtur sadipscing elitr sed diam nonumy.Consetrtur sadipscing elitr sed diam nonumy.elitr sed diam nonumy.elitr sed diam nonumy.</p>
</div>
<div class="left_bottom">
<h3>Special Note</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consetetur sadipscing eitr</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consetetur sadipscing eitr </li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consetetur sadipscing eitr </li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consetetur sadipscing eitr</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
</div>
<div class="right">
<h3>Breeding Stalions</h3>
<ul>
<li>
<img src="images/ma1_03.png" />
<p class="one">Consete sadipscing</p>
<p class="two">Nam liber tepor soluta nobis eleifed option congue nihil imperdiet</p>
<p class="three">Nam liber tepor soluta nobis eleifed option congue nihil imperdietNamNam liber tepor soluta</p>
<a href="#" class="more">Read More</a>
</li>
<li>
<img src="images/ma2_03.png" />
<p class="one">Elitr sed diam</p>
<p class="two">Nam liber tepor soluta nobis eleifed option congue nihil imperdiet</p>
<p class="three">Nam liber tepor soluta nobis eleifed option congue nihil imperdietNamNam liber tepor soluta</p>
<a href="#" class="more">Read More</a>
</li>
<li class="img3">
<img src="images/ma3_03.png" />
<p class="one">Rirmod tempor</p>
<p class="two">Nam liber tepor soluta nobis eleifed option congue nihil imperdiet</p>
<p class="three">Nam liber tepor soluta nobis eleifed option congue nihil imperdietNamNam liber tepor soluta</p>
<a href="#" class="more">Read More</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="inner">
<!-- 可以用css做三条线
css{
width:940px
height:630px
margin:0 auto
backgroud-image:url(图片)
backgroud-repeat：repeat-x
background-position：left bottom
-->
}
<div class="footer_top"></div>
<div class="footer_top"></div>
<div class="footer_top"></div>
<div class="left1">
<h3>Why Us</h3>
<ul>
<li>Lorem dolor sit amet</li>
<li>Consetetur sadipscing</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="left2">
<h3>Address</h3>
<!-- 老师讲的做法
.footer .inner .address li{
list-style: none;
margin-bottom: 8px;
font-size: 14px
}
.footer .inner .address li .one{
color: white;
font-weight: bold;
width: 66px;
/*行级块元素*/
display:inline-block;
}
<ul>
<li>
<span class="one">
country
</span>
<span class="two">
USA
</span>
</li>
<li>
<span class="one">
City
</span>
<span class="two">
sanshang
</span>
</li>
</ul>
-->
<table width="174px" border="0">
<tr width="64px">
<td class="one">Country:</td>
<td class="two">USA</td>
</tr>
<tr>
<td class="one">City:</td>
<td class="two">San Diego</td>
</tr>
<tr>
<td class="one">Email:</td>
<td class="three">Icenter@mail.com</td>
</tr>
</table>
</div>
<div class="right1">
<h3>Newsletter</h3>
<img src="images/kuang_03.png" />
</div>
<div class="right2">
<p>@ 2012 Hourse Club</p>
<p>Website Template Collect <span>www.模板之家</span></p>
</div>
</div>
</div>
</body>
</html>
1、首先，拿到一个页面设计图首先分成头（网站logo、导航栏、广告以及网站介绍区域）、体（网站的主题内容）和尾部（网站的基本信息、合作厂商以及作者）。再把每个大的div分成若干个小的div。
2、需注意，三条虚线采用背景图片平铺方式展现出来，并利用CSS中background-repeat表示背景图平铺方式和background-position属性表示定位背景图中对象的位置。
3、文字左右并排而且不是相同class时，不用<table>来设定，而用<ul><li><span></span></li></ul>设置，<table>属性现阶段开发已过时，bug太多。其中用到了CSS样式中的box-sizing：border-box属性可以自动计算padding大小，但是有时会遇到小的bug。还用到了display：inline-block属性行级块元素。
4、相同元素的并列排序，都是使用无序列表。
5、logo用H1标签。
6、当class里面只有一个标签时，css中不用写.（点）。
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
