网页制作之侧边导航栏（只用HTML实现）

article/2025/11/10 16:46:45

话不多说，上代码：

<!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>body{margin: 0;/* 外边距 0不用给单位 */}ul{list-style: none;/* 清除小黑圆点 */margin: 0;padding: 0;/* 内边距 */}.wrap{width: 60px;height: 225px;border: 0.5px solid;position: fixed;      }.head{font-weight: bold;width: 60px;height: 40px;background-color: white;line-height: 40px;/* 行高=高度 垂直居中 */font-size: 14px;color: #000000;/* 文字颜色 白色 */text-align: center;/* 文本对齐方式 居中 */}.list:hover{color: tomato;background-color: silver;}.list{box-sizing: border-box;/* content box css3盒模型 怪异盒 */width: 60px;padding: 3px;margin-top: 0.5px;/* 上边距 */margin-bottom: 0.5px;background-color: white;text-align: center;font-size: 12px;color: #9A9C9E;}</style>
</head>
<body><div class="wrap"><ul><li class="head">热门品牌</li><li class="list"><a href="#m1"style="text-decoration: none;">运动户外</a></li><li class="list"><a href="#m2"style="text-decoration: none;">美妆专区</a></li><li class="list"><a href="#m3"style="text-decoration: none;">个人家清</a></li><li class="list"><a href="#m4"style="text-decoration: none;">奢品馆</a></li><li class="list"><a href="#m5"style="text-decoration: none;">手表配饰</a></li><li class="list"><a href="#m6"style="text-decoration: none;">美食生鲜</a></li><li class="list"><a href="#m7"style="text-decoration: none;">服饰鞋靴</a></li><li class="list"><a href="#m8"style="text-decoration: none;">家居生活</a></li></ul></div><div><h2 id="m1">运动户外</h2>锚点<div style="height: 800px;"></div></div><div><h2 id="m2">美妆专区</h2>锚点<div style="height: 800px;"></div><div><h2 id="m3">个人家清</h2>锚点<div style="height: 800px;"></div></div><div><h2 id="m4">奢品馆</h2>锚点<div style="height: 800px;"></div></div><div><h2 id="m5">手表配饰</h2>锚点<div style="height: 800px;"></div></div><div><h2 id="m6">家居生活</h2>锚点<div style="height: 800px;"></div></div><div><h2 id="m7">服饰鞋靴</h2>锚点<div style="height: 800px;"></div></div><div><h2 id="m8">热门品牌</h2>锚点<div style="height: 800px;"></div></div></body>
</html>

通过设置锚点的方式，使得点击导航可以跳转到网页相应的部分

另外通过设置position为fixed使导航栏可以悬浮在网页左侧

实现效果：