html侧边栏导航源代码
时间: 2023-07-27 07:06:51 浏览: 73
以下是一个简单的HTML侧边栏导航的源代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单版商城侧边栏</title>
<style>
a {
display: block;
width: 200px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
padding-left: 30px;
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
</body>
</html>
```
这段代码使用了HTML和CSS来创建一个简单的侧边栏导航。每个导航项都是一个链接标签`<a>`,通过CSS样式设置了它们的外观和交互效果。当鼠标悬停在导航项上时,背景颜色会发生变化。你可以根据需要修改链接的文本和链接地址。
#### 引用[.reference_title]
- *1* *2* [HTML侧边导航栏](https://blog.csdn.net/qq_51447496/article/details/127399523)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [侧边栏导航开源代码_SourceTrail代码导航器现在免费开源](https://blog.csdn.net/cxu0262/article/details/107261225)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]