一、锚点的用法

锚点的用法有两种,但性质同样,都是通过链接标签<a></a>以及其href属性实现的:

一种是:页内跳转;

一种是:跳到其他页面的某个区域。

下面我们看具体的用法。

1)内跳转的锚点用法:

给每个div添加了ID号,然后将每个链接标签的href属性分别按顺序与每个div的ID相对应。【注意:href属性后的ID号必须有“#”,否则无效。】

 1 <head>
 2 <title>锚点的使用</title>
 3 <style type="text/css">
 4 body{
 5     font-family:"微软雅黑";
 6     height:2000px;
 7 }
 8 .nav{
 9     margin:50px auto 0;
10     text-align:center;
11     background-color:#cfcfcf;
12     line-height:40px;
13 }
14 .nav a{
15     display:inline-block;
16     padding:5px 10px;
17     font-size:16px;
18     text-decoration:none;
19     color:#fff;
20     text-shadow:1px 1px 5px #04acef;    
21 }
22 .nav a:hover{
23     background:#04acef;
24 }
25 div{
26     height:130px;
27     line-height:130px;
28     box-shadow:1px 1px 10px #ccc;
29     font-size:30px;
30     text-align:center;
31 }
32 </style>
33 </head>
34 <body>
35     <p class="nav">
36         <a href="#1">第一个</a>
37         <a href="#2">第二个</a>
38         <a href="#3">第三个</a>
39         <a href="#4">第四个</a>
40         <a href="#5">第五个</a>
41     </p>
42     <div id="1">1</div>
43     <div id="2">2</div>
44     <div id="3">3</div>
45     <div id="4">4</div>
46     <div id="5">5</div>
47 </body>

运行界面如下:

当按下第一个时,会页面跳转到“1”处。

 

2)页外跳转的锚点用法:

加入我在一个名为“示例”的文件夹中见了两个HTML文档

第一个名为ancesor.html

第二个名为ancesor1.html

里面的代码都一样,跟我贴出的“锚点的用法”这一步骤中的第二个步骤所贴出的图片一样。

现在我把index.html当中第一个a标签把其中的href="#1",更改为href=“ancesor1.html#1”并保存之后,我们再在浏览器打开,这时候会发现,页面会跳转到ancesor1.html中的ID=1的div所在的区域。

 1 <head>
 2 <title>锚点的使用</title>
 3 <style type="text/css">
 4 body{
 5     font-family:"微软雅黑";
 6     height:2000px;
 7 }
 8 .nav{
 9     margin:50px auto 0;
10     text-align:center;
11     background-color:#cfcfcf;
12     line-height:40px;
13 }
14 .nav a{
15     display:inline-block;
16     padding:5px 10px;
17     font-size:16px;
18     text-decoration:none;
19     color:#fff;
20     text-shadow:1px 1px 5px #04acef;    
21 }
22 .nav a:hover{
23     background:#04acef;
24 }
25 div{
26     height:130px;
27     line-height:130px;
28     box-shadow:1px 1px 10px #ccc;
29     font-size:30px;
30     text-align:center;
31 }
32 </style>
33 </head>
34 <body>
35     <p class="nav">
36         <a href="ancesor1.html#1">第一个</a>
37         <a href="ancesor1.html#2">第二个</a>
38         <a href="ancesor1.html#3">第三个</a>
39         <a href="ancesor1.html#4">第四个</a>
40         <a href="ancesor1.html#5">第五个</a>
41     </p>
42     <div id="1">1</div>
43     <div id="2">2</div>
44     <div id="3">3</div>
45     <div id="4">4</div>
46     <div id="5">5</div>
47 </body>

 

没错这就是页外的锚点跳转。

所以当我们需要跳转到其他页面的某个区域时,只要把href的属性值设置“跳转页面的URL+所想跳转到区域的ID(或者说锚点名称)”即可。

 

这里需要说明,本示例均使用的ID锚点,给div添加ID的时候就为该div设置了锚点。

 

 

参考链接https://www.cnblogs.com/supermeimei/p/5756084.html

posted on 2019-06-09 18:38  小白coder  阅读(7159)  评论(0编辑  收藏  举报