用html+css写一个抖音网页版侧边导航栏

以下是一个简单的抖音网页版侧边导航栏的HTML和CSS代码示例：

HTML代码：

<div class="sidebar">
  <a href="#" class="active">首页</a>
  <a href="#">关注</a>
  <a href="#">发现</a>
  <a href="#">附近</a>
  <a href="#">消息</a>
  <a href="#">我</a>
</div>

CSS代码：

.sidebar {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  width: 80px;
  background-color: #fff;
  border-right: 1px solid #ddd;
}

.sidebar a {
  display: block;
  padding: 12px 16px;
  color: #999;
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  transition: background-color 0.3s;
}

.sidebar a:hover {
  background-color: #f5f5f5;
}

.sidebar a.active {
  background-color: #ee1c23;
  color: #fff;
}

这段代码创建了一个固定在页面左侧的侧边导航栏，包含了抖音的几个主要页面链接。当鼠标悬停在链接上时，链接的背景色会变为灰色；当链接是当前页面时，链接的背景色为红色，文字为白色。你可以根据自己的需要进行修改和调整。