html+css侧边导航栏

HTML和CSS侧边导航栏示例：

HTML代码：

<div class="sidenav">
  <a href="#">链接1</a>
  <a href="#">链接2</a>
  <a href="#">链接3</a>
  <a href="#">链接4</a>
</div>

CSS代码：

/* 设置侧边导航栏样式 */
.sidenav {
  height: 100%; /* 设置高度为100% */
  width: 200px; /* 设置宽度为200px */
  position: fixed; /* 设置固定定位 */
  z-index: 1; /* 设置z-index为1 */
  top: 0; /* 设置顶部为0 */
  left: 0; /* 设置左侧为0 */
  background-color: #f5f5f5; /* 设置背景色为灰色 */
  overflow-x: hidden; /* 设置x轴溢出隐藏 */
  padding-top: 20px; /* 设置上边距为20px */
}

/* 设置侧边导航栏链接样式 */
.sidenav a {
  padding: 6px 8px 6px 16px; /* 设置内边距 */
  text-decoration: none; /* 去除下划线 */
  font-size: 20px; /* 设置字体大小为20px */
  color: #000000; /* 设置字体颜色为黑色 */
  display: block; /* 设置为块级元素 */
}

/* 设置鼠标悬停链接样式 */
.sidenav a:hover {
  background-color: #555; /* 设置背景色为深灰色 */
  color: #ffffff; /* 设置字体颜色为白色 */
}

效果如下图所示：