css滑动或点击分类 |css li属性

.nav{
display: flex;
justify-content: center;
}
.nav li{
list-style: none;
margin-right: 20px;
}
.nav a{
text-decoration: none;
color: #333;
font-size: 16px;
padding: 10px;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
}
.nav a:hover, .nav a.active{
border-bottom: 3px solid #333;
}

上面的代码实现了一个简单的滑动分类效果，主要的实现方法是通过设置链接底部的边框，当鼠标悬浮或者点击链接时，通过修改边框颜色来完成分类的效果。

如果想要实现点击分类效果，大家还需要使用JavaScript进行监听和事件响应。

let navLinks = document.querySelectorAll('.nav a');
for (let i = 0; i< navLinks.length; i++) {
navLinks[i].addEventListener('click', function() {
for (let j = 0; j< navLinks.length; j++) {
navLinks[j].classList.remove('active');
}
this.classList.add('active');
});
}

上面的代码实现了一个简单的点击分类效果，主要的实现方法是通过给链接添加点击事件，当链接被点击时，先将所有链接的active样式移除，再给当前链接添加active样式，从而实现分类效果。

通过使用CSS和JavaScript，大家可以轻松地实现滑动或点击分类的效果，让网页更加优雅和实用。