Viele Freunde, die gerade mit Mobilgeräten in Kontakt gekommen sind, haben möglicherweise einige Zweifel daran, Routen zu klicken und zu springen, insbesondere mit Vue -Routen. Daher veranlasst dieser Artikel Freunde, CSS zu verwenden, um Seiten zu springen.
Der Effekt ist wie in der Abbildung gezeigt. Da es sich um ein mobiles Terminal handelt, wähle ich die mobile Vorschau -Simulation aus:
Html<body> <main> <div id = shouye> shouye </div> <div id = zhanlan> zhanlan </div> <div id = Geren> Geren </div> </main> <nav> <a href =##shouye class = link> shouye </a> <a href =##zanlan class =###zanlan class = zanlan </a> <a href =#zanlan class = zanlan class = link> Geren </a> </nav> </body>
Es ist hauptsächlich in zwei Teile unterteilt: Main und NAV. Die drei in den Hauptsachen enthaltenen Divs repräsentieren drei verschiedene Seiten und die entsprechenden drei verschiedenen A im NAN. Es ist besonders wichtig zu beachten, dass der HREF in der A -Tag den IDs der drei in Main enthaltenen Divs entspricht.
CSS *{Padding: 0; Rand: 0;} Körper {Höhe: 100VH; Breite: 100vw; Anzeige: Flex; Flex-Regisseur: Spalte; Position: relativ;} Körper :: Nach {/*Standardhintergrund*/Inhalt: Dies ist mein Text; Schriftgröße: 4EM; Position: absolut; translate (-50%,-50%);} Main {Breite: 100%; Flex: 1; Position: relativ;} nav {Hintergrundfarbe: #2c3e50; Höhe: 8vh; Anzeige: flex; gerechtfertigen content: space-daween; align-items;} nav .alink {fonte: 1 color: #c3bed4; #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d4: #c3d44; Keine; Text-Transformation: Großbuchstaben; Opazität: .8;} nav .alink: n-Kind (2) {Border-Links: Solid 1px #e9e9; Grenze-Recht: Solid 1px #e9e9e9;} Main> div {Position: absolut; Breite: 100%; 1S;} Main> Div: Ziel {/*: Zielpseudoklasse ist das Div, auf das geklickt wird, nachdem der A-Link festgelegt ist #495a80;} Main> div: n-Kind (3): Ziel {Hintergrundfarbe: #fff00;}Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.