0

私はデザインされたウェブページのレイアウトに命を吹き込むことに取り組んでいます。ちょっと変わったデザインかもしれないので、実現できるかどうかはわかりません。基本的に900pxの固定幅のコンテンツボックスを用意します。コンテンツ ボックスは、ページ本文の中央に配置されます。png がフェードするページに 2 つの垂直列を追加したいと考えています。左の png は、左側が黒一色、右側が透明になります。右側の png は、右側の黒一色から左側の透明にフェードします。2 つの png はそれぞれ 250px 幅になります。すべてが配置されると、レイアウトは左端と右端が薄くなっている紙のように見えるはずです。ただし、秘訣はページのサイズを変更することです。画面の幅が 1500px 未満の場合 (両方の列が部分的に画面の外に出ている場合)、列はコンテンツ ボックスの下にスライドせず、単純にゼロに縮小されます。以下の画像をご検討ください。黒枠が画面、青がコンテンツ、赤が列です。画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 以下の画像を検討してください。黒枠が画面、青がコンテンツ、赤が列です。画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 以下の画像を検討してください。黒枠が画面、青がコンテンツ、赤が列です。画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 柱はばらばらになり、色あせた外観は維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 柱はばらばらになり、色あせた外観は維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3]

** 画像を投稿できませんでした :(

4

1 に答える 1

0

jqueryとcss3を組み合わせることをお勧めします。

Jqueryを使用すると、メインコンテンツを中央に配置し、両側にdivを配置できます。CSS3を使用すると、画像を必要とせずに両側にグラデーションを付けることができます。唯一の欠点は、ブラウザがCSS3に準拠していない場合、グラデーションが表示されないことです。準拠していないのはIE8以前です。しかし、役立つアドオンがあります（ModenizrおよびIE Chromeタブ）

Jquery

$(document).ready(function(){
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

$(window).resize(function() {
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

左DivCSS

background-image: linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(90 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 90 90,
 right 90,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);

右DivCSS

background-image: linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(270 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 270 270,
 left 270,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);
于 2011-11-08T02:33:12.930 に答える