CSS 导航栏
导航栏有垂直和水平的
导航栏=链接列表
作为标准的 HTML 基础一个导航栏是必须的。
在我们的例子中我们将建立一个标准的 HTML 列表导航栏。
导航条基本上是一个链接列表，所以使用
- 和
- 元素非常有意义
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
垂直导航条实例
list-style-type: none; /*移除列表项前面的默认标记 */
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{list-style-type: none; /*移除列表项前面的默认标记 */margin: 0;padding: 0;width:200px;background-color: #584141;}li a{display:block;color: #eee7e7;padding: 8px 16px;text-decoration: none;}li a:hover{background-color: #555;color: white;}</style></head><body><ul><li><a href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
运行结果：
激活/当前导航条实例
在点击了选项后，我们可以添加 "active" 类来标注哪个选项被选中
用法：
li a.active {background-color: #4CAF50;color: white;}
给想要选中的导航条，增加class="active"
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{list-style-type: none; /*移除列表项前面的默认标记 */margin: 0;padding: 0;width:200px;background-color: #584141;}li a{display:block;color: #eee7e7;padding: 8px 16px;text-decoration: none;}li a.active{background-color: #4CAF50;color: white;}li a:hover{background-color: #555;color: white;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
运行结果：
创建链接并添加边框
可以在
- or 上添加text-align:center 样式来让链接居中。
可以在 border
- 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个
- 元素上添加border-bottom
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style-type: none;/*移除列表项前面的默认标记 */margin: 0;padding: 0;width: 200px;background-color: #584141;}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;}li{text-align: center;border-bottom: 1px solid #ddd;}li:last-child {border-bottom: none;/* 选择列表中最后一个<li>元素，并移除其底部的边框 */}li a.active {background-color: #4CAF50;color: white;}li a:hover:not(.active) {background-color: #555;color: white;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
运行结果：
全屏高度的固定导航条
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin:0;}ul{list-style-type: none;margin:0;padding:0;width:25%;background-color:#f1f1f1;position:fixed;height:100%;overflow:auto;}li a {display:block;color:#000;padding:8px 16px;text-decoration: none;}li a.active {background-color: #4CAF50;color: white;}li a :hover:not(.active) {background-color: #555;color:white;}.style{margin-left:25%;padding:1px 16px;height:1000px;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul><div class="style"><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p></div></body></html>
运行结果：
该实例可以在移动设备上使用
水平导航栏
有两种方法创建横向导航栏。使用**内联(inline)或浮动(float)**的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
内联列表项
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style-type: none;margin: 0;padding: 0;}li {display: inline;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
运行结果：
display:inline; - 默认情况下，**
- ** 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行
浮动列表项
在上面的例子（inline）中链接有不同的宽度。
对于所有的链接宽度相等，浮动
- 元素，并指定为 元素的宽度
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;}li {float: left;}a {display: block;width: 60px;background-color: #dddddd;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
运行结果：
float:left - 使用浮动块元素的幻灯片彼此相邻
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
水平导航条实例
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>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;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
运行性结果：
激活/当前导航条实例
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>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 {background-color: #4CAF50;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body></html>
运行结果：
链接右对齐
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>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 {background-color: #4CAF50;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li style="float:right"><a href="#">关于</a></li></ul></body></html>
运行结果：
添加分割线
- 通过 **border-right** 样式来添加分割线
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li {float: left;border-right:1px solid #bbb;}li:last-child {border-right: none;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover {background-color: #111;}.active {background-color: #4CAF50;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li ><a href="#">关于</a></li></ul></body></html>
运行结果：
固定导航条
可以设置页面的导航条固定在头部或者底部
固定在头部：
ul {position: fixed;top: 0;width: 100%;}
固定在底部：
ul {position: fixed;bottom: 0;width: 100%;}
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: fixed;bottom: 0;width: 100%;}li {float: left;border-right:1px solid #bbb;}li:last-child {border-right: none;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover {background-color: #111;}.active {background-color: #4CAF50;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li ><a href="#">关于</a></li></ul></body></html>
运行 结果：
在顶部同理
该实例可以在移动设备上使用
灰色水平导航条
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;border:1px solid #e7e7e7;background-color: #f3f3f3;}li {float: left;}li a {display: block;color: #666;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover:not(.active) {background-color: #ddd;}.active {color: white;background-color: #4CAF50;}</style></head><body><ul><li><a class="active" href="#">主页</a></li><li><a href="#">介绍</a></li><li><a href="#">联系</a></li><li ><a href="#">关于</a></li></ul></body></html>
运行结果：
- 元素上添加border-bottom
本文转载自: https://blog.csdn.net/m0_62701594/article/details/140779339
版权归原作者 神秘的博主 所有， 如有侵权，请联系我们删除。
版权归原作者 神秘的博主 所有， 如有侵权，请联系我们删除。