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-right** 样式来添加分割线
- 元素上添加border-bottom
本文转载自: https://blog.csdn.net/m0_62701594/article/details/140779339
版权归原作者 神秘的博主 所有， 如有侵权，请联系我们删除。
版权归原作者 神秘的博主 所有， 如有侵权，请联系我们删除。