导航区域的制作：
用无序列表来实现对应导航的制作，但凡在网页中发现并列结构的元素，基本上都是无序列表。
1、在<div class="nav"></div>中，打出ul>li，再按Tab键，就会出现下面的代码：
<div class="nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
2、在<li></li>中打出导航中的内容，如下面的代码：
<div class="nav">
<ul>
<li>About</li>
<li>Foundation</li>
<li>Program</li>
<li>Leaders</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</div>
在网页中显示的导航是下图的列表结构，每个列表前都有一个列表项：
但是，我们所还原的页面的导航样式如下图，并没有列表项，而且每个列表都是横向并排：
所以以下步骤解决上面的问题：
首先找到当前<nav></nav>下的<li></li>标签；
再清空列表符号：list-style:none;
然后让列表并排显示（块元素并排显示用浮动属性）：
float:left;
修改列表文字的字号和大小：font-size:12px;
最后修改同级元素之间的间距（用外边距margin来修改）：
margin-right:28px;
再让单行文本实现垂直居中显示：
height:148px; <--这一步是让容器的高度等于垂直居中区域的高度-->
line-height:148px; <--这一步是让行高等于容器高度-->
修改字体的颜色（只有一个文字颜色与其他文字的颜色不同）： color：#7f7f7f; <--这一步是修改所有文字的颜色-->
将特殊的文字的<li></li>中添加class属性:
<li class="ab">About</li>
找到特殊文字的class属性，将这个特殊的文字颜色进行单独的更改。
.nav.ab{
color:#cb2700;
}
下面是导航制作的代码：
<!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;
float:left;
}
h1{
width: 452px;
height: 143px;
background-image: url(images/c_02.png);
}
h1 a{
display:block;
width: 452px;
height: 143px;
text-indent: -2000px;
}
.nav{
width: 480px;
height: 143px;
float:right;
}
.nav li{
list-style: none;
float: left;
font-size: 12px;
margin-right: 29px;
height: 148px;
line-height: 148px;
color:#7f7f7f;
}
.nav .ab{
color:#cb2700;
}
.header-bottom{
width: 100%;
height: 348px;
background-image: url(images/b_03.png);
}
.header-bottom-inner{
width: 965px;
height: 282px;
margin: 0 auto;
padding-top: 65px;
padding-left: 29px;
position: relative;
}
.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'>
<ul>
<li class="ab">About</li>
<li>Foundation</li>
<li>Program</li>
<li>Leaders</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</div>
</div>
</div>
<div class="header-bottom">
<div class="header-bottom-inner">
</div>
</div>
</div>
<div class='main'></div>
<div class='footer'></div>
</body>
</html>
下图是以上导航还原的最终效果图：
