序文 モバイル端末に触れたばかりの友人の多くは、クリックジャンプルーティング、特に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つのポイントを詳しく解説:セットアップ
ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
目次refとは何かrefの使い方DOM要素に配置するクラスコンポーネントに配置する関数コンポーネント...
昨日は写真をアップロードしてリンクを返す機能を実装していました。プロジェクトが Tomcat に再デ...
Mavenパッケージを解凍する tar xf apache-maven-3.5.4-bin.tar....
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...
JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...
1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...
<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの...
1. サブクエリMySQL 4.1以降はサブクエリをサポートしていますサブクエリ:別のクエリ内にネス...
目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...
1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...
序文:ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...
1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...