Web中a标签的案例

实习中

于 2022-11-20 22:48:49 发布

阅读量501

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_61972561/article/details/127944989

版权

一、页面跳转

二、描点链接

1、目录：点击1跳到内容1

<body>
    <h1>目录</h1>
    <h2><a href="#1">1</a></h2>
    <h2><a href="#2">2</a></h2>
    <h2><a href="#3">3</a></h2>
    <h2><a href="#4">4</a></h2>
    <h2><a href="#5">5</a></h2>
    <h2><a href="#6">6</a></h2>
    <h2><a href="#7">7</a></h2>
    <h2><a href="#8">8</a></h2>
    <h2><a href="#9">9</a></h2>
    <h2><a href="#10">10</a></h2>
    <p id="1">内容1</p>
    <p id="2">内容2</p>
    <p id="3">内容3</p>
    <p id="4">内容4</p>
    <p id="5">内容5</p>
    <p id="6">内容6</p>
    <p id="7">内容7</p>
    <p id="8">内容8</p>
    <p id="9">内容9</p>
    <p id="10">内容10</p>
    
</body>

2、点击回到顶部

三、利用a标签点击出现图片（a标签与伪类target）

当a标签被点击时img通过target激活样式

<style>
        .containers {
            width: 889px;
            height: 500px;
            margin: auto;
        }
        .nav-content {
            width: 100px;
            height: auto;
            margin: auto;
        }
        .nav-content>a {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color: gray;
        }
        .first-img{
            width: 889px;
            height: 500px;
            background-image: url('./../imgs/t1.webp');
        }
        img {
            display: none;
        }
        img:target {
            display: block;
            margin: auto;
        }
    </style>

<!-- 点击形式 -->
    <div class="containers">
        <!-- 使用描点链接 -->
        <div class="nav-content">
            <a href="#t1"></a>
            <a href="#t2"></a>
            <a href="#t3"></a>
            <a href="#t4"></a>
        </div>
        <div class="img-content">
            <img id="t1" src="./../imgs/t1.webp" alt="">
            <img id="t2" src="./../imgs/t2.webp" alt="">
            <img id="t3" src="./../imgs/t3.webp" alt="">
            <img id="t4" src="./../imgs/t4.webp" alt="">
        </div>
    </div>