设置锚点的三种方法_html/css_WEB-ITnose-html教程-PHP中文网

设置锚点的三种方法_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:46:35

原创

2461人浏览过

最网页中经常会用到锚点来定位，这里就和大家说说我知道的三种锚点的使用目前我就知道三种，更多的方法暂时没去研究，有的话大家帮忙补充。现在和大家说的主要是最常用最简单的方法。

1.使用 id 定位

先和大家说说最常用的 ID定位 ，这几乎是所有网站最常用的一种定位方式了。这种定位最大的好处就是可以针对任何标签来定位

使用说明：设置一个锚点 id,然后用 href 属性点位到该锚点id,具体实例代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>        <style type="text/css">            li{                display: block;                margin-bottom: 4px;                width: 100px;                height: 20px;                background: #eee;                text-align: center;            }        </style>    <body>        <li>            <a href="#a">定位到A</a>        </li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li id="a">⇒A</li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>    </body></html>

登录后复制

由于代码有点长，所以下面的代码基于上面的代码进行简略。大家可以电脑上自己试试。

登录后复制

2.使用 name 定位

第二种定位的方式就有所限制了，使用 name 定位只用于标签,其他的标签就不管用了。

... ...<body> <li> <a href="#a">定位到A</a> </li>... ...<li> <a name="a">定位到A</a> </li>... ...</body>

登录后复制

3.使用 js 定位

第三种方式的使用就如下面的，不过我不是很喜欢这种用法。

造点AI

夸克 · 造点AI

325

查看详情

立即学习“前端免费学习笔记（深入）”；

... ...<body> <li onclick="javascript:document.getElementById('here').scrollIntoView()"> </li>... ...<li> <a name="a">定位到A</a> </li>... ...</body>

登录后复制

对于上面的三种用法，大家不一定都用的到，用到的也许就只有第一种。自然我这边也是推荐大家用第一种。

在运行代码的时候，大家会发现锚点都是用跳的，完全没有过渡的效果。不过没关系，这也是我写这篇文章奠定基础的原因。我会在我接下来的文章里和大家介绍锚点跳转时屏幕滚动的效果。《前端屏幕滚动效果》

谢谢大家查阅我的文章，希望能帮到你，^_^

登录后复制

大家都在看：

html本地存储缓存怎么清理_html本地存储缓存清理的全面说明 html如何增加边框_HTML元素边框（border样式）添加方法 HTML5在线如何制作抽奖转盘 HTML5在线互动活动的开发指南 html如何取消浮动_HTML浮动（float）取消（clear:both）方法如何在云端平台上编辑HTML表单元素的详细教程