css 左右点击导航条

如果你想给你的网页添加一个简单而漂亮的左右点击导航条，那么CSS就是你应该选择的方法。通过CSS，我们可以让左右点击导航条变得很容易实现，而不需要像JS那样使用复杂的脚本。下面我们就来看看如何使用CSS实现左右点击导航条。

/* 用CSS创建点击导航条 */

/* 设置导航条包裹元素的样式 */
.nav {
    display: flex; /* 让导航条中的元素排列成一排，自动换行 */
    overflow-x: auto; /* 如果导航条中的元素数量过多，让它们可以在水平方向上滚动 */
    scrollbar-width: none; /* 隐藏滚动条 */
    -ms-overflow-style: none; /* 隐藏滚动条（IE和Edge浏览器） */
}

/* 滚动条隐藏后的样式 */
.nav::-webkit-scrollbar {
    display: none; /* 隐藏滚动条（Chrome、Safari和Opera浏览器） */
}

/* 导航条中每个元素的样式 */
.nav-item {
    padding: 0 20px; /* 左右边距 */
}

/* 当导航条中的元素被激活时的样式 */
.nav-item.active {
    background-color: #333; /* 背景色 */
    color: #fff; /* 文字颜色 */
}

/* 导航条左右按钮的样式 */
.nav-button {
    padding: 12px; /* 内边距 */
    background-color: #333; /* 背景色 */
    color: #fff; /* 文字颜色 */
    cursor: pointer; /* 鼠标样式 */
}

.nav-button:hover {
    background-color: #555; /* 鼠标悬停时的背景色 */
}

/* 左右按钮图标的样式 */
.nav-icon {
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 字体粗细 */
}

css 左右点击导航条

现在CSS样式准备好了，下面我们将在HTML中应用它们。

如上所示，我们创建了一个包含左右按钮和导航条的

元素。然后我们根据预设样式定义了按钮和导航条中每个元素的样式，以及当被激活时的样式。最后我们将HTML和CSS整合在一起，并按照预设样式渲染了导航条。

上一篇：css3 水平循环滚动效果下一篇：html制作页面代码

css 左右点击导航条

相关推荐