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>
本页
上一页
下一页