De nombreux amis qui viennent d'entrer en contact avec Mobile peuvent avoir des doutes sur les itinéraires de clic et de saut, en particulier en utilisant des itinéraires Vue. Par conséquent, cet article amène des amis à essayer d'utiliser CSS pour sauter des pages.
L'effet est comme indiqué sur la figure. Puisqu'il s'agit d'un terminal mobile, je choisis la simulation mobile de prévisualisation:
Html<body> <Main> <div id = shouye> shouye </ div> <div id = zhanlan> zhanlan </div> <div id = Geren> Geren </div> </-main> <Av> <a href = # shouye class = link> shouye </a> <a href = # zhanlan class = link> zhanlan href = # geren class = link> geren </a> </AV> </ody>
Il est principalement divisé en deux parties: Main et Nav. Les trois Divs contenus dans les principaux représentent trois pages différentes, et les trois A correspondants différents dans la NAV en même temps. Il est particulièrement important de noter que le HREF dans la balise A correspond aux ID des trois Divs contenus dans Main.
CSS * {padding: 0; marge: 0;} corps {hauteur: 100vh; largeur: 100vw; affichage: flex; flex-direction: colonne; position: relative;} corps :: après {/ * fond par défaut * / contenu: c'est mon texte; Font-Size: 4em; Position: Absolut; gauche: 50%; top: 50%; Opacité: .8; transform traduire (-50%, - 50%);} main {largeur: 100%; flex: 1; position: relatif;} nav {fond-couleur: # 2c3e50; hauteur: 8vh; affichage: flex; justify-content: spatial-between; align-items: Center;} nav .Alink {flex: 1; colori: # c3bed4; text-aligne: Centre; 2.5EM; Text-Decoration: Aucun; Text-Transform: Uppercase; Opacity: .8;} Nav .ALINK: Nth-Child (2) {Border-Left: Solid 1Px # E9E9; Border-Right: Solid 1Px # E9e9e9;} Main> Div {Position: Absolute; Width: 100%; Hight: 100%; Font-Sine Traductiony (-100%); transition-durée: 1s;} main> div: cible {/ *: cible pseudo-classe est le div qui est cliqué après que le lien a est défini * / transform: tradatey (0); z-index: 2;} Main> div: nth-child (1): cible {background-Color: # 008000;} main> div: nth-child (2): Target {background-Color: # 495A80;} main> div: nth-child (3): cible {background-Color: # fff00;}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.