モバイル端末のジャンプ問題を解決する(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つのポイントを詳しく解説:セットアップ

推薦する

SQL 面接の質問: 時間差の合計を求める (重複は無視)

ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...

MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介

GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...

React refの使用例

目次refとは何かrefの使い方DOM要素に配置するクラスコンポーネントに配置する関数コンポーネント...

Tomcat を再デプロイした後にイメージやその他のリソースが自動的に削除される問題を解決します

昨日は写真をアップロードしてリンクを返す機能を実装していました。プロジェクトが Tomcat に再デ...

Linux 継続的インテグレーションで Maven を自動的にインストールする方法

Mavenパッケージを解凍する tar xf apache-maven-3.5.4-bin.tar....

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法

MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

HTMLリンクタグのrel属性

<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの...

MySQL サブクエリ (ネストされたクエリ)、結合テーブル、複合クエリの詳細な説明

1. サブクエリMySQL 4.1以降はサブクエリをサポートしていますサブクエリ:別のクエリ内にネス...

JavaScript の静的スコープと動的スコープを例を使って説明します

目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...

(MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明

1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...

Dockerはターミナルで中国語を入力できない問題を解決します

序文:ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...

Linux でのファイル コンテンツの重複排除と交差と差異の実装

1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...