0

私は実際に開発したいフォトショップでウェブサイトをデザインしました。私はhttp://illinoisstate.eduからウェブサイトをモデル化しました。基本的には、上部のグラデーション ヘッダー、中央の画像、および上部に浮かぶコンテンツが必要です。さまざまな css スタイルと位置の種類を使用していくつかの方法を試しましたが、効果が得られないようです。サイトを調査し、ダウンロードして、彼らがどのようにそれを行ったかを確認しようとしましたが、うまくいきませんでした. その効果を達成する方法を知っている人はいますか？

このリンクhttp://dev.connectionsquad.comは、私が持っているものを示しています。その厄介な色の div を背景の div の上に置きたいのですが、ウィンドウのサイズを縮小すると、背景が消えてコンテンツだけに集中したいのです。

4

2 に答える 2

1

背景を含む body タグ内に div を作成します (たとえば、 )。相対位置で配置し、幅と最小高さを定義します。その中に、他の div を使用して必要なさまざまな効果を入れます。position を使用してこれらの div を配置します。その後、最初の div の外側で body の内側に 2 つ目の div を作成します。それを配置し、この div にコンテンツを配置します。

次のようになります。

<body>
    <div class="background_wrapper">
        <div class="header"></div>
        <div class="midle_image"></div>
    </div>
    <div class="content_wrapper">
        More divs...
        content...
    </div>
</body>

編集: CSS の位​​置を使用して、最初のラッパー、ヘッダー、画像、および 2 番目のラッパーを調整します。個人的には、コンテンツ ラッパーには position:relative を使用し、バックグラウンド ラッパーには position:absolute を使用します。

于 2012-07-25T02:02:36.367 に答える
0

私の理解では、「真ん中の画像」は体の背景画像です。背景画像の y 位置を 232px に調整して、上からオフセットしました。フローティング エフェクトの場合、id 'body' の div に指定された box-shadow。

あなたの質問の2番目の部分についてはよくわかりません。「色付きの div」の意味を詳しく説明できれば、それが役に立ちます。コードとcssの内部を覗くためにfirebugを使用しました。まだ試していない場合は、これも試してみてください。お役に立てれば。

于 2012-07-25T01:58:57.473 に答える