[分享]css两个导航栏

CSS是一种用于网站排版美化的语言，它可以给页面添加样式来增强用户体验。在网站设计中，导航栏是页面的重要组成部分，可以让用户快速浏览网站内容。在这篇文章中，我们将通过CSS来创建两种风格的导航栏。.n...

CSS是一种用于网站排版美化的语言，它可以给页面添加样式来增强用户体验。在网站设计中，导航栏是页面的重要组成部分，可以让用户快速浏览网站内容。在这篇文章中，我们将通过CSS来创建两种风格的导航栏。

.navbar {
  background-color: #333; /*导航栏背景色*/
  color: #fff; /*字体颜色*/
  display: flex; /*使用flexbox布局*/
  justify-content: space-between; /*项目平均分布*/
  align-items: center; /*项目垂直居中*/
  height: 50px; /*导航栏高度*/
  padding: 0 20px; /*左右边距*/
}

.nav-link {
  text-decoration: none; /*去掉下划线*/
  color: #fff; /*字体颜色*/
  margin-left: 20px; /*链接之间的距离*/
}

.nav-link:hover {
  color: #f00; /*鼠标悬停时的字体颜色*/
} 

第一种导航栏是简单的黑色导航栏，代码如下：

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav> 

其中，<nav> 元素表示导航栏，<a> 元素表示链接。

第二种导航栏是有下划线和箭头的导航栏，代码如下：

<nav class="navbar">
  <a href="#" class="nav-link">Home</a>
  <a href="#" class="nav-link">About</a>
  <a href="#" class="nav-link">Services</a>
  <a href="#" class="nav-link">Contact</a>
  <span class="arrow" aria-hidden="true">▼</span>
</nav> 

其中，<span> 元素表示箭头，在 CSS 中设置其样式。

总之，CSS 为我们提供了丰富的样式和排版功能，可以让我们创建出各种各样的导航栏来优化用户体验。