Banyak teman yang baru saja bersentuhan dengan seluler mungkin memiliki beberapa keraguan tentang mengklik dan melompat rute, terutama menggunakan rute vue. Oleh karena itu, artikel ini mengarahkan teman untuk mencoba menggunakan CSS untuk melompat halaman.
Efeknya seperti yang ditunjukkan pada gambar. Karena ini adalah terminal seluler, saya memilih simulasi seluler pratinjau:
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=#zhanlan class=link>zhanlan</a> <a href=#geren class = link> Geren </a> </av> </body>
Ini terutama dibagi menjadi dua bagian: Main dan Nav. Tiga div yang terkandung di Main mewakili tiga halaman yang berbeda, dan tiga A yang berbeda di NAV pada saat yang sama. Sangat penting untuk dicatat bahwa HREF dalam tag A sesuai dengan ID dari tiga div yang terkandung di Main.
CSS *{Padding: 0; margin: 0;} body {Height: 100vh; Lebar: 100vw; tampilan: flex; fleksibel-direction: kolom; posisi: relatif;} body :: setelah {/*latar belakang default*/konten: ini adalah teks saya; ukuran font: 4em; posisi: absolute; kiri: 50%; 50%: Opacity saya; font-ukuran: 4em; posisi: absolute; kiri: 50%; 50%: Opacity saya; Terjemahan (-50%,-50%);} main {lebar: 100%; flex: 1; posisi: relatif;} nav {latar belakang-warna: #2c3e50; tinggi: 8vh; display: flex; justify-content: space-between; align-items: center;} nav .Anink {flex: 1; color: #c3-d-c3; Text-SOUPLEIP; TEKS; TEKS-SALIF-NAV .Alink {FLEX: 1; # # #caP-betor; tidak ada; Teks-transform: huruf besar; opacity: .8;} nav .Ank: nth-child (2) {border-left: solid 1px #e9e9; border-right: solid 1px #e9e9e9;} Main> Div {position: absolute; width: 100%; tinggi: 100%; font-sisze: 5em: 5em: width: 100%; tinggi: 100%; font-sission: 5em: 5em: width: 100%; tinggi: 100%; font-sisze: 5em: 5em: absolute; width: 100%; height: 100%; font-Size: 5em: 5em: 5em; transform; width: 100%; 100%; font-Size: 5em: 5em; 1S;} Main> Div: Target {/*: Target Pseudo-Class adalah div yang diklik setelah tautan A diatur*/transformasi: translatey (0); z-index: 2;} Main> Div: nth-child (1): target {latar belakang-color: #008000;} Main> div: nth-child (2): target {latar belakang: #008000;} Main> div: nth-child (2): target {latar belakang: #008000;} Main> Div: nth-child (2): Target: latar belakang: #008000;} div: nth-child (2): target:: #008000;} div: nth-child (2): target {latar belakang: #008000; #495A80;} Main> Div: nth-child (3): target {latar belakang-warna: #fff00;}Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.