- CSS 教程
- CSS - 主页
- CSS - 简介
- CSS - 语法
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 边距
- CSS - 列表
- CSS - 填充
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS-Clearfix
- CSS-浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 焦点
- CSS - 缩放
- CSS - 翻译
- CSS - 高度
- CSS - 宽度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 导航栏
- CSS - 叠加
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS-根
- CSS - 盒子模型
- CSS - 计数器
- CSS - 剪辑
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS 高级
- CSS-弹性盒
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 媒体类型
- CSS - 分页媒体
- CSS-听觉媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - 重要
- CSS3 教程
- CSS3 - 教程
- CSS3 - 圆角
- CSS3 - 边框图像
- CSS3 - 多背景
- CSS3 - 颜色
- CSS3 - 渐变
- CSS3 - 阴影
- CSS3 - 文本
- CSS3 - 网页字体
- CSS3 - 二维变换
- CSS3 - 3D 变换
- CSS3 - 动画
- CSS3 - 多列
- CSS3 - 用户界面
- CSS3 - 盒子尺寸
- CSS 响应式
- CSS - 响应式网页设计
- CSS 资源
- CSS - 有用的资源
- CSS - 讨论
CSS - 导航栏
CSS 导航栏
导航栏是图形用户界面 (GUI) 的一部分,可帮助用户浏览网站、应用程序或其他软件。对于用户来说,快速、轻松地导航到他们正在寻找的内容至关重要。
导航栏可以是水平的或垂直的,其中包含重要页面或功能的链接。导航栏还可以包含其他元素,例如网站或应用程序的徽标、搜索栏或社交媒体图标。可以使用 CSS 设置导航栏的样式来更改其外观。
CSS 水平导航栏
以下示例显示了水平导航栏,这是网页顶部显示的最常见的导航栏类型,如下所示 -
<html> <head> <style> ul { background-color: #28bf17; overflow: hidden; list-style-type: none; margin: 0; padding: 0; } li { float: left; } li a { display: block; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; font-size: 17px; } li a:hover { background-color: #dd9ede; color: black; } .active-link { background-color: #f53319; color: white; } </style> </head> <body> <ul> <li><a href="#" class="active-link">Tutorialspoint</a></li> <li><a href="#">Home</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Courses</a></li> <li><a href="#">eBook</a></li> </ul> <h1>Welcome to TutorialsPoint</h1> <h3>Simple Easy Learning at your fingertips</h3> </body> </html>
CSS 垂直导航栏
垂直导航栏也称为侧边栏菜单。它通常位于屏幕的左侧或右侧。
这是一个例子 -
<html> <head> <style> ul { background-color: #28bf17; list-style-type: none; margin: 0; padding: 0; width: 200px; } li { text-align: center; } li a { display: block; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; font-size: 17px; } li a:hover { background-color: #dd9ede; color: black; } .active-link { background-color: #f53319; color: white; } </style> </head> <body> <ul> <li><a href="#" class="active-link">Tutorialspoint</a></li> <li><a href="#">Home</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Courses</a></li> <li><a href="#">eBook</a></li> </ul> </body> </html>
CSS 下拉导航栏
下拉导航栏是带有下拉菜单的导航栏,当用户将鼠标悬停在链接上时会出现下拉菜单。下拉菜单是一种在小空间中显示相关项目列表的方法。
这是一个例子 -
<html> <head> <style> .navbar { background-color: #28bf17; overflow: hidden; } .navbar a { display: block; float: left; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; font-size: 15px; } .navbar a:hover { background-color: #dd9ede; color: black; } .active-link { background-color: #f53319; color: white; } .dropdown { float: left; } .dropdown .dropbtn { border: none; color: #f2f2f2; padding: 10px; background-color: #28bf17; } .dropdown-content { display: none; position: absolute; background-color: #c7385a; min-width: 120px; } .dropdown-content a { float: none; color: #f2f2f2; padding: 10px; display: block; text-align: left; } .dropdown-content a:hover { background-color: #dd9ede; color: black; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <nav class="navbar"> <a href="#" class="active-link">Tutorialspoint</a> <a href="#">Home</a> <div class="dropdown"> <button class="dropbtn">Articles</button> <div class="dropdown-content"> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">Bootstrap</a> </div> </div> <a href="#">Courses</a> <a href="#">eBook</a> </nav> <h1>Welcome to TutorialsPoint</h1> <h3>Simple Easy Learning at your fingertips</h3> </body> </html>
CSS 固定导航栏
固定导航栏是当用户向下滚动页面时粘在屏幕顶部的导航栏。要使导航栏固定,您可以使用position:fixed属性。
这是一个例子 -
<html> <head> <style> body { margin: 0; } .navbar { position: fixed; top: 0; width: 100%; margin: 0; padding: 0px; overflow: hidden; background-color: #28bf17; } .navbar a { display: block; float: left; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #dd9ede; color: black; } .active-link { background-color: #f53319; color: white; } .heading { padding-top: 170px; text-align: center; background-color: #e6e451; padding-bottom: 300px } </style> </head> <body> <nav class="navbar"> <a href="#" class="active-link">Tutorialspoint</a> <a href="#">Home</a> <a href="#">Articles</a> <a href="#">Courses</a> <a href="#">eBook</a> </nav> <div class="heading"> <h1>Welcome to TutorialsPoint</h1> <h2>Tutorialspoint CSS Fixed Navbar</h2> <h3>Simple Easy Learning at your fingertips</h3> </div> </body> </html>
CSS 粘性导航栏
您可以使用position:sticky属性创建一个粘性导航栏,即使用户向下滚动页面,该导航栏也会保留在屏幕顶部。
这是一个例子 -
<html> <head> <style> body { margin: 0; } .navbar { position:sticky; top: 0; width: 100%; margin: 0; padding: 0px; overflow: hidden; background-color: #28bf17; } .navbar a { display: block; float: left; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #dd9ede; color: black; } .active-link { background-color: #f53319; color: white; } .heading { padding-top: 170px; text-align: center; background-color: #e6e451; padding-bottom: 300px } h2 { text-align: center; } </style> </head> <body> <h2>Scroll down to see the effect</h1> <nav class="navbar"> <a href="#" class="active-link">Tutorialspoint</a> <a href="#">Home</a> <a href="#">Articles</a> <a href="#">Courses</a> <a href="#">eBook</a> </nav> <div class="heading"> <h1>Welcome to TutorialsPoint</h1> <h2>Tutorialspoint CSS Sticky Navbar</h2> <h3>Simple Easy Learning at your fingertips</h3> </div> </body> </html>
导航栏的分隔线
您还可以使用border-right属性在导航栏中的链接之间添加分隔线,如下所示 -
<html> <head> <style> .navbar { background-color: #28bf17; overflow: hidden; } .navbar a { display: block; float: left; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; font-size: 17px; border-right: 2px solid #f013c8; } .navbar a:hover { background-color: #dd9ede; color: black; } .active-link { background-color: #f53319; color: white; } </style> </head> <body> <nav class="navbar"> <a href="#" class="active-link">Tutorialspoint</a> <a href="#">Home</a> <a href="#">Articles</a> <a href="#">Courses</a> <a href="#">eBook</a> </nav> <h1>Welcome to TutorialsPoint</h1> <h2>Tutorialspoint CSS Navbar with borders</h2> </body> </html>
固定垂直导航栏
以下示例演示了如何使用position:fixed属性创建固定的垂直导航栏,这确保导航栏保持在屏幕的左侧,即使用户向下滚动页面也是如此。
<html> <head> <style> ul { position: fixed; background-color: #28bf17; list-style-type: none; margin: 0; padding: 0; width: 200px; height: 100%; } li { text-align: center; border-bottom: 2px solid #f013c8; } li a { display: block; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; font-size: 17px; } li a:hover { background-color: #dd9ede; color: black; } .active-link { background-color: #f53319; color: white; } .heading { padding-top: 170px; text-align: center; background-color: #e6e451; padding-bottom: 300px } </style> </head> <body> <ul> <li><a href="#" class="active-link">Tutorialspoint</a></li> <li><a href="#">Home</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Courses</a></li> <li><a href="#">eBook</a></li> </ul> <div class="heading"> <h1>Welcome to TutorialsPoint</h1> <h2>Tutorialspoint CSS Fixed Vertical Navbar</h2> <h3>Simple Easy Learning at your fingertips</h3> </div> </body> </html>