Muitos amigos que acabaram de entrar em contato com o Mobile podem ter algumas dúvidas sobre como clicar e saltar rotas, especialmente usando rotas VUE. Portanto, este artigo leva os amigos a tentar usar o CSS para pular páginas.
O efeito é como mostrado na figura. Como é um terminal móvel, escolho a simulação móvel de visualização:
Html<Body> <main> <div id = shouye> shouye </div> <div id = zhanlan> zhanlan </div> <div id = geren> geren </div> </main> <Vav> <a href =#shouye class = link> shouye </a> <aa/href =# class = link> geren </a> </av> </body>
É dividido principalmente em duas partes: Main e Nav. Os três divs contidos no Main representam três páginas diferentes, e os três diferentes diferentes A no NAV ao mesmo tempo. É especialmente importante observar que o HREF na tag A corresponde aos IDs dos três divs contidos em Main.
CSS *{preenchimento: 0; margem: 0;} corpo {altura: 100VH; largura: 100VW; Display: Flex; Flex-Direcção: Coluna; Posição: Relativa;} Body :: After {/*padrão padrão*/content: este é o meu texto; font-size: 4em; Posição: Absolute; esquerda: 50%; top: 50%; Opacity; traduzir (-50%,-50%);} main {largura: 100%; flex: 1; posição: relativa;} Nav {Background-Color: #2c3e50; altura: 8vh; display: flex; justify-content: space-betwen; Nenhum; TRANSFORMA DE TEXTO: OUPERCASE; OPACIDADE: .8;} Nav .Link: Nth-Child (2) {esquerda na borda: sólido 1px #e9e9; direita na borda: sólido 1px #e9e9e9;} main> div {posição: absoluto: largura: 100%; 100%; 1s;} principal> div: Target {/*: Target Pseudo-Class é o div, que é clicado após o link A ser definido*/Transform: Tradlatey (0); Z-Index: 2;} Main> Div: Nth-Child (1): Target {Background-Color: #008000;} Main> Div: Nth (2): 2): Target {Background: #008000;} Main> Div: Nth (2) #495A80;} Main> Div: Nth-Child (3): Target {Background-Color: #fff00;}O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.