导航栏点击可以跳转到对应链接，实现鼠标滑过每个模块变换颜色的效果有如下方法。
方法一：将<a>标签强制转换标签类型为块元素，然后设置：hover样式(鼠标滑过样式)
css样式：
<head>
<style>
/* 清除自带间距 */
*{
padding: 0;
margin: 0;
}
/* 清除列表自带列表符号 */
ul{
list-style: none;
}
li{
float: left;
background-color: black;
}
a{
padding: 0 20px;
height: 50px;
line-height: 50px;
/* 强制转换a标签为块元素 */
display: block;
color: white;
text-decoration: none;
}
a:hover{
background-color: pink;
}
</style>
</head>html内容：
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">云服务</a></li>
<li><a href="">双选会</a></li>
<li><a href="">共享</a></li>
<li><a href="">课堂</a></li>
<li><a href="">好程序员</a></li>
</ul>
</body>（跳转链接内容没有写，只是个小练习，简单实现效果）
实现效果：
方法二：给<li>标签设置：hover样式(鼠标滑过样式)
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
li{
float: left;
padding: 0 20px;
background-color: black;
height: 50px;
line-height: 50px;
padding: 0 20px;
height: 50px;
line-height: 50px;
}
a{
color: white;
text-decoration: none;
}
li:hover{
background-color: pink;
}
</style>（这个做法需要把
height: line-height: padding: 等属性加给<li>标签）
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">云服务</a></li>
<li><a href="">双选会</a></li>
<li><a href="">共享</a></li>
<li><a href="">课堂</a></li>
<li><a href="">好程序员</a></li>
</ul>
</body>实现效果：
两种做法都可以实现滑过变换颜色的效果，但是一般使用方法一更加好，更加方便于用户操作使用，因为方法二如图所示，鼠标放置在区域内后就会变色，但是只有点击在文字上的时候才可以实现点击跳转操作。而方法一鼠标进入区域后即可点击跳转，更加方便实用，用户体验感更好。
2410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
