css3 顶栏 |在css里面设置点击事件

CSS3是一种用于样式表的语言，它是在CSS2的基础上发展而来的。在CSS3中，新增了很多新的特性，其中之一便是顶栏。顶栏也被称为导航栏，它是网页中非常重要的一部分。它能够方便用户快速地浏览网站的不同部分，并且可以让网站有更好的视觉体验，从而提高用户留存率。而CSS3的顶栏则是可以让开发者定制化更强的一种导航栏。在CSS3中，使用伪元素和CSS属性，可以轻松地实现一个简单的顶栏。以下是一个示例代码：

nav {
background-color: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 16px;
display: block;
}
nav ul li a:hover {
background-color: #ddd;
color: #333;
}
nav:before,
nav:after {
content: "";
display: table;
}
nav:after {
clear: both;
}

在上面的代码中，大家首先定义了一个<nav>标签，并设置其属性包括背景颜色、定位方式和z-index，以及其内部的<ul>和<li>元素样式。最后使用伪元素:before和:after清除浮动。这样，一个简单的顶栏就完成了。用户可以根据自己的需要，对这份代码进行修改和定制化，从而获得更符合其网站风格的导航栏。