Solve the mobile terminal jump problem (CSS transition, target pseudo-class)

Preface

Many friends who have just come into contact with mobile terminals may have some doubts about click jump routing, especially when using Vue routing, so this article will lead friends to try to use CSS to jump to the page

The effect is as shown in the figure. Since it is a mobile terminal, the mobile phone simulation is selected for preview:

HTML

    <body>
        <main>
            <div id="shouye">shouye</div>
            <div id="zhanlan">zhanlan</div>
            <div id="geren">geren</div>
        </main>
        <nav>
            <a href="#shouye" class="alink">shouye</a>
            <a href="#zhanlan" class="alink">zhanlan</a>
            <a href="#geren" class="alink">geren</a>
        </nav>
    </body>

It is mainly divided into two parts: main and nav. The three divs contained in main represent three different pages, and correspond to three different a's in nav. It should be noted that the href in the a tag corresponds to the id of the three divs contained in main.

CSS

*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
}
body::after{/*Default background*/
content: "this is my text";
font-size:4em;
position: absolute;
left: 50%;
top: 50%;
opacity: .8;
transform: translate(-50%,-50%);
}
main{
width: 100%;
flex: 1;
position: relative;
}
nav{
background-color: #2C3E50;
height: 8vh;
display: flex;
justify-content: space-between;
align-items: center;
}
nav .alink{
flex: 1;
color: #C3BED4;
text-align: center;
font-size: 2.5em;
text-decoration: none;
text-transform:uppercase;
opacity: .8;
}
nav .alink:nth-child(2){
border-left: solid 1px #E9E9E9;
border-right: solid 1px #E9E9E9;
}
main>div{
position: absolute;
width: 100%;
height: 100%;
font-size: 5em;
transform: translateY(-100%);
transition-duration: 1s;
}
main>div:target{/*: target pseudo class is the div that is clicked after setting the a link*/
transform: translateY(0);
z-index: 2;
}
main>div:nth-child(1):target{
background-color: #008000;
}
main>div:nth-child(2):target{
background-color: #495A80;
}
main>div:nth-child(3):target{
background-color: #FFFF00;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: After docker run, the status is always Exited

>>: Detailed explanation of two points to note in vue3: setup

Solve the mobile terminal jump problem (CSS transition, target pseudo-class)

jQuery implements form validation

CSS World--Code Practice: Image Alt Information Presentation

A brief talk on responsive design

Nginx source code compilation and installation process record

Comparing Node.js and Deno

A brief summary of how to write paths when HTML files introduce external CSS files

How to build a MySQL high-availability and high-performance cluster

CSS injection knowledge summary

Flex layout makes adaptive pages (syntax and examples)

Solution to the problem of repeated triggering of functions in Vue project watch

Recommend

Vue uses the Element el-upload component to step on the pit

MySQL InnoDB transaction lock source code analysis

Detailed Tutorial on Installing MySQL 5.7 on RedHat 6.5

Automatic failover of slave nodes in replication architecture in MySQL 8.0.23

Definition and usage of MySQL cursor

Problems and solutions when installing MySQL8.0.13 on Win10 system

MySQL installation diagram summary

Analysis of rel attribute in HTML

How to build a drag and drop plugin using vue custom directives

A simple example of creating a thin line table in html

How to reset password after forgetting password in MySQL8 (MySQL old method doesn't work)

Detailed explanation of how to deploy SpringBoot in docker and replace jar packages

How to make a website look taller and more designed

MYSQL's 10 classic optimization cases and scenarios

Linux installation apache server configuration process