Maison > interface Web > tutoriel CSS > Explication détaillée de l'utilisation des points d'ancrage CSS (débutants)

Explication détaillée de l'utilisation des points d'ancrage CSS (débutants)

烟雨青岚
Libérer: 2020-07-14 12:04:47
avant
3189 Les gens l'ont consulté

Explication détaillée de l'utilisation des points d'ancrage CSS (débutants)

Il existe deux façons d'utiliser les ancres CSS. Je recommande d'utiliser ce qui suit :

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

De cette façon, lorsque nous cliquons sur le A. lien, correspondant Le nœud DOM défilera vers le haut de la fenêtre.

Mais parfois, notre besoin n'est pas de le faire défiler vers le haut de la fenêtre. Vous voudrez peut-être qu'il soit à une certaine distance du sommet. Cela peut être résolu par les méthodes suivantes.

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

Cela permettra d'obtenir l'effet de 200 pixels à partir du haut après le défilement. Cela n'affecte pas le style de la page originale

Merci à tous d'avoir lu, j'espère que vous en bénéficierez beaucoup.

Cet article est reproduit à partir de : https://blog.csdn.net/baidu_32519511/article/details/52668834

Tutoriel recommandé : "Tutoriel CSS" https://www.php. cn/css -tutorial.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal