Maison  >  Article  >  interface Web  >  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)

烟雨青岚
烟雨青岚avant
2020-07-14 12:04:473105parcourir

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

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>
    <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>

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer