スライドドアを実装するための CSS サンプルコード
|
いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的に伸縮できることを意味します。つまり、テキストが増えると背景も長く表示されます。 それらのほとんどは、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の使い方を詳しく説明します
推薦する
IDEA に基づいて Tomcat サーバーを展開するための詳細な手順
目次導入ステップ1ステップ2: アイデアで動的Webプロジェクトを作成するステップ3: Tomcat...
Zookeeper 不正アクセス テストの問題
目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...
MySQL 8.0.13 手動インストールチュートリアル
この記事では、MySQL 8.0.13の手動インストールチュートリアルを参考までに紹介します。具体的...
Vuexの役割についての深い理解
目次概要コンポーネント間でデータを共有する方法Vuex の原則の紹介Vuexはコンポーネントのグロー...
MySQL InnoDBセカンダリインデックスのソート例の詳細な説明
ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...
Tkinterはjsキャンバスを使用してグラデーションカラーを実現します
目次1. RGBを使用して色を表す2. Tkinter キャンバスコンポーネント3. グラデーション...
Node.jsを使用してホットリロードページを実装する方法の詳細な説明
序文少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境...
js クロージャとガベージ コレクション メカニズムの例の詳細な説明
目次序文文章1. 終了1.1 クロージャとは何ですか? 1.2 クロージャの特性1.3 クロージャを...
CSS3 カスタムスクロールバースタイル::webkit-scrollbar サンプルコード詳細説明
Windows のデフォルトのスクロール バー スタイルは見苦しく、プロジェクト内でスクロール バー...
React における ref の一般的な使用法の概要
目次Refsとは何か1. 文字列型参照2. コールバック参照React.createRef() 4....
5つのCSSスクロール天井実装方法の比較（パフォーマンス向上版）
改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...
Nginx ベースの HTTPS ウェブサイトを設定する手順
目次序文：暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...
MySQL EXPLAIN ステートメントの使用例
目次1. 使用方法2. 出力結果1.id 2.選択タイプ3.表4.パーティション5.タイプ6.可能な...
HTML テーブルタグチュートリアル (46): テーブルフッタータグ
<tfoot> タグは、テーブル フッターのスタイルを定義するために使用されます。基本構...