CSS を使用してスライド ドアを実装するサンプル コード

スライディング ドア テクノロジは、ボックスの背景を自動的に伸縮させて、さまざまな長さのテキストに対応できることを意味します。次に、CSS を使用してスライド ドアを実装するためのサンプル コードを紹介します。必要な方は参考にしていただければ幸いです。

いわゆるスライディング ドア テクノロジとは、さまざまな長さのテキストに合わせてボックスの背景を自動的に伸縮できることを意味します。つまり、テキストが増えると、背景が長く表示されます。

WeChat ナビゲーション バーなどのナビゲーション バーでよく使用されます。

具体的な実装方法は次のとおりです。

1. 、それぞれのテキスト コンテンツは、タグとスパン タグ

<a href="#">
        <span></span>
    </a>

2で構成されます。 a タグは高さのみを指定し、幅は指定しません。

3. タグ 背景画像を設定した後、左の半円と同じサイズのパディング左値を指定します (これにより、左の背景は変更されず、中央の背景が引き伸ばされます)。

4. また、span タグは、幅を指定せずに背景画像を指定し、画像の右半分を表示するためのパディング右値を指定します (画像の位置が右に設定されている場合)。

具体的なコードは次のとおりです。

a {
            color: white;
            line-height: 33px;
            margin: 100px;
            display: inline-block;
            text-decoration: none;
            /* a不能给宽度 */
            /*  */
            height: 33px;
            background: url(Images/vx.png) no-repeat;
            padding-left: 15px;
        }
        
        a span {
            display: inline-block;
            height: 33px;
            background: url(Images/vx.png) no-repeat right;
            padding-right: 15px;
        }

span の背景は right

 <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実装スライディングドアのサンプルコードの全内容です。学習はすべての人に役立ちます。関連チュートリアルの詳細については、

CSS ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

CSS オンライン マニュアル

div/css グラフィック チュートリアル

以上がCSS を使用してスライド ドアを実装するサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。