ホームページ  >  記事  >  ウェブフロントエンド  >  CSSアンカーポイントの使い方を詳しく解説(初心者向け)

CSSアンカーポイントの使い方を詳しく解説(初心者向け)

烟雨青岚
烟雨青岚転載
2020-07-14 12:04:473170ブラウズ

CSSアンカーポイントの使い方を詳しく解説(初心者向け)

CSS アンカーを使用するには 2 つの方法があります。私は次の方法を使用することをお勧めします:

  <a href=&#39;#one&#39;>到达第一个锚点</a>
    <a href=&#39;#two&#39;>到达第二个锚点</a>
    <p id=&#39;one&#39;>我是第一个锚点</p>
    <p id=&#39;two&#39;>我是第一个锚点</p>

このように、A をクリックすると、リンクをクリックすると、対応する DOM ノードがウィンドウの上部までスクロールします。

しかし、ウィンドウの上部までスクロールさせたくない場合もあります。彼に頂上から少し離れたところにいることが望ましいかもしれません。これは以下の方法で解決できます。

  <a href=&#39;#one&#39;>到达第一个锚点</a>
    <a href=&#39;#two&#39;>到达第二个锚点</a>
    <p id=&#39;one&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
 <p >我是第一个需要滚动的内容</p>
   <p id=&#39;two&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
    <p >我是第二个需要滚动的内容</p>

これにより、スクロール後に上から 200px の効果が得られます。元のページのスタイルには影響を与えません。

皆さん、読んでいただきありがとうございます。多くの利益が得られることを願っています。

この記事は https://blog.csdn.net/baidu_32519511/article/details/52668834

推奨チュートリアル: 「CSS チュートリアル」 https://www.php から転載しています。 cn/css -tutorial.html

以上がCSSアンカーポイントの使い方を詳しく解説(初心者向け)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。