话不多说，上代码：
<!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使导航栏可以悬浮在网页左侧
实现效果：
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
