a标签 锚点实现超链接

什么是锚点:

就是当页面内元素过长时,能快速定位到指定元素位置
需要目标元素的name或id属性和a标签的href相对应即可;

注:href="#目标元素的name或id名"

1、实现效果:

锚点

这里是顶站的锚

第1任

第2任

第3任

第4任

第5任

第6任

美国历任总统

● 第1任(1789-1797)

姓名:乔治·华盛顿

George Washington

生卒:1732-1799

政党:联邦

● 第2任(1797-1801)

姓名:约翰·亚当斯

John Adams

生卒:1735-1826

政党:联邦

● 第3任(1801-1809)

姓名:托马斯·杰斐逊

Thomas Jefferson

生卒:1743-1826

政党:民共

● 第4任(1789-1797)

姓名:乔治·华盛顿

George Washington

生卒:1732-1799

政党:联邦

● 第5任(1797-1801)

姓名:约翰·亚当斯

John Adams

生卒:1735-1826

政党:联邦

● 第6任(1801-1809)

姓名:托马斯·杰斐逊

Thomas Jefferson

生卒:1743-1826

政党:民共

回到顶点

2、代码展示:

<html>

<head>

  <title>锚点</title>

</head>
<style>
   /* 为了让页面出现滚动条(更好的展示锚点跳转效果。设置页面内容超出) */
  a{
    display: block;
    margin: 50px 0;
  }
</style>
<body>

<a name="top">这里是顶站的锚</a><br />

<a href="#1">1</a><br />

<a href="#2">2</a><br />

<a href="#3">3</a><br />

<a href="#4">4</a><br />

<a href="#5">5</a><br />

<a href="#6">6</a><br />

<h2>美国历任总统</h2>

<a name="1">第1任(1789-1797)</a><br />

  姓名:乔治·华盛顿<br />

  George Washington<br />

  生卒:1732-1799<br />

  政党:联邦<br />

<a name="2">第2任(1797-1801)</a><br />

  姓名:约翰·亚当斯<br />

  John Adams<br />

  生卒:1735-1826<br />

  政党:联邦<br />

<a name="3">第3任(1801-1809)</a><br />

  姓名:托马斯·杰斐逊<br />

  Thomas Jefferson<br />

  生卒:1743-1826<br />

  政党:民共<br/>

<a name="4">第4任(1789-1797)</a><br />

  姓名:乔治·华盛顿<br />

  George Washington<br />

  生卒:1732-1799<br />

  政党:联邦<br />

<a name="5">第5任(1797-1801)</a><br />

  姓名:约翰·亚当斯<br />

  John Adams<br />

  生卒:1735-1826<br />

  政党:联邦<br />

<a name="6">第6任(1801-1809)</a><br />

  姓名:托马斯·杰斐逊<br />

  Thomas Jefferson<br />

  生卒:1743-1826<br />

  政党:民共<br/>


<a href="#top">回到顶点</a><br />
</body>

</html>

总结

欢迎查阅其他文章~如有疑问或者不当处还请不吝赐教。。。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值