Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wissen Sie, wie man CSS-Anker verwendet?

王林
Freigeben: 2020-09-15 17:36:27
nach vorne
2386 Leute haben es durchsucht

Wissen Sie, wie man CSS-Anker verwendet?

Es gibt zwei Möglichkeiten, CSS-Ankerpunkte zu verwenden. Ich empfehle die folgende:

(Empfohlenes Tutorial: CSS-Tutorial)

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

Auf diese Weise wird beim Klicken auf den A-Link das entsprechende DOM angezeigt Der 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>
    <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>
Nach dem Login kopieren

Auf diese Weise können Sie nach dem Scrollen den Effekt von 200 Pixeln von oben erzielen. ohne den Stil der Originalseite zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWissen Sie, wie man CSS-Anker verwendet?. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!