قد يكون لدى العديد من الأصدقاء الذين اتصلوا للتو بالهاتف المحمول بعض الشكوك حول النقر والقفز ، وخاصة باستخدام طرق VUE. لذلك ، يقود هذا المقال الأصدقاء إلى محاولة استخدام CSS للقفز على الصفحات.
التأثير كما هو موضح في الشكل. نظرًا لأنها محطة متنقلة ، اخترت محاكاة المعاينة للهاتف المحمول:
HTML<Body> <main> <div id = shouye> shouye </viv> <div id = zhanlan> Zhanlan </viv> <div id = geren> geren </viv> </ain> <vav> <a href =#shouye class = link> shouye </a> <a href = zhanlan class = link> geren </a> </vic> </body>
وهي مقسمة بشكل رئيسي إلى جزأين: Main and Nav. تمثل DIVs الثلاثة الواردة في Main ثلاث صفحات مختلفة ، والثلاث المقابلة A في NAV في نفس الوقت. من المهم بشكل خاص ملاحظة أن HREF في العلامة A يتوافق مع معرفات DIVs الثلاثة الواردة في MAIN.
CSS *{padding: 0 ؛ الهامش: 0 ؛} body {الارتفاع: 100VH ؛ العرض: 100vw ؛ العرض: فليكس ؛ فليكس-توجيه: العمود ؛ الموضع: نسبي ؛} الجسم :: بعد {/*الخلفية الافتراضية*/المحتوى: هذا هو النص الخاص بي ؛ الخط: 4EM ؛ الموضع: المطلق ؛ يسار: 50 ٪ ؛ أعلى: 50 ٪ ؛ ترجمة (-50 ٪ ،-50 ٪) ؛} Main {Width: 100 ٪ ؛ Flex: 1 ؛ الموضع: النسبية ؛} nav {background-color: #2c3e50 ؛ الارتفاع: 8vh ؛ عرض: flex ؛ تبرير المحتوى: action-between ؛ align-it: center ؛} 2.5em ؛ decoration text: none ؛ text-transform: uppercase ؛ optited: .8 ؛} nav .alink: nth-child (2) {border-left: solid 1px #e9e9 ؛ border-right: solid 1px #e9e9e9 ؛} main> div Translatey (-100 ٪) ؛ المدة الانتقالية: 1S ؛} Main> div: Target {/*: الهدف من الفئة الزائفة هو div الذي يتم النقر عليه بعد تعيين الرابط*/تحويل: Translatey (0) ؛ z-index: 2 ؛ #495a80 ؛} Main> div: nth-child (3): Target {background-color: #fff00 ؛}ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.