引き戸を実装する 3 つの方法_html/css_WEB-ITnose

カタログ [1] 定義 [2] ケース効果 [3] 切断 [4] 3 層ネスティングと 2 層ネスティングの絶対位置決めの実装 [5] 効果

定義

border-radius が登場する前は、実装スライドドアを使用すると、角が丸い効果が得られます。スライディング ドアは、背景画像の積み重ね機能を利用し、背景画像を重ねてスライドさせて特別な効果を生み出すことができます。

ケース効果

カット写真

実装方法

スライドドアを実装するには、3層ネスティング、2層ネスティング、および絶対配置の3つの方法があります。

3 層ネスト

3 層ネストでは、テキストは最も内側の div にのみ書き込むことができ、大きな画像やナビゲーションなどの高度な拡張要件に適しています。

【注意1】引き戸は様々なシーンに対応するために、左右の角が透明になっていて、中央を押すと透明な部分が透けて見えます。左右の隅の を押すと真ん中の色が表示されるので、中央に変更して左右を押し、左右が重ならないように中央の余白を使用するだけです。

[注2] 引き戸は幅適応型にする必要があるので、一番外側の

にfloatかinline-blockを使って内容によって幅が広がるようにしてください

.boxL{    display: inline-block;    background: url('boxL.png') no-repeat left 0 ;}.boxR{    background: url('boxR.png') no-repeat right 0;}.box{    background: url('boxM.jpg') repeat-x;    font: 14px/30px "宋体";    color: white;    padding: 1px 10px 0;    margin: 0 8px;}

<div class="boxL">    <div class="boxR">        <div class="box">关于我们</div>    </div></div>

2段階ネストの

2 レベルのネストでは、テキストは最も内側の div にのみ書き込むことができます。制限は、テキストが親 div の幅までしか到達できないことです。ボタン。

.boxR{    display: inline-block;    background: url('boxR.png') no-repeat right 0;}.boxB{    background: url('boxB.jpg') repeat-x;    font: 14px/30px "宋体";    color: white;    padding: 1px 10px 0 18px;    margin-right: 8px;}

<div class="boxR">    <div class="boxB">关于我们</div></div>    

Absolute Positioning

絶対配置で作られた引き戸は、IE6 では絶対配置された親の幅（高さ）が奇数の場合、その右（下）が表示されるため、互換性があります。要素は 1px の偏差があり、解決策はありません。

.boxL{    position: absolute;    top: 0;    left: -9px;    width: 9px;    height: 31px;    background: url('boxL.png') no-repeat right 0;}.boxR{    position: absolute;    top: 0px;    right: -9px;    width: 9px;    height: 31px;        background: url('boxR.png') no-repeat right 0;}.box{    position: absolute;    background: url('boxM.jpg') repeat-x;    font: 14px/30px "宋体";    color: white;    padding: 1px 10px 0;    margin: 30px;}

<div class="box">    <span>关于我们</span>    <div class="boxL"></div>    <div class="boxR"></div></div>    

効果を達成する

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。