css导航栏滑过改变背景

CSS导航栏是网站中必不可少的组成部分，而导航栏的样式设计也是非常重要的。本文将介绍如何使用CSS实现导航栏滑过改变背景的效果。

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #fff;
  Box-shadow: 0 0 10px rgba(0,0.2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin: 0 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nav li:hover {
  background-color: #f5f5f5;
}

首先，我们需要一个列表结构作为导航栏。在CSS中，我们使用flex布局来使每一个li元素居中于导航栏中。我们还设置了导航栏的高度、背景色、阴影、无序列表样式、以及外边距和内边距，使其看起来更加美观。

接下来，我们对li元素进行样式设置。我们给每一个li元素设置了外边距和字体大小、以及鼠标指针样式为手型，以便用户感知该元素可以点击。我们使用transition过渡效果，使得li元素背景色的变化更加流畅。最后，我们使用:hover伪类选择器，当用户将鼠标指向li元素时，该元素的背景色会变成浅灰色。

使用以上代码，我们可以非常简单地实现一个滑过改变背景的导航栏效果。在实际应用中，我们可以结合自己的页面风格来进行样式调整，以达到最佳的视觉效果。