Muchos amigos que acaban de entrar en contacto con Mobile pueden tener algunas dudas sobre hacer clic y saltar rutas, especialmente usando rutas VUE. Por lo tanto, este artículo lleva a los amigos a intentar usar CSS para saltar páginas.
El efecto es como se muestra en la figura. Como es un terminal móvil, elijo la simulación móvil de vista previa:
Html<Body> <Rain> <Div id = ShoUye> shoUye </iv> <div id = zhanlan> zhanlan </iv> <div id = geren> geren </div> </main> <am> <a href =##shouye class = linke> shouye </a> <a href =#zhanlan class = enlace> zhanlan </aa> class = Link> Geren </a> </am> </body>
Se divide principalmente en dos partes: Main y Nav. Los tres divs contenidos en Main representan tres páginas diferentes, y las tres diferentes A diferentes en el NAV al mismo tiempo. Es especialmente importante tener en cuenta que el href en la etiqueta A corresponde a las ID de los tres divs contenidos en Main.
CSS *{relleno: 0; margen: 0;} cuerpo {altura: 100vh; ancho: 100vw; display: flex; flex; dirección: columna; posición: relativa;} cuerpo :: después {/*fondo predeterminado*/contenido: este es mi texto; font-size: 4em; posición: absoluto; izquierda: 50%; superior: 50%; opacidad: .8; transformación: transformación: transformación: traducir (-50%,-50%);} main {ancho: 100%; flex: 1; posición: relativo;} nav {de fondo de fondo: #2c3e50; altura: 8vh; display: flex; justify-content: space-between; align-items: centro;} nav .alink {flex: 1; color: #c3bed4; text-center; font; font-size 2.5EM; Decoración de texto: Ninguno; Text-Transform: UpperCase; Opacity: .8;} Nav .Alink: NTH-Child (2) {Border-Left: Solid 1PX #E9E9; Border-Right: Solid 1px #E9E9E9;} Main> Div {Posición: Absolte; ancho: 100%; altura: 100%; FONT-SISIS; 5EM; Transforma; Transforma; Transforma; Transforma; Transformar; traducey (-100%); duración de la transición: 1s;} main> div: target {/*: la pseudo-class de Target es el div que se hace clic después de que el enlace A se establece*/transformado: traducey (0); z-inex: 2;} main> nth-child (1): Target {fondo de fondo: #008000;} Main> divs: nth-child (2): Diver {Target {Target {Target-Color #495A80;} Main> Div: Nth-Child (3): Target {Background-Color: #FFF00;}Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.