[分享]css与js做一个导航

导航是网页设计中非常重要的一部分，它让用户能够轻松地在网站中浏览不同的页面。现在，我们来学习如何使用CSS和JavaScript来创建一个简单的导航。CSS是层叠样式表的缩写，它用来控制网页的样式。我...

导航是网页设计中非常重要的一部分，它让用户能够轻松地在网站中浏览不同的页面。现在，我们来学习如何使用CSS和JavaScript来创建一个简单的导航。

CSS是层叠样式表的缩写，它用来控制网页的样式。我们可以使用CSS来设置导航的样式、字体、颜色和排版。下面是一段基本的CSS代码，它可以为导航设置样式：

nav {
  background-color: #333;
  color: white;
  padding: 10px;
}

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

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

nav a {
  color: white;
  text-decoration: none;
} 

在上面的代码中，我们首先选择了一个nav元素，并为它设置了背景颜色、文字颜色和内边距。接下来，我们为导航的ul、li和a元素设置了样式，让它们呈现出漂亮的样式。

JavaScript是一种脚本语言，它在网页中用于实现动态效果和交互功能。我们可以使用JavaScript来为导航添加交互功能。下面是一段基本的JavaScript代码，它可以为导航添加鼠标悬停效果：

var navItems = document.querySelectorAll('nav li');

for (var i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener('mouseover', function() {
    this.style.backgroundColor = '#555';
  });

  navItems[i].addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
  });
} 

在上面的代码中，我们首先选择了所有的nav li元素，并使用for循环为每一个元素添加了鼠标悬停效果。当鼠标悬停在元素上时，它的背景颜色将变为灰色；鼠标移开时，背景颜色将恢复到原来的颜色。

通过上面的代码，我们就可以轻松地创建一个简单的导航，并为它添加样式和交互效果。当然，这只是一个入门教程，我们还可以使用更加高级的CSS和JavaScript技术来为导航增加更多的功能和效果。