いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的に伸縮できることを意味します。つまり、テキストが増えると背景も長く表示されます。 それらのほとんどは、WeChat ナビゲーション バーなどのナビゲーション バーで使用されます。 具体的な実施方法は以下の通りです。 1. まず、テキストコンテンツはタグとスパンタグで構成されています <a href="#"> <span></span> </a> 2. a タグは高さのみを指定し、幅は指定しません。 3. a タグで背景画像を設定した後、左の半円と同じサイズの padding-left 値を指定します (これにより、左の背景は変更されず、中央の背景を引き伸ばすことができます)。 4. spanタグは、幅を指定せずに背景画像も指定し、画像の右半分を表示するためにpadding-right値を指定します(画像の位置が右に設定されている場合)。 具体的なコードは次のとおりです。 { 色: 白; 行の高さ: 33px; マージン: 100px; 表示: インラインブロック; テキスト装飾: なし; /* a は幅を指定できません*/ /* */ 高さ: 33px; 背景: url(Images/vx.png) 繰り返しなし; 左パディング: 15px; } スパンの 表示: インラインブロック; 高さ: 33px; 背景: url(Images/vx.png) 繰り返しなし 右; 右パディング: 15px; } spanの背景は右に指定する必要があります <a href="#"> <span>一</span> </a> <a href="#"> <span>一文</span> </a> <a href="#"> <span>一文</span> </a> <a href="#"> <span>長い文章</span> </a> <a href="#"> <span>超超超超超長い文章</span> </a> 結果は次のように表示されます span タグ内のテキストの長さが変わると、背景画像が伸びることがわかります。 要約する 上記は、私が紹介した CSS でスライドドアを実装する方法のサンプルコードです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: HTML チュートリアル: よく使われる HTML タグのコレクション (6)
>>: Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します
MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例最近のプロ...
目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...
以前の開発では、クラス、名前などの HTML のデフォルト属性を使用していました。 Huawei社の...
応答性を実現するための object.defineProperty の理解observe/watch...
1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...
Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...
目次1. 正規表現とは何か1. 正規表現の特徴2. 正規表現の使用2. 正規表現における特殊文字1....
ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...
準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...
LinuxにMySQLがすでにインストールされているかどうかを確認する sudo service m...
この記事では、Fedora 28 に i3 をインストールして簡単に設定する方法を説明します。 1....
MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...
最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...
xhtml+css のウェブサイト再構築、ウェブ標準などについては、記事が多すぎるので繰り返しません...
Portainer は、Docker ホストと Docker Swarm クラスターの管理に使用でき...