<a>标签锚链接教程Html

印迹发布于:2020-4-12 764

什么是锚链接?

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

锚链接的两种效果:

在当前页面中跳转.:通过元素的ID进行跳转 <a href="#name"></a>

网页中的返回顶部效果:<a href="#"></a>

实现

案例描述:

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

实现方法

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;
}
位置锚

目标:

<a id="w1">w1</a>

定位:

<a href="w1">w1</a>



http://www.virplus.com/thread-1265.htm
转载请注明:2020-4-12 于 VirPlus 发表

推荐阅读
最新回复 (0)

    ( 登录 ) 后,可以发表评论!

    返回