- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-25 10:57:04
CSS 导航栏
拥有易用的导航条对于任何网站都很重要
通过 CSS，可以把乏味的 HTML 菜单转换为漂亮的导航栏
导航栏 = 链接列表
导航栏需要标准的 HTML 作为基础。
在我们的案例中，将用标准的 HTML 列表来构建导航栏。
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的
<ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">路径</a></li> <li><a href="#">资源</a></li> </ul>
点击 "运行实例" 按钮查看在线实例
效果图：
去掉小圆点以及内外边距
效果图：
例子解析：
list-style：none：移除列表前小标志，一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0
上面的例子中的代码是垂直和水平导航栏使用的标准代码
垂直导航栏：
ul{
width:100px;
list-style: none;
margin: 0;
padding: 0;
background: #f1f1f1;
}
li a{
display: block;
padding: 8px 16px;
text-decoration: none;
color:#000;
}
/*鼠标移上去改变背景颜色*/
li :hover{
background-color:#ccc;
color: white;
}点击 "运行实例" 按钮查看在线实例
效果图：
水平导航栏
ul{
list-style: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
overflow: hidden;/*清除浮动，子元素设置浮动不能将父元素撑开*/
}
li{
float: left;
}
li a{
display: block;
color:#444;
text-decoration: none;
padding:8px 16px;
}
li :hover{
background-color:#ccc;
color: white;
}点击 "运行实例" 按钮查看在线实例
效果图：
推荐手册