방금 모바일과 접촉 한 많은 친구들은 특히 VUE 경로를 사용하여 경로를 클릭하고 점프하는 것에 대한 의문을 가질 수 있습니다. 따라서이 기사는 친구들이 CSS를 사용하여 페이지를 뛰어 넘으려고합니다.
효과는 그림과 같이입니다. 모바일 터미널이므로 미리보기 모바일 시뮬레이션을 선택합니다.
HTML<body> <ain> <div id = shouye> shouye </div> <div id = zhanlan> zhanlan </div> <div id = geren> geren> geren </div> </main> <av> <a href =#shouye class = link> shouye </a> <a href =#zhanlan class = link> Zhanlan </a> <a href = class = link> geren </a> </nav> </body>
주로 두 부분으로 나뉩니다 : Main과 Nav. 메인에 포함 된 3 개의 DIV는 3 개의 다른 페이지를 나타내고, NAV에서 동시에 3 개의 다른 A를 나타냅니다. A 태그의 HREF는 메인에 포함 된 3 개의 DIV의 ID에 해당한다는 점에 유의해야합니다.
CSS *{패딩 : 0; 마진 : 0;} 바디 {높이 : 100VH; 너비 : 100VW; 디스플레이 : 플렉스; 플렉스 방향 : 열; 위치 : 상대;} Body :: 이후 {/*기본 배경*/내용 : 이것은 내 텍스트입니다; font-size : 4EM; 위치 : 절대 : 왼쪽 : 50%; 불투명도 : 8; 변환 : : : : : 4EM; 번역 (-50%, -50%);} main {width : 100%; flex : 1; 위치 : 상대;} nav {back 없음; 텍스트 변환 : 대문자; 불투명도 : .8;} nav .Alink : nth-Child (2) {Border-Left : Solid 1px #e9e9; Border-Right : Solid 1px #e9e9e9;} main> div {위치 : 절대; 너비 : 100%; 100%; font-size : 5em : transity (-100%). 1s;} main> div : target {/*: target pseudo class는 링크가 설정된 후 클릭 한 DIV입니다*/transform : translatey (0); z-index : 2;} main> div : nth-child (1) : target-Color : #008000;} main> div : nth-Child (2) : target {배경 콜로르 : #495a80;} main> div : nth-Child (3) : target {배경색 : #fff00;}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.