モバイルと接触したばかりの多くの友人は、特に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をもっとサポートすることを願っています。