HTML<a>标签作为锚链接

1. 什么是锚链接？

<a></a>标签主要作为超链接和锚链接使用。超链接主要指不同html页面之间的跳转，而锚链接指的是同一页面之间的跳转。

 

锚链接的两种效果：

1. 在当前页面中跳转.：通过元素的ID进行跳转 <a href="#name"></a>
2. 网页中的返回顶部效果：<a href="#"></a>

 

2. 小案例

2.1 案例描述

比如要实现点击下图中的 “×”隐藏这个区域的效果

点击前：

点击后：

 

2.2 实现方法

1.给 “×” 所在的<a>标签设置锚链接：

<!-- 顶部广告栏 给这个区域的 div 设置 id 属性，值为 close -->
<div class="top_banner" id="close">
　　　<a href="#">
　　　　　<img src="uploads/top_header.jpg" alt="">
　　　</a>
　　　<!-- 给 × 所在的 a 标签设置锚链接 -->
　　　<a href="#close">x</a>
</div>

　　

2.给 id 属性值为 close 的 div 设置被锚链接选中时（隐藏）的样式：

.top_banner:target {
    display: none;
}

　　

转载于:https://www.cnblogs.com/belongs-to-qinghua/p/10950873.html