一、页面跳转
二、描点链接
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>