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

最新推荐文章于 2024-09-16 14:56:14 发布

melody4923

最新推荐文章于 2024-09-16 14:56:14 发布

阅读量1.5w

点赞数 14

文章标签： html5

本文链接：https://blog.csdn.net/melody4923/article/details/118414992

版权

这段代码展示了如何使用HTML和CSS创建一个固定在页面左侧的侧边导航栏，包含多个链接，当鼠标悬停时，链接会改变颜色和背景。通过设置锚点，点击导航项能快速跳转到页面相应部分。该导航栏适用于网站或长页面，提供便捷的浏览体验。

摘要由CSDN通过智能技术生成

话不多说，上代码：

<!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使导航栏可以悬浮在网页左侧

实现效果：

melody4923

关注

14
点赞
踩
99

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫