使用纯 CSS 设计垂直和水平菜单

菜单是任何网站的关键组成部分。它帮助访问者找到您的高质量资料，并引导他们到网站的关键部分。当然，CSS 是创建精美导航菜单的最佳语言。它具有极强的适应性，可用于任何类型的网站。它可以在网页或页眉的主要内容之前水平或垂直显示。

我们在本文中将要执行的任务是使用纯 CSS 设计垂直和水平菜单。这可以通过使用 <div> 和 <span> 标签来完成。

使用 <div> 标签

<div> 标签也称为分隔标签。在 HTML 中，<div> 标签用于创建内容部分，例如文本、图形、页眉、页脚和导航栏。<div> 标签有开始 (<div>) 和结束 (</div>) 标签，结束标签是必需的。此标签在 Web 开发中最有用，因为它允许我们将网页上的数据划分开来，并为不同类型的信息或功能创建特定部分。

语法

以下是 <div> 标签的语法。

<div>… </div>

使用 <span> 标签

HTML 元素 <span> 用作内容的一般内联容器，它本身不表示任何特定含义。它可以用来对具有相似属性值或需要一起设置样式的元素进行分组（使用 class 或 id 属性）。只有在没有其他合适的语义元素时才应该使用它。<div> 元素与 <span> 元素非常相似，但 <div> 是块级元素，而 <span> 是内联元素。

语法

以下是 <span> 标签的语法。

<span class="">Some Text</span>

现在，让我们看看以下使用 CSS 创建垂直和水平菜单的示例。

示例

在下面的示例中，我们将创建一个垂直菜单。

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3;">
   <div class="pure-menu">
      <span class="pure-menu-heading"> TUTORIALSPOINT </span>
      <ul class="pure-menu-list">
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/index.htm" class="pure-menu-link">Home</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/codingground.htm" class="pure-menu-link">CodingGround</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/online_dev_tools.htm" class="pure-menu-link">Tools</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/about/about_careers.htm" class="pure-menu-link">Contact Us</a>
         </li>
      </ul>
   </div>
</body>
</html>

运行上述代码后，它将生成一个包含垂直菜单的输出，该菜单是网页上显示的默认菜单，并应用了 CSS。

示例

以下是一个示例，我们将在此网页上创建水平菜单。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
   <style>
      .pure-menu-horizontal{
         width: 500px;
         height: 200px;
      }
   </style>
</head>
<body style="background-color:#E8DAEF;">
   <div class="pure-menu pure-menu-horizontal">
      <span class="pure-menu-heading">TUTORIALSPOINT</span>
      <ul class="pure-menu-list">
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/index.htm" class="pure-menu-link">Home</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/codingground.htm" class="pure-menu-link">Coding Ground</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/online_dev_tools.htm" class="pure-menu-link">Tools</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://tutorialspoint.com/online_dev_tools.htm" class="pure-menu-link">Contact Us </a>
         </li>
      </ul>
   </div>
</body>
</html>

执行上述代码后，它将生成一个包含应用了 CSS 的水平菜单的输出，该菜单将显示在网页上。

更新于：2023年10月9日

244 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告