数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学使用CSS创建具有三种不同对齐方式的导航栏
在HTML中，导航栏是一组按钮和图像，它们排列成一行或一列，用作链接特定网页的控制站点。它被认为是网页设计中使用的基本工具之一。在不影响页面内容的情况下，HTML导航栏将结构与内容分离，并为网站布局增添创意。
我们使用HTML创建导航栏，CSS使其外观精美。可以使用JavaScript添加其他功能。在HTML中，导航栏可以通过多种方式实现，包括水平、垂直、固定、动态、侧边栏等。让我们深入了解这篇文章，学习如何使用CSS创建导航栏。
左对齐导航栏
在左对齐的导航栏中，图像位于导航栏的左侧，而整个链接列表位于右侧。
示例
让我们来看下面的例子，我们将创建一个左对齐的导航栏。
<!DOCTYPE html>
<html>
<head>
<style>
* {
background-color: #D5F5E3;
}
header img {
height: 60px;
cursor: pointer;
}
li,
a,
button {
font-family: verdana;
font-weight: 200;
font-size: 13px;
color: #DE3163;
text-decoration: none;
}
header {
display: flex;
align-items: center;
padding: 15px 12%;
}
.navigate_links li {
display: inline-block;
padding: 6px 15px;
}
.navigate_links li a:hover {
color: #1C2833;
border: 1px solid #6C3483;
box-shadow: 3px 3px 3px red, 3px 3px 3px #AED6F1;
border-radius: 8px;
margin: 10px;
padding: 12px;
}
button {
margin-left: 15px;
padding: 10px 10px;
border-radius: 16px;
background-color: #F4F6F7;
color: #1C2833;
border: none;
cursor: pointer;
}
button:hover {
background-color: #ABEBC6;
color: black;
}
</style>
</head>
<body>
<header>
<img src="https://tutorialspoint.com/cg/images/logo.png" alt="LOGO">
<nav>
<ul class="navigate_links">
<li>
<a href="#">Primepacks</a>
</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">Ebook</a>
</li>
<li>
<a href="#">Library</a>
</li>
</ul>
</nav>
<a href="#">
<button>Login</button>
</a>
</header>
</body>
</html>
运行上面的代码后，它将生成一个输出，在网页上显示左对齐的导航栏，其中图像位于左侧，所有链接页面位于右侧。
垂直对齐导航栏
HTML和CSS中的垂直导航栏是使用Nav标签构建的。HTML5添加了<nav>标签，它专门用于导航。您可以使用<nav>标签创建导航栏，并使用CSS对其进行样式设置。
示例
这是一个使用HTML和CSS中的Nav标签创建垂直导航栏的示例。
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 200px;
height: 100%;
background-color: #333;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</body>
</html>
运行上面的代码后，输出窗口将弹出，在网页上显示垂直对齐的导航栏。当用户尝试将光标移到链接上时，它将使用CSS悬停。
居中对齐导航栏
在居中对齐的导航栏中，所有链接页面都将显示在网页的中心。
示例
考虑下面的例子，我们将创建在网页上居中对齐的导航栏。
<!DOCTYPE html>
<html>
<head>
<style>
#nav {
position: absolute;
left: 0px;
height: 35px;
background-color: #ABEBC6;
width: 100%;
}
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
padding: 9px 12px;
display: block;
color: #DE3163;
text-align: center;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">PrimePacks</a>
</li>
<li>
<a href="#">Help</a>
</li>
</ul>
</div>
</body>
</html>
运行上面的代码后，它将生成一个输出，其中包含显示在网页上的居中对齐的导航栏，所有链接的网页都显示在中心。
更新于：2024年1月22日
268 次浏览
广告