水平导航条实例分享
导读：水平导航条实例 创建一个水平导航条，在鼠标移动到选项后修改背景颜色。 实例 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden...
水平导航条实例
创建一个水平导航条，在鼠标移动到选项后修改背景颜色。
实例
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #111;
}
激活/当前导航条实例
在点击了选项后，我们可以添加"active"类来标准哪个选项被选中：
实例
.active{
background-color:#4CAF50;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 水平导航条实例分享
本文地址： https://pptw.com/jishu/664029.html