suchen

Heim >Web-Frontend >HTML-Tutorial >Wie erstelle ich eine vertikale Navigationsleiste mit HTML und CSS?

Wie erstelle ich eine vertikale Navigationsleiste mit HTML und CSS?

WBOY
WBOYnach vorne
2023-09-24 19:49:031642Durchsuche

Wie erstelle ich eine vertikale Navigationsleiste mit HTML und CSS?

导航栏是一种图形功能，允许用户浏览网站或应用程序。它通常以链接列表的形式呈现在屏幕的顶部或侧面，并帮助用户导航到网站内的各个区域或页面。 HTML 和 CSS 可用于构建水平或垂直导航栏。

HTML 用于指定导航栏的结构和内容，而 CSS 用于设计并使导航栏看起来有吸引力。您可以通过添加导航栏来改善整体用户体验，并使用户更轻松地在您的网站上找到他们想要的内容。

方法

使用 HTML 和 CSS 构建导航栏的方法有多种，其中一些方法如下 -

  • 使用无序列表 (UL)

  • 使用导航标签

现在让我们通过示例详细了解每种方法。

使用无序列表(UL)

使用 HTML 和 CSS 构建垂直导航栏的第一种方法是使用无序列表 (UL)。您可以使用无序列表 (UL) 和列表项 (LI) 并用 CSS 装饰它们，在 HTML 中制作导航栏。

示例

以下是在 HTML 和 CSS 中使用无序列表 (UL) 创建垂直导航栏的示例。 

<!DOCTYPE html>
<html>
<head>
   <style>
      .navbar {
         background-color: #333;
         width: 200px;
         height: 100%;
         float: left;
         list-style-type: none;
         margin: 0;
         padding: 0;
      }
      .navbar li {
         display: block;
      }
      .navbar a {
         display: block;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
      }
      .navbar a:hover {
         background-color: #111;
      }
   </style>
</head>
<body>
   <div class="navbar">
      <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>
   </div>
</body>
</html>

使用导航标签

使用 HTML 和 CSS 构建垂直导航栏的第二种方法是使用导航标签。 HTML5添加了

示例

以下是使用 HTML 和 CSS 中的导航标签创建垂直导航栏的示例。

<!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>

结论

使用 HTML 和 CSS 创建垂直导航栏是一个简单的过程，可以通过多种方式完成。最常见的方法是使用无序列表 (

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine vertikale Navigationsleiste mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css html ul li
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie kann ich die Fehleranzahl in meinem Skript reduzieren?Nächster Artikel：Wie kann ich die Fehleranzahl in meinem Skript reduzieren?

In Verbindung stehende Artikel

Mehr sehen