基础 CSS 基本菜单

CSS 是前端开发中必不可少的一部分，它可以让我们更好的布局和美化网页界面。在这篇文章中，我们将会讲解如何使用 CSS 来制作一个基本的菜单。

HTML 代码

首先，我们需要用 HTML 来构建我们的菜单。以下是一个简单的 HTML 代码，其中使用了无序列表（<ul>）和列表项（<li>）来创建一个基本菜单。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

基本样式

接下来，我们可以为菜单添加一些基本的 CSS 样式。首先，我们需要去掉列表项的默认样式，并将其改为行内块元素。这样可以使我们的菜单水平排列，并让其更加美观。

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

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

添加链接样式

现在，我们需要为链接添加一些样式。我们将链接的默认颜色改为黑色，并添加一些内边距和外边距以改善链接的可读性。

nav a {
  display: block;
  color: #000;
  text-decoration: none;
  padding: 10px;
  margin: 5px;
}

添加鼠标悬停效果

最后，我们可以为鼠标悬停时的链接添加一些效果，以提高用户体验。我们将改变链接的背景颜色，并将其字体颜色改为白色。

nav a:hover {
  background-color: #000;
  color: #fff;
}

结论

现在，我们已经成功地创建了一个基本的菜单，并为其添加一些基本的样式和鼠标悬停效果。这只是 CSS 的一小部分，你可以根据自己的需求自由地调整样式，以满足你的网站需要。