css 导航栏(css导航栏指示标)

在Web开发中，导航栏是一个常用的页面元素。为了让用户更好地了解当前所处的导航位置，在导航栏中添加一个指示标是非常必要的。本文将介绍如何使用CSS实现导航栏指示标。

首先，在HTML中定义好导航栏并设置好样式，这里我们假设导航项都是水平排列的，并且需要在选中项下方添加指示标。HTML代码如下：

首页
文章
关于
联系我们

其中，class为“active”的li标签代表当前选中项。

接下来，我们需要使用CSS来实现指示标。我们可以设置一个伪元素，利用border属性来画出一个三角形形状，代码如下：

.nav .active::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top-color: #333;
}

该代码表示，在选中的li标签下方添加一个伪元素，利用border属性画出一个三角形图形，该三角形的上边框颜色为#333，其余三边框设置为透明，最后通过position、bottom、left和transform属性来控制伪元素的位置。

最后，我们还需要设置一些样式美化导航栏，例如鼠标悬停时的背景色和字体颜色的变化等。代码如下：

.nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav li {
margin-right: 20px;
}
.nav a {
display: block;
padding: 10px 0;
color: #333;
text-decoration: none;
text-align: center;
}
.nav a:hover {
background-color: #eee;
}
.nav .active a {
color: #fff;
background-color: #333;
}
.nav .active::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top-color: #333;
}

通过以上的CSS代码，我们成功美化了导航栏，并在选中项下方添加了指示标。