通过本案例的学习，对于入门级的读者来说是个不错的学习体验，对于有基础的读者可以开拓思路。案例效果如下：
案例制作的思路是先将主页面制作好，然后以另存为的方法制作其他3个分页。其中，通过对类（.white）的静态传递，实现导航超链接背景色的改变。
首页index.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/b5.css"/>
</head>
<body>
<div class="nav">
<ul>
<li class="white"><a href="tab1.html">首页</a></li>
<li><a href="news.html">新闻</a></li>
<li><a href="sport.html">体育</a></li>
<li><a href="music.html">音乐</a></li>
</ul>
</div>
<div class="nav-cont">
<img src="images/pic1.jpg"/>
</div>
</body>
</html>
分页news.html的代码如下，其他分页类似。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/b5.css"/>
</head>
<body>
<div class="nav">
<ul>
<li><a href="tab1.html">首页</a></li>
<li class="white"><a href="news.html">新闻</a></li>
<li><a href="sport.html">体育</a></li>
<li><a href="music.html">音乐</a></li>
</ul>
</div>
<div class="nav-cont">
<img src="images/pic2.jpg"/>
</div>
</body>
</html>
外部样式文件b5.css的代码如下：
@charset "utf-8";
*{
margin:0px;
padding:0px;
}
body{
font-size:14px;
}
ul{
list-style-type:none;
}
.nav{
width:800px;
height:30px;
margin: 30pxauto 0px auto;
border-bottom:solid 1px #09f;
}
.nav ul li{
float:left;
width:70px;
margin: 0px 5px 0px 0px;
}
.nav ul li a{
display: block;
height:30px;
color:#333;
text-decoration: none;
border-top:solid 1px #09f;
border-left:solid 1px #09f;
border-right:solid 1px #09f;
text-align: center;
line-height:30px;
background:#8cd4fd;
}
.nav .white a{
background:#fff;
}
.nav-cont{
width:768px;
height:200px;
margin: 0px auto;
border-bottom:solid 1px #09f;
border-left:solid 1px #09f;
border-right:solid 1px #09f;
padding:10px 15px;
}
至此，案例制作完成。
本文暂时没有评论，来添加一个吧(●'◡'●)