2

特にラッパーとサイトの構造について疑問に思っています。ヘッダー画像 (ナビゲーションの下にある) を除いて、すべてのコンテンツが 960 ピクセル以内に含まれています。下に画像を添付しました。

私が正しく理解していれば、ヘッダー画像をラッパーの外側に配置する場所をいくつか読んだことがあります。

これを行うには非常に多くの方法があることは知っていますが、本当にきれいにして最近の基準に準拠したいと思います。私は HTML5 を使用していますが、それほど重要ではありません。

レイアウト

4

2 に答える 2

4

ラッパー クラスを作成できますが、必要な場合にのみ使用してください。したがって、あなたの場合は次のようになります...

  • ロゴ・ナビ（ラッパークラス）
  • ヘッダ
  • コンテンツ (ラッパー クラス)
  • フッター（幅広のもの）
  • フッター (ラッパー クラス)

そうすれば、切り取られたように見えるかもしれませんが、希望する動作が得られます。ラッパー内の要素は「通常の」幅を持ち、他の要素はデフォルトで全幅になります。

ここでそのしくみを参照してください。

これは必須です (また、SO によって義務付けられています):

div {background: #eee; height: 50px;}
div.wrapper {background: #ccc; width: 200px; margin: auto;}

編集

そして、フッターを 2 つの別々の部分ではなく (完全に理にかなっています) 一緒に保持したいので、これを行うことができます。これも機能します。

<div id="footer">
    <div class="wrapper"></div>
</div>

また、幅の広い要素をスケーリングしたくない場合は、それらの幅も定義できます...それらのより大きなラッパーを持つように。背景を中央に配置することもできます (@kennypu に感謝)。ラッパーを飼いならしたら、たくさんのオプションがあります。

注: ラッパーはサイト全体ではなく一部のみをラップするため、適切な用語を使用していない可能性があります (おそらく、リミッターと考えることができます)。

于 2013-08-14T22:08:26.460 に答える
3

次のようにコードを実行できます。

HTML

<div class="page">
    <div class="header wrapper">
        <div class="inner-content">...</div>
    </div>
    <div class="main wrapper">
        <div class="inner-content">...</div>
    </div>
    <div class="footer wrapper">
        <div class="inner-content">...</div>
    </div>
</div>

CSS

.wrapper { width: 100%; }
.wrapper.header { background-color: #00f; }
.wrapper.footer { background-color: #f00; }

.inner-content { width: 960px; margin: 0 auto; }

ラッパー クラスには内部コンテンツが含まれ、各ラッパーに色を適用できます。内部コンテンツは、テキストと画像のコンテナーとして機能します。

于 2013-08-14T22:10:54.683 に答える