使用CSS创建具有三种不同对齐方式的导航栏

在HTML中，导航栏是一组按钮和图像，它们排列成一行或一列，用作链接特定网页的控制站点。它被认为是网页设计中使用的基本工具之一。在不影响页面内容的情况下，HTML导航栏将结构与内容分离，并为网站布局增添创意。

我们使用HTML创建导航栏，CSS使其外观精美。可以使用JavaScript添加其他功能。在HTML中，导航栏可以通过多种方式实现，包括水平、垂直、固定、动态、侧边栏等。让我们深入了解这篇文章，学习如何使用CSS创建导航栏。

左对齐导航栏

在左对齐的导航栏中，图像位于导航栏的左侧，而整个链接列表位于右侧。

示例

让我们来看下面的例子，我们将创建一个左对齐的导航栏。

Open Compiler
<!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标签创建垂直导航栏的示例。

Open Compiler
<!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悬停。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

居中对齐导航栏

在居中对齐的导航栏中，所有链接页面都将显示在网页的中心。

示例

考虑下面的例子，我们将创建在网页上居中对齐的导航栏。

Open Compiler
<!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 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告