0

ステージのようなページをデザインするように頼まれました。グラフィック要素は次のように配置されます。

[curtain repeat][left curtain][stage][right curtain][curtain repeat]

左のカーテン、ステージ、右のカーテンは画面中央で一定の幅を保ちます。ブラウザを水平方向に拡張する場合は、外側の「カーテンリピート」をそれぞれのカーテンに固定する必要がありますが、ブラウザの外側に向かって繰り返す必要があります。効果は端から端までのカーテンステージカーテンです。

さて、私が実装する必要があるもう1つのトリックは、左右のカーテンがステージに重なるか重なることです。そのため、ステージの右端に要素を配置すると、「右のカーテン」の一部が、その要素が部分的にカーテンの後ろにあるかのように重なります。

私はまだcssのトリックを学んでいますが、これは私の経験レベルを超えて複雑なので、ジャンプスタートを使用することができます。よろしくお願いします。

4

1 に答える 1

0

これは、画像を使用せず、bkg 色のみを使用した基本的な構造を突き刺したものです。

http://jsfiddle.net/dtYKL/

HTML:

<div class="theatre">

    <div class="content">
        <div class="curtain left">left curtain</div>
        <div class="stage">stage!</div>
        <div class="curtain right">right curtain</div>
    </div>

</div>

CSS:

body, html{
    margin:0;            
    width:100%;
    height:100%;
}

.theatre{
    width:100%;                
    background:#369; /* this is where you'd add your repeating curtain bkg */
}

.theatre .content{ /* this is your fixed-width stage content */
    position:relative;            
    width:600px;
    height:400px;
    margin: 30px auto; /* centers the content */        
}

.content .curtain{ /* set your common styles, dimensions, positions for left + right curtains */
    position:absolute;    
    width:100px;
    height:100%;
    text-align:center;    
}

.content .left.curtain{ /* position and add image for left curtain */
    left:0;
    top:0;    
    background:#963; /* this is where you'd add your left curtain image */
}

.content .right.curtain{ /* position and add image for right curtain */
    right:0;
    top:0;    
    background:#963; /* this is where you'd add your right curtain image */
}

.content .stage{
    width:100%;
    height:100%;
    border-bottom:5px solid #000000; /* this will simulate a stage floor, you can use a solid bkg image if you want */
    box-sizing:border-box; /* this is so the border added above won't add to the div height */
    background-color:#888888; /* this is the stage background */    
    text-align:center;    
}

このためのすべてのコンテンツをクラス .theater を使用して div 内にネストしました。このようにして、コンポジションの高さを指定できます。これが必要ない場合は、そのレベルの封じ込めを自由に削除して、「本文」を繰り返し背景カーテンとして使用してください。ご不明な点がございましたら、ご連絡ください。幸運を祈ります。:)

于 2012-11-06T17:14:24.723 に答える