<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>峰云家教网</title>
<style>
#index th:not(.sy){
padding: 15px;
width:80px;
/*除了“首页”不设置内边距和宽度*/
}
#index th:not(.fkxx,.sy){
border-right: 2px #C4C8ED solid;
/*除了“首页”和“反馈信息”不要右边框*/
}
.sy{
padding: 15px 30px;
background: linear-gradient(to top,#c4c8ed 40%,#99c);
/*扩大“首页”的内边距，设置“首页”的背景色*/
}
#index th a{
color:#fff;text-decoration: none;
/*设置链接的颜色，去掉下划线*/
}
#index th:hover{
background: pink;
}
#index tr th:not(.sy){
background:linear-gradient(to bottom,#66c 40%,#99c);
/*设置除了“首页”以外单元格的背景色*/
}
#body1{
height: 30px;
background-color: #99c;
line-height: 2em;
text-indent: 5px;
width: 900px;
margin-top: 10px;
}
.img li{
display: inline-block;
margin-right: 15px;
}
.img li span{
margin: 38px;/*文字与图片对齐*/
}
</style>
</head>
<body>
<nav>
<table id="index" cellspacing="0"><!--去掉单元格边距-->
<tr>
<th class="sy"><a href="#">首 页</a></th>
<th><a href="#">请家教</a></th>
<th><a href="#">做家教</a></th>
<th><a href="#">教员库</a></th>
<th><a href="#">学员库</a></th>
<th><a href="#">会员中心</a></th>
<th><a href="#">联系我们</a></th>
<th class="fkxx"><a href="#">反馈信息</a></th>
</tr>
</table>
</nav>
<div id="body1">推荐教员</div>
<div>
<ul class="img">
<li><img src="../images/images4/tutor.png" alt=""><br><span>陈教员</span></li>
<li><img src="../images/images4/tutor.png" alt=""><br><span>李教员</span></li>
<li><img src="../images/images4/tutor.png" alt=""><br><span>马教员</span></li>
<li><img src="../images/images4/tutor.png" alt=""><br><span>黄教员</span></li>
<li><img src="../images/images4/tutor.png" alt=""><br><span>田教员</span></li>
<li><img src="../images/images4/tutor.png" alt=""><br><span>石教员</span></li>
</ul>
</div>
</body>
</html>
这是效果图：
