ホームページ > 記事 > ウェブフロントエンド > CSS を使用してスライドドアを実装するサンプルコード

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

青灯夜游転載: 2018-10-09 17:15:492416ブラウズ

スライディングドアテクノロジは、ボックスの背景を自動的に伸縮させて、さまざまな長さのテキストに対応できることを意味します。次に、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 ビデオチュートリアルをご覧ください。

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

関連記事

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