アンカーポイントを設定する 3 つの方法_html/css_WEB-ITnose-htmlチュートリアル-php.cn

アンカーポイントを設定する 3 つの方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:46:35

オリジナル

1785 人が閲覧しました

ほとんどの Web ページでは、位置決めに アンカー がよく使用されます。現在、私が知っている 3 つの アンカー の使用法について説明します。現時点ではさらに多くの方法を検討していません。何かあれば、追加してください。これから説明するのは、主に最も一般的に使用され、最も簡単な方法です。

1. ID 配置を使用する

まず、ほとんどすべての Web サイトで最もよく使用される配置方法である 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. 名前の位置指定を使用します。

2 番目の位置指定方法は、タグに対してのみ使用します。 , その他ラベルが機能しません。

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

ログイン後にコピー

3. js を使用して

3 番目の方法は次のように使用されますが、私はこの使用法があまり好きではありません。

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

ログイン後にコピー

上記の 3 つの用途をすべての人が使用できるわけではありません。おそらく最初の 1 つだけが使用されるでしょう。当然のことながら、最初のものを使用することをお勧めします。

コードを実行すると、アンカーポイントがすべてジャンプしており、トランジション効果がまったくないことがわかります。でも大丈夫、だから基礎を築くためにこの記事を書きました。次回はアンカーポイントジャンプ時の画面スクロールの効果について紹介します。「フロントエンド画面のスクロール効果」

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

ログイン後にコピー