เพื่อนหลายคนที่เพิ่งติดต่อกับมือถืออาจมีข้อสงสัยเกี่ยวกับการคลิกและเส้นทางกระโดดโดยเฉพาะอย่างยิ่งการใช้เส้นทาง Vue ดังนั้นบทความนี้ทำให้เพื่อนพยายามใช้ CSS เพื่อกระโดดหน้า
เอฟเฟกต์ดังแสดงในรูป เนื่องจากเป็นเทอร์มินัลมือถือฉันจึงเลือกตัวอย่างการจำลองมือถือ:
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> href =#geren class = link> geren </a> </av> </body>
ส่วนใหญ่แบ่งออกเป็นสองส่วน: หลักและนาวิกโยธิน สาม divs ที่มีอยู่ในหลักแสดงถึงสามหน้าแตกต่างกันและสามที่แตกต่างกันที่แตกต่างกันใน NAV ในเวลาเดียวกัน เป็นสิ่งสำคัญอย่างยิ่งที่จะต้องทราบว่า HREF ในแท็ก A สอดคล้องกับ ID ของสาม divs ที่มีอยู่ในหลัก
CSS *{padding: 0; margin: 0;} ร่างกาย {ความสูง: 100VH; ความกว้าง: 100VW; แสดง: Flex; Flex-Direction: คอลัมน์; ตำแหน่ง: ญาติ;} ร่างกาย :: หลังจาก {/*พื้นหลังเริ่มต้น*/เนื้อหา: นี่คือข้อความของฉัน; Font-Size: 4EM; 100%; Flex: 1; ตำแหน่ง: สัมพัทธ์;} nav {พื้นหลัง-สี: #2C3E50; ความสูง: 8VH; แสดง: Flex; Justify-Content: Space-Between; ALIGN-ITEMS: Center;} Nav. alink {Flex: 1; สี: #C3BED4; .8;} nav .Alink: nth-child (2) {ชายแดนซ้าย: ของแข็ง 1px #e9e9; ชายแดนขวา: ของแข็ง 1px #e9e9e9;} หลัก> div {ตำแหน่ง: ความกว้าง: 100%; ความสูง: 100%; Pseudo-Class เป็น div ที่คลิกหลังจากชุดลิงค์ถูกตั้งค่า*/transform: translatey (0); z-index: 2;} main> div: nth-child (1): เป้าหมาย {พื้นหลังสี: #008000;} main> div: nth-child (2): เป้าหมาย #495a80;} หลัก> div: nth-child (3): เป้าหมาย {พื้นหลังสี: #fff00;}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น