css中怎样制作导航栏

发表于前端技术学习版块 css,教程

CSS中制作导航栏的方法很多，下面我们来介绍一种比较常用的做法。首先，我们需要一个HTML结构用来存储导航栏。我们可以使用无序列表（ul）以及列表项（li）来实现。 <ul class

CSS中制作导航栏的方法很多，下面我们来介绍一种比较常用的做法。首先，我们需要一个HTML结构用来存储导航栏。我们可以使用无序列表（ul）以及列表项（li）来实现。

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

接下来就是该CSS的出场了。我们需要给导航栏添加一些样式，比如背景颜色、字体颜色、字体大小等等。

.nav-menu {
  display: flex;
  background-color: #333;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-menu li {
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

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

以上代码会将导航栏变成一条横向的菜单，每个菜单项之间有一定间距，以及鼠标悬停在菜单项上时背景色会变化。最后附上效果图：

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。