右侧边导航栏html代码
时间: 2023-12-04 21:40:56 浏览: 147
以下是一个简单的右侧边导航栏的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>右侧边导航栏</title>
<style>
/* 右侧边导航栏样式 */
.sidenav {
height: 100%; /* 设置高度为100% */
width: 160px; /* 设置宽度为160px */
position: fixed; /* 设置为固定定位 */
z-index: 1; /* 设置z-index为1 */
top: 0; /* 设置顶部为0 */
right: 0; /* 设置右侧为0 */
background-color: #f1f1f1; /* 设置背景颜色 */
overflow-x: hidden; /* 设置x轴溢出隐藏 */
padding-top: 20px; /* 设置上内边距为20px */
}
/* 右侧边导航栏链接样式 */
.sidenav a {
padding: 6px 8px 6px 16px; /* 设置内边距 */
text-decoration: none; /* 设置无下划线 */
font-size: 20px; /* 设置字体大小 */
color: #818181; /* 设置字体颜色 */
display: block; /* 设置为块级元素 */
}
/* 右侧边导航栏链接悬停样式 */
.sidenav a:hover {
color: #f1f1f1; /* 设置字体颜色为白色 */
}
</style>
</head>
<body>
<!-- 右侧边导航栏 -->
<div class="sidenav">
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
</div>
</body>
</html>
```
阅读全文