Lösen Sie das Sprungproblem des mobilen Endgeräts (CSS-Übergang, Ziel-Pseudoklasse).

    <Text>
        <Haupt>
            <div id="Schuhe">Schuhe</div>
            <div id="zhanlan">zhanlan</div>
            <div id="geren">geren</div>
        </main>
        <Navigation>
            <a href="#shouye" class="alink">shouye</a>
            <a href="#zhanlan" class="alink">zhanlan</a>
            <a href="#geren" class="alink">geren</a>
        </nav>
    </body>

*{
Polsterung: 0;
Rand: 0;
}
Körper{
Höhe: 100vh;
Breite: 100vw;
Anzeige: Flex;
Flex-Richtung: Spalte;
Position: relativ;
}
body::after{/*Standardhintergrund*/
Inhalt: „Das ist mein Text“;
Schriftgröße: 4em;
Position: absolut;
links: 50%;
oben: 50 %;
Deckkraft: .8;
transformieren: übersetzen(-50 %,-50 %);
}
hauptsächlich{
Breite: 100 %;
biegen: 1;
Position: relativ;
}
nav{
Hintergrundfarbe: #2C3E50;
Höhe: 8vh;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
Elemente ausrichten: zentrieren;
}
nav .alink{
biegen: 1;
Farbe: #C3BED4;
Textausrichtung: zentriert;
Schriftgröße: 2,5em;
Textdekoration: keine;
Texttransformation: Großbuchstaben;
Deckkraft: .8;
}
nav .alink:nth-child(2){
Rahmen links: durchgezogen 1px #E9E9E9;
Rahmen rechts: durchgezogen 1px #E9E9E9;
}
Haupt>div{
Position: absolut;
Breite: 100 %;
Höhe: 100%;
Schriftgröße: 5em;
transformieren: verschiebeY(-100%);
Übergangsdauer: 1s;
}
main>div:target{/*: Zielpseudoklasse ist das Div, das nach dem Setzen eines Links angeklickt wird*/
transformieren: übersetzenY(0);
Z-Index: 2;
}
Haupt>Div:nth-child(1):target{
Hintergrundfarbe: #008000;
}
Haupt>Div:nth-child(2):target{
Hintergrundfarbe: #495A80;
}
Haupt>Div:nth-child(3):target{
Hintergrundfarbe: #FFFF00;
}