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
Table of contents 1. Basic Use 2. Image quantity ...
Table of contents 1. Lock and Latch 2. Repeatable...
RedHat6.5 installation MySQL5.7 tutorial sharing,...
I have been in contact with MGR for some time. Wi...
Creating a Cursor First, create a data table in M...
Operating system: Window10 MySQL version: 8.0.13-...
MySQL 5.5 installation and configuration method g...
.y { background: url(//img.jbzj.com/images/o_y.pn...
We all know the drag-and-drop feature of HTML5, w...
Regarding how to create this thin-line table, a s...
The command line mysqld –skip-grant-tables cannot...
Table of contents Project Directory Dockerfile Fi...
“How to make a website look high-end? Or more des...
Table of contents 1. General steps for SQL optimi...
Prepare the bags Install Check if Apache is alrea...