モバイル端末のジャンプ問題を解決する(CSS遷移、ターゲット疑似クラス)

モバイル端末のジャンプ問題を解決する(CSS遷移、ターゲット疑似クラス)

序文

モバイル端末に触れたばかりの友人の多くは、クリックジャンプルーティング、特に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のスリープ関数の特殊現象例の詳しい説明

序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...

MySQL msiバージョンのダウンロードとインストールの初心者向けの詳細なグラフィックチュートリアル

目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...

CentOS7.4 起動時の緊急モードへようこそメッセージに対する解決策

今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

MySQL 外部キー制約とテーブル関係の概要

目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...

MySQL でテーブル メタデータ ロックを待機する理由と方法

MySQL が alter table などの DDL 操作を実行すると、テーブル メタデータ ロッ...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

MySql 範囲内の検索時にインデックスが有効にならない理由の分析

1 問題の説明この記事では、確立された複合インデックスをソートし、レコード内の非インデックス フィー...

MySQL 最適化 query_cache_limit パラメータの説明

クエリキャッシュ制限query_cache_limit は、単一のクエリで使用できるバッファ サイズ...

MySQL binlog を使用して誤って削除されたデータベースを復元する方法

目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...

この記事ではSQL CASE WHENの使い方を詳しく説明します

目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...

Mysqlトランザクション処理の詳細な説明

1. MySQLのトランザクションの概念MySQL トランザクションは主に、操作量が多く複雑度の高い...

Vue カスタム箇条書きボックス効果 (確認ボックス、プロンプトボックス)

この記事の例では、参考のためにVueカスタムポップアップ効果の具体的なコードを共有しています。具体的...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...