以下是一个简单的CSS导航栏示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</body>
</html>
|
这个示例创建了一个简单的水平导航栏，包括四个链接（Home，News，Contact，About）。你可以根据需要修改颜色、大小、字体等样式。
导航栏=链接列表
如果你想要使用一个链接列表来创建导航栏，你可以使用无序列表 <ul> 和列表项 <li> 来实现。以下是一个使用链接列表创建导航栏的示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
这个示例创建了一个使用无序列表和列表项的导航栏，效果与之前的示例相同。这种方法更具有语义化，并且更易于维护和修改。
垂直导航栏
要创建一个垂直导航栏，你可以将链接放置在一个垂直方向的容器中。以下是一个简单的示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical CSS Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: block;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，.navbar 类被定义为一个包含垂直导航的容器，链接被放置在一个垂直方向的无序列表中。每个链接都是块级元素，显示为一个独立的列表项，并且在垂直方向上排列。你可以根据需要修改颜色、大小、字体等样式。
垂直导航条实例
以下是一个简单的垂直导航栏示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
width: 200px; /* 宽度可根据需要调整 */
}
.navbar ul {
list-style-type: none;
padding: 0;
}
.navbar li {
text-align: center;
}
.navbar a {
display: block;
color: #f2f2f2;
padding: 15px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.navbar {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，.navbar 类定义了一个垂直导航栏，使用了固定的宽度，并且链接垂直排列。响应式样式在屏幕宽度小于768px时使导航栏宽度自适应。你可以根据需要调整样式和宽度。
激活/当前导航条实例
要在导航栏中标识当前活动的导航项，你可以给当前活动的链接添加一个特殊的类，然后使用CSS样式来突出显示该链接。以下是一个示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Navigation Bar with Active Item</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
width: 200px; /* 宽度可根据需要调整 */
}
.navbar ul {
list-style-type: none;
padding: 0;
}
.navbar li {
text-align: center;
}
.navbar a {
display: block;
color: #f2f2f2;
padding: 15px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.navbar {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，我给Home链接添加了一个active类，表示它是当前活动的导航项。这个类与CSS中定义的.active样式一起，使得该链接在导航栏中突出显示。
创建链接并添加边框
如果你想要为导航栏中的链接添加边框，你可以使用CSS的border属性。以下是一个示例，演示了如何为链接添加边框：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Navigation Bar with Borders</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
width: 200px; /* 宽度可根据需要调整 */
}
.navbar ul {
list-style-type: none;
padding: 0;
}
.navbar li {
text-align: center;
}
.navbar a {
display: block;
color: #f2f2f2;
padding: 15px 20px;
text-decoration: none;
border-bottom: 1px solid #666; /* 添加底部边框 */
}
.navbar a:first-child {
border-top: 1px solid #666; /* 添加顶部边框 */
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.navbar {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，我给每个链接添加了一个底部边框，除了第一个链接外，还给第一个链接添加了一个顶部边框，以增强导航栏的外观。你可以根据需要调整边框的样式和颜色。
全屏高度的固定导航条
要创建一个全屏高度的固定导航条，你可以使用固定定位（fixed positioning）来使其保持在屏幕顶部，并设置高度为100vh（视口高度）。以下是一个示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
width: 100%;
position: fixed;
top: 0;
height: 60px; /* 导航栏高度 */
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
/* Add some padding to the page content to prevent it from being hidden by the navbar */
.content {
padding-top: 60px; /* 确保页面内容不会被导航栏遮挡 */
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.navbar a {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="content">
<!-- 在这里放置你的页面内容 -->
<p>这是页面内容，导航栏位于顶部。</p>
</div>
</body>
</html>
|
在这个示例中，导航栏被设置为固定定位（fixed），并且位于页面顶部。它的高度被设置为60像素，并且宽度为100％。页面的内容（.content）在顶部有一个与导航栏高度相等的顶部内边距，以确保内容不会被导航栏遮挡。
水平导航栏
如果你想要创建一个水平导航栏，以下是一个简单的示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.navbar {
overflow: hidden;
}
.navbar a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，.navbar 类定义了一个水平导航栏，链接被放置在一个水平方向的无序列表中，并且每个链接被放置在一个水平方向的列表项中。导航栏的背景颜色为黑色（#333），链接的默认颜色为白色（#f2f2f2），鼠标悬停时的颜色为深灰色（#555），当前激活链接的颜色为绿色（#04AA6D）。在响应式样式中，当屏幕宽度小于768px时，链接将变为垂直排列，以确保在小屏幕上的良好显示。
内联列表项
如果你想要创建一个水平导航栏，你可以使用内联列表项（inline list items）。以下是一个示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline; /* 将列表项显示为内联元素 */
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，列表项被设置为内联元素（inline），这使得它们在同一行上水平排列。导航栏的背景色为#333，链接之间有20像素的水平间距。你可以根据需要调整样式和链接的数量。
浮动列表项
如果你想要创建一个水平导航栏，并使用浮动来实现，可以按照以下示例操作：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floated Horizontal Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
overflow: hidden; /* 用于清除浮动 */
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left; /* 将列表项向左浮动 */
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，列表项被设置为浮动在左侧，导航栏的背景色为#333，链接之间有20像素的水平间距。overflow: hidden; 用于清除浮动。你可以根据需要调整样式和链接的数量。
水平导航条实例
以下是一个简单的水平导航栏示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline; /* 将列表项显示为内联元素 */
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
.navbar a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，导航栏使用了水平列表布局，链接之间以水平方式排列。每个链接具有一定的内边距和背景色。当鼠标悬停在链接上时，背景色会发生变化，活动链接（当前页面的链接）具有不同的背景色。
灰色水平导航条
以下是一个灰色的水平导航栏示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gray Horizontal Navigation Bar</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #555; /* 灰色背景 */
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline; /* 将列表项显示为内联元素 */
}
.navbar a {
display: block;
color: #fff; /* 白色文字 */
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #777; /* 深灰色背景 */
}
.navbar a.active {
background-color: #4CAF50; /* 绿色活动链接背景 */
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，导航栏的背景颜色为灰色（#555），链接文字为白色（#fff），悬停时背景颜色变为深灰色（#777），活动链接的背景颜色为绿色（#4CAF50）。你可以根据需要调整颜色值。
CSS 导航栏 – 菜鸟教程 – 学的不仅是技术，更是梦想！
扫一扫
3158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
