使用锚点链接做出页面切换效果

最新推荐文章于 2023-09-11 13:25:39 发布

捞起月亮的渔民~

最新推荐文章于 2023-09-11 13:25:39 发布

阅读量925

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_52622178/article/details/115743668

版权

锚点链接

1.锚点链接的使用

1.使用a标签应用 herf 属性，href 属性="#id名"

2.只要点击了超链接的对象就会跳到指定位置

2.利用锚点链接在同一个页面中的切换效果：
代码如下：

    <style>
        /* 清楚默认空隙 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 清楚<a>标签的默认下划线样式 */
        a{
            text-decoration: none;
        }
        .big_box{
            width: 300px;
            height: 300px;
            /* 让盒子居中 */
            margin: 0 auto;
        }
        ul{
            /* 清除li前面的小圆点 */
            list-style: none;
            float: left;
            width: 100px;
            height: 300px;
            background-color: pink;
        }
        ul li{
            margin-top: 50px;
            text-align: center;
        }
        .small_box{
            width: 200px;
            height: 300px;
            /* 将大盒子溢出的部分隐藏 */
            overflow: hidden;
            float: left;
        }
        .small_box #one{
            width: 200px;
            height: 300px;
            background-color: rgb(197, 51, 75);
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中 */
            line-height: 300px;
        }
        .small_box #two{
            width: 200px;
            height: 300px;
            background-color: rgb(44, 173, 224);
            text-align: center;
            line-height: 300px;
        }
        .small_box #three{
            width: 200px;
            height: 300px;
            background-color: rgb(127, 51, 197);
            text-align: center;
            line-height: 300px;
        }
    </style>
<body>
    <div class="big_box">
    <ul>
        <li><a href="#one">小猫</a></li>
        <li><a href="#two">小狗</a></li>
        <li><a href="#three">小鸡</a></li>
    </ul>
        <div class="small_box">
            <div id="one">喵喵喵喵喵</div>
            <div id="two">汪汪汪汪汪</div>
            <div id="three">咕咕咕咕咕</div>
        </div> 
    </div>
</body>

运行结果如下：

点击左侧小猫，会弹出第一个盒子。
在这里插入图片描述
点击左侧小狗，会弹出第二个盒子。

点击左侧小鸡，会弹出第三个盒子。

捞起月亮的渔民~

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
使用锚点链接做出页面切换效果

锚点链接1.锚点链接的使用1.使用a标签应用 herf 属性，href 属性="#id名"2.只要点击了超链接的对象就会跳到指定位置2.利用锚点链接在同一个页面中的切换效果：代码如下： <style> /* 清楚默认空隙 */ *{ margin: 0; padding: 0; } /* 清楚<a>标签的默认下划线样式 */ a{
复制链接

扫一扫