导航栏是网站的一个重要组件,下面是一个用CSS实现的导航栏代码:
代码中使用的CSS属性:
/*设置导航栏背景颜色、字体大小和清除默认样式*/
.nav {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
font-size: 18px;
}
/*将选项排列到一行*/
.nav li {
float: left;
}
/*设置选项链接字体、颜色、内边距和无下划线*/
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "Arial Black", Arial, sans-serif;
}
/*设置选中选项的背景颜色*/
.active {
background-color: #4CAF50;
}
通过这个代码可以实现一个简单的导航栏,在这个基础上可以根据实际需求进行修改。
本文可能转载于网络公开资源,如果侵犯您的权益,请联系我们删除。
0