下面为页面的logo图，这节课主要是还原这张logo图
一、综合前几节课的内容，下面的代码还原了网页整体中大体部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:491px;
background-color: blue;
}
.header-top{
width:100%;
height:144px;
background-color:black;
}
.header-bottom{
width:100%;
height:347px;
background-image:url(images/2_03.png)
}
.main{
width:100%;
height:896px;
background-image:url(images/1_03.png);
}
.footer{
width: 100%;
height: 124px;
background-color: black;
}
</style>
</head>
<body>
<div class="header">
<div class="header-top"></div>
<div class="header-bottom"></div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
二、还原inner中模块的步骤：
第一步：需要一个居中显示内容的<div>
下面这张图片是在top区域中所放置的内容的<div>
margin: 0 auto;是区域块居中显示的代码
第二步：在header-top中打一个header-top-inner所放置内容的
div
第三步：在inner区域中还包含logo和nav两个模块，所以在inner区域中，通过<div>再将其分成左右两个不同的<div>,一个放置logo，一个放置导航。
第四步：由于<div>标签默认是块元素，会导致logo的<div>和nav的<div>纵向并排显示,所以要给两个横向并排显示的<div>加上浮动属性。
float:left; <--向左浮动-->
float:right; <--向右浮动-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:491px;
background-color: blue;
}
.header-top{
width:100%;
height:144px;
background-color:black;
}
.header-top-inner{
width:994px;
height:144px;
background-color:red;
margin: 0 auto;
}
.logo{
width:451px;
height:144px;
background-color:blue;
float:left;
}
.nav{
width:480px;
height:144px;
background-color:green;
float:right;
}
.header-bottom{
width:100%;
height:347px;
background-image:url(images/2_03.png)
}
.main{
width:100%;
height:896px;
background-image:url(images/1_03.png);
}
.footer{
width: 100%;
height: 124px;
background-color: black;
}
</style>
</head>
<body>
<div class="header">
<div class="header-top">
<div class="header-top-inner">
<div class="logo">
</div>
<div class="nav"> </div>
</div>
</div>
<div class="header-bottom"></div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
三、logo制作的步骤：
1、结构: h1>a{logo对应的文字}
需要h1标签；
需要h1中包含一个a标签；
需要a标签当中有logo对应的文字。
2、样式：
(1)将logo图通过PS剪切下来
(2)将h1的大小设置成和logo图相同，然后将logo图作为h1的背景图
(3)将a标签的大小设置成和logo图相同，将a标签转化为块元素
(4)将a标签中的文字隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:491px;
background-color: blue;
}
.header-top{
width:100%;
height:144px;
background-color:black;
}
.header-top-inner{
width:994px;
height:144px;
background-color:red;
margin: 0 auto;
}
.logo{
width:451px;
height:144px;
background-color:blue;
float:left;
}
/*标签选择器：h1和a标签， 当h1标签和a标签只有一个时，或者同时设置样式时，可以用标签选择器*/
h1{
width:451px;
height:144px;
background-image:url(images/logo_02.png);
}
/*div是块元素 1、可以设置大小2、可以独立成行
a标签默认是行元素 1、不可以设置大小 2、不可以独立成行 3、大小由内容决定*/
a{
display：block; <--将行元素转化为块元素-->
width:451px;
height:144px;
text-indent:-2000px; <--首行缩进，正值向右缩进，负值向左缩进-->
}
.nav{
width:480px;
height:144px;
background-color:green;
float:right;
}
.header-bottom{
width:100%;
height:347px;
background-image:url(images/2_03.png)
}
.main{
width:100%;
height:896px;
background-image:url(images/1_03.png);
}
.footer{
width: 100%;
height: 124px;
background-color: black;
}
</style>
</head>
<body>
<div class="header">
<div class="header-top">
<div class="header-top-inner">
<div class="logo">
<h1>
<a href="#">EaglesTroop</a> <--因为当前的a链接是一个空链接，所以用#代替-->
</h1>
</div>
<div class="nav"> </div>
</div>
</div>
<div class="header-bottom"></div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
四、作业
还原页面，实现logo的制作
<!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: 143px;
background-color:black;
}
.header-top-inner{
width: 994px;
height: 143px;
margin: 0 auto;
}
.logo{
width: 452px;
height: 143px;
background-color:blue;
float:left;
}
h1{
width: 452px;
height: 143px;
background-image: url(images/c_02.png);
}
a{
display:block;
width: 452px;
height: 143px;
text-indent: -2000px;
}
.nav{
width: 480px;
height: 143px;
background-color: green;
float:right;
}
.header-bottom{
width: 100%;
height: 348px;
background-image: url(images/b_03.png);
}
.main{
width: 100%;
height: 896px;
background-image: url(images/a_03.png);
}
.footer{
width: 100%;
height: 124px;
background-color:black;
}
</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'></div>
</div>
</div>
<div class='header-bottom'></div>
</div>
<div class='main'></div>
<div class='footer'></div>
</body>
</html>
