モバイルと接触したばかりの多くの友人は、特にVueルートを使用して、ルートをクリックしてジャンプすることに疑問を抱くかもしれません。したがって、この記事では、友人がCSSを使用してページをジャンプしようとするようになります。
効果は図に示されているとおりです。モバイル端末なので、プレビューモバイルシミュレーションを選択します。
HTML<body> <main> <div id = shouye> shouye </div> <div id = zhanlan> zhanlan> zhanlan </div> <div id = geren> geren </div> </main> <nav> <a href =#shouye class = link> shouye </a> < href =#geren class = link> geren </a> </nav> </body>
主にメインとNAVの2つの部分に分かれています。メインに含まれる3つのDIVは、3つの異なるページを表し、NAVの対応する3つの異なるAを同時に表します。 AタグのHREFは、メインに含まれる3つのDIVのIDに対応することに注意することが特に重要です。
CSS *{パディング:0;マージン:0;} body {height:100VH; width:100VW; display:flex; column; position:relative;} body ::後の{/*デフォルトの背景*/コンテンツ:これは私のテキスト:4EM;ポジション:絶対;左:50%;トップ:50%:.8;変換:.8; 100%; flex:1; position:relative;} nav {background-color:#2c3e50; height:8vh; display:flex; justify-content:space-bet-between;} nav .alink {flex:1; color:#c3bed4; text-align:center; font-size:none; extoration:none; apmertore .8;} nav .alink:nth-child(2){border-left:solid 1px#e9e9; border-right:solid 1px#e9e9e9;} main> div {position:absolute; width:100%; height:100%; font-size:5em;変換:変換(-100%);ターゲット ^擬似クラスは、リンクが設定された後にクリックされるdivです*/変換:翻訳(0); z-index:2;} div:nth-child(1):ターゲット{background-color:#008000;} div:nth-child(2):ターゲット{バックグラウンドコラー: #495a80;} main> div:nth-child(3):ターゲット{background-color:#fff00;}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。