2

中央の列に実際のコンテンツがあり、側面が装飾用である、ある種の3列の背景を持つWebサイトを作成したいと思います。

比較的人気のあるデザインのようです(ブログでよく見かけますが、多くのWebサイトで見られます)。ほとんどのTumblrブログは良い例であり、中央にコンテンツがあり、側面に色があります。ウィンドウのサイズを変更してもコンテンツのサイズは変わりませんが、側面は変わります。

CSSを使用して、側面が画像で構成されていることを除いて、同様のことをしたいと思います。効果的に3つの列を持つWebサイトが必要です。1つはコンテンツを保持するための特定の背景画像で構成される(固定幅の)中央にあります(背景画像は列全体をカバーするように並べて表示する必要があります。これは許容範囲です。画像はそのように設計されています。マナー)、および中央のコンテンツ列の両側に2つの列(これも背景のタイル画像で構成されます)。両側の列はサイズ変更可能である必要があり、中央のコンテンツ列のサイズを変更せずに、ページが拡大するにつれて画像が並べて表示される必要があります。問題は、この問題にどのように取り組むかについてのアイデアがあまりないことです(3列のレイアウトを作成する方法についてのガイドはたくさんありますが、タイル状の画像で3列の背景のようなものをカバーするものはありません)。

4

3 に答える 3

1

これを出発点として使用してみてください: http ://www.noupe.com/css/9-timeless-3-column-layout-techniques.html

于 2012-10-15T20:30:21.307 に答える
0

両方の側の列が同じタイル状の背景を使用している場合は、背景の位置でこれを行うことができると思います。

ページの上部中央を原点として、本文にタイル状の背景を設定します。

コンテンツ列として固定幅の中央に配置されたdivを作成します。divにもタイル状の背景を設定します。

ウィンドウを広げると、タイリングは両側で増加しますが、タイリングとdivが両方とも中央に配置されているため、それらは引き続き適切に整列します。

于 2012-10-15T20:45:50.467 に答える
0

このサイトはHTML5を使用していませんが、あらゆる種類のレイアウトの初期リソースとして最適です。レイアウトガラ(長所はHTMLが同じままで、CSSだけが変更されることです。短所は、レイアウトスケルトン以外の点です。独自のCSSを提供する必要がありますが、必要に応じてヘッダー、フッター、セクションタグを使用することで、これらのレイアウトをHTML5を使用するように変換するのは簡単です。)

于 2012-10-15T21:02:26.873 に答える