基础 CSS 菜单文本

CSS 是前端开发中必不可少的一项技能，其中菜单是常见的网站导航方式。本文将介绍如何通过基础的 CSS 样式创建菜单文本，并提供示例代码帮助您加深理解。

CSS 样式

首先，我们需要定义一个基础的 CSS 样式。

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.menu li {
  list-style: none;
  margin-right: 20px;
}

.menu li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

.menu li a:hover {
  color: #f00;
}

以上 CSS 样式中，我们使用了 flex 布局来居中菜单栏，为菜单项设置了一些基础样式，包括去除列表样式、设置字体样式等。

HTML 代码

接下来，我们需要在 HTML 中添加菜单栏。

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

以上 HTML 代码中，我们创建一个 div 容器，其中包含一个无序列表，每个列表项中包含一个链接。

示例效果

最后，我们来看一下示例效果。

通过上述 CSS 样式和 HTML 代码，我们成功地创建了一个基础的 CSS 菜单文本，它简单、易于实现，能够让用户快速地浏览网站信息。