基础 CSS 顶栏基础知识

CSS 是一种用于定义网页样式的语言。顶栏是浏览器页面中最上方的一栏，通常包括网站的名称、导航菜单、搜索框等内容。

HTML 结构

首先，我们需要在 HTML 文件中定义顶栏的结构。通常，顶栏使用 header 元素包裹。下面是一个简单的顶栏 HTML 结构示例：

<header>
  <div class="logo">Logo</div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <form action="#" method="get">
    <input type="text" name="query" placeholder="Search...">
    <button type="submit">Search</button>
  </form>
</header>

CSS 样式

现在，我们来给顶栏添加一些 CSS 样式，使其具有更好的外观和功能。

背景色和字体颜色

首先，我们定义顶栏的背景色和字体颜色，让它更加清晰易读。

header {
  background-color: #333;
  color: #fff;
}

宽度和对齐方式

然后，我们让顶栏占据整个浏览器窗口的宽度，并使其中的内容居中对齐。

header {
  width: 100%;
  text-align: center;
}

Logo 样式

接下来，我们对 Logo 元素进行样式设置。我们给它添加一些内边距和字体大小。

.logo {
  padding: 10px;
  font-size: 24px;
}

导航菜单样式

然后，我们设置导航菜单的样式。我们将每个菜单项设置为 inline-block 显示，并添加一些间距以及悬停效果。

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

nav li {
  display: inline-block;
  margin: 0 10px;
}

nav a {
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

nav a:hover {
  background-color: #555;
}

搜索框样式

最后，我们来设置搜索框的样式。我们将其设置为在顶栏的右侧显示，并在悬停时添加边框和背景颜色。

form {
  display: inline-block;
  margin-left: auto;
  padding: 10px;
}

input[type="text"] {
  padding: 5px;
  border: none;
}

button[type="submit"] {
  padding: 5px 10px;
  background-color: #555;
  color: #fff;
  border: none;
}

button[type="submit"]:hover {
  border: 1px solid #fff;
  background-color: #333;
}

总结

通过以上 CSS 样式设置，我们已经将顶栏变得更美观并具有更好的交互效果。当然，这只是一些基础的 CSS 样式设置，你可以根据你的需求进行更深入的定制。