ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSアンカーの使い方をご存知ですか?

CSSアンカーの使い方をご存知ですか?

王林
リリース: 2020-09-15 17:36:27
転載
2434 人が閲覧しました

CSSアンカーの使い方をご存知ですか?

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

(推奨チュートリアル: CSS チュートリアル)

<a href=&#39;#one&#39;>到达第一个锚点</a>
    <a href=&#39;#two&#39;>到达第二个锚点</a>
    <div id=&#39;one&#39;>我是第一个锚点</div>
    <div id=&#39;two&#39;>我是第一个锚点</div>
ログイン後にコピー

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

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

<a href=&#39;#one&#39;>到达第一个锚点</a>
    <a href=&#39;#two&#39;>到达第二个锚点</a>
    <div id=&#39;one&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
    <div >我是第一个需要滚动的内容</div>
   <div id=&#39;two&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
    <div >我是第二个需要滚动的内容</div>
ログイン後にコピー

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

以上がCSSアンカーの使い方をご存知ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート