css漂亮的侧导航栏 |css定议超链接

/* 创建侧导航栏的CSS样式 */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #f6f6f6;
overflow-x: hidden;
padding-top: 20px;
}
/* 侧导航栏的链接样式 */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #000;
display: block;
transition: 0.3s;
}
/* 鼠标悬停时链接的样式 */
.sidenav a:hover {
color: #f6f6f6;
background-color: #000;
}

使用上面的CSS代码，大家可以创建一个具有以下特点的漂亮的侧导航栏：

• 宽度为200像素，固定在屏幕左侧
• 使用#f6f6f6作为背景颜色
• 链接具有粗体字体、20像素的字号和黑色文本颜色
• 在鼠标悬停时，文字颜色变成白色，背景颜色变成黑色

如果你希望你的网站外观更加美观，从现在开始使用这样的漂亮的侧导航栏吧！