首页用html写一个抖音网页版的左侧导航栏（首页、推荐、关注、朋友、我的、直播、反映厅、知识、游戏、二次元、音乐、美食）

用html写一个抖音网页版的左侧导航栏（首页、推荐、关注、朋友、我的、直播、反映厅、知识、游戏、二次元、音乐、美食）

时间: 2024-06-22 17:03:32 浏览: 177

要创建一个HTML页面的抖音风格左侧导航栏，你可以使用HTML结构和CSS样式来实现。以下是一个基础的示例代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抖音网页版左侧导航栏</title> <style> .navbar { position: fixed; top: 0; left: 0; width: 200px; /* 可根据需要调整宽度 */ height: 100vh; /* 视口高度 */ background-color: #2c2c2c; /* 深灰色背景 */ padding: 16px; list-style-type: none; display: flex; justify-content: space-between; } .nav-link { color: #fff; text-decoration: none; font-size: 18px; margin-bottom: 16px; } .nav-link:hover { text-decoration: underline; } </style> </head> <body> <div class="navbar"> <ul> <li><a href="#" class="nav-link">首页</a></li> <li><a href="#" class="nav-link">推荐</a></li> <li><a href="#" class="nav-link">关注</a></li> <li><a href="#" class="nav-link">朋友</a></li> <li><a href="#" class="nav-link">我的</a></li> <li><a href="#" class="nav-link">直播</a></li> <li><a href="#" class="nav-link">反映厅</a></li> <li><a href="#" class="nav-link">知识</a></li> <li><a href="#" class="nav-link">游戏</a></li> <li><a href="#" class="nav-link">二次元</a></li> <li><a href="#" class="nav-link">音乐</a></li> <li><a href="#" class="nav-link">美食</a></li> </ul>  </div> </body> </html> ```

阅读全文