序文 モバイル端末に触れたばかりの友人の多くは、クリックジャンプルーティング、特にVueルーティングを使用する場合に疑問を抱いている可能性があります。そのため、この記事では、友人がCSSを使用してページにジャンプするように導きます。 効果は図の通りです。モバイル端末なので、プレビューには携帯電話のシミュレーションを選択します。 html <本文> <メイン> <div id="shouye">ショウイエ</div> <div id="zhanlan">zhanlan</div> <div id="geren">geren</div> </メイン> <ナビ> <a href="#shouye" class="alink">shouye</a> <a href="#zhanlan" class="alink">zhanlan</a> <a href="#geren" class="alink">geren</a> </nav> </本文> 主に main と nav の 2 つの部分に分かれています。main に含まれる 3 つの div は 3 つの異なるページを表し、nav 内の 3 つの異なる a に対応しています。a タグの href は、main に含まれる 3 つの div の id に対応していることに注意してください。 CS *{ パディング: 0; マージン: 0; } 体{ 高さ:100vh; 幅:100vw; ディスプレイ: フレックス; flex-direction: 列; 位置: 相対的; } body::after{/*デフォルトの背景*/ 内容:「これは私のテキストです」; フォントサイズ:4em; 位置: 絶対; 左: 50%; 上位: 50%; 不透明度: .8; 変換: translate(-50%,-50%); } 主要{ 幅: 100%; フレックス: 1; 位置: 相対的; } ナビ{ 背景色: #2C3E50; 高さ: 8vh; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; アイテムの位置を中央揃えにします。 } ナビ.alink{ フレックス: 1; 色: #C3BED4; テキスト配置: 中央; フォントサイズ: 2.5em; テキスト装飾: なし; テキスト変換:大文字; 不透明度: .8; } nav .alink:nth-child(2){ 左境界線: 実線 1px #E9E9E9; 右境界線: 実線 1px #E9E9E9; } メイン>div{ 位置: 絶対; 幅: 100%; 高さ: 100%; フォントサイズ: 5em; 変換: translateY(-100%); 遷移期間: 1秒; } main>div:target{/*: ターゲット疑似クラスは、リンクを設定した後にクリックされるdivです*/ 変換: translateY(0); zインデックス: 2; } メイン>div:nth-child(1):ターゲット{ 背景色: #008000; } メイン>div:nth-child(2):ターゲット{ 背景色: #495A80; } メイン>div:nth-child(3):ターゲット{ 背景色: #FFFF00; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決
>>: vue3で注意すべき2つのポイントを詳しく解説:セットアップ
目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...
序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...
目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...
今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...
おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...
目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...
MySQL が alter table などの DDL 操作を実行すると、テーブル メタデータ ロッ...
目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...
1 問題の説明この記事では、確立された複合インデックスをソートし、レコード内の非インデックス フィー...
クエリキャッシュ制限query_cache_limit は、単一のクエリで使用できるバッファ サイズ...
目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...
目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...
1. MySQLのトランザクションの概念MySQL トランザクションは主に、操作量が多く複雑度の高い...
この記事の例では、参考のためにVueカスタムポップアップ効果の具体的なコードを共有しています。具体的...
次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...