Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Ausführliche Erklärung der Verwendung von CSS-Ankerpunkten (Neulinge)

烟雨青岚
Freigeben: 2020-07-14 12:04:47
nach vorne
3163 Leute haben es durchsucht

Ausführliche Erklärung der Verwendung von CSS-Ankerpunkten (Neulinge)

Es gibt zwei Möglichkeiten, CSS-Anker zu verwenden. Ich empfehle die Verwendung der folgenden:

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

Auf diese Weise klicken wir auf das A Link, entsprechend Der DOM-Knoten scrollt zum oberen Rand des Fensters.

Aber manchmal besteht unser Bedürfnis nicht darin, dass es an den oberen Rand des Fensters scrollt. Möglicherweise möchten Sie, dass er etwas weiter von der Spitze entfernt ist. Dies kann mit den folgenden Methoden gelöst werden.

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

Dadurch wird nach dem Scrollen der Effekt von 200 Pixeln von oben erreicht. Es hat keinen Einfluss auf den Stil der Originalseite

Vielen Dank an alle fürs Lesen, ich hoffe, Sie werden viel davon profitieren.

Dieser Artikel wurde reproduziert von: https://blog.csdn.net/baidu_32519511/article/details/52668834

Empfohlenes Tutorial: „CSS Tutorial“ https://www.php. cn/css -tutorial.html

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Verwendung von CSS-Ankerpunkten (Neulinge). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage