HTML+CSS 实现顶部导航栏菜单制作

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-07-14 07:52:00

使用 HTML 和 CSS 创建导航栏

以下是使用 HTML 和 CSS 创建简单导航栏的步骤：

HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation Bar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    </main>
</body>
</html>

CSS

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header {
  background-color: #f0f0f0;
  padding: 20px;
}

nav {
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: #333;
}

解释：