[分享]css做一个简单导航栏

CSS（层叠样式表）是一种用于修饰网页外观的语言，它可以让我们对HTML元素进行样式定义。下面我们使用CSS来做一个简单的导航栏。 首页 新闻 产品 联系我们 .nav { backgroundco...

CSS（层叠样式表）是一种用于修饰网页外观的语言，它可以让我们对HTML元素进行样式定义。下面我们使用CSS来做一个简单的导航栏。

<div class="nav">
  <a href="#">首页</a>
  <a href="#">新闻</a>
  <a href="#">产品</a>
  <a href="#">联系我们</a>
</div>

<style>
  .nav {
    background-color: #333; /* 背景颜色 */
    height: 50px; /* 高度 */
    display: flex; /* 设置为弹性布局 */
    justify-content: center; /* 居中对齐 */
  }
  
  .nav a {
    color: white; /* 字体颜色 */
    font-size: 20px; /* 字体大小 */
    text-align: center; /* 文字居中 */
    line-height: 50px; /* 行高 */
    padding: 0 20px; /* 左右内边距 */
    text-decoration: none; /* 取消下划线 */
  }
  
  .nav a:hover {
    background-color: #666; /* 鼠标悬停时背景颜色 */
  }
</style> 

代码中，我们使用了一个div元素来包含导航栏的内容。我们给它设置了一个类名为“nav”，这样在CSS样式表中就可以通过.nav来选择导航栏的样式了。

在CSS样式表中，我们对.nav设置了背景颜色、高度、对齐方式等样式。我们将内部的链接元素a设置了字体颜色、大小、居中对齐、内边距等样式。并且当鼠标悬停时，我们给a添加了另一种背景颜色。

这样就完成了一个简单的导航栏。当我们要修改样式时，只需在CSS中修改即可，不必修改每个a元素的样式。CSS可以让我们轻松地对整个网站的样式进行管理。