0

現在、bigcommerce をいじっていて、ヘッダーのフッター構造を再作成しようとしています。ここで見ることができます：

http://thespeedfactory.mybigcommerce.com/

フッターを見ると、全幅ですが、コンテンツはその中央にあります。

ヘッダーをまったく同じにして、黒にピンク/白のハイライトを付けたいです。

私はビッグコマース内の構造を移動しようとしましたが、それがコンテナとマージンに基づいていることを知っているにもかかわらず、それを実行して希望どおりに表示するのに脳の障害があります.

任意のガイダンスをいただければ幸いです。

4

3 に答える 3

1

私があなたのことを正しく理解していれば、あなたは次のことを望んでいます:

  • ページの幅全体にまたがるヘッダー (#Header)
  • ページの幅全体にまたがるフッター (#ContainerFooter)
  • ヘッダー (およびフッターを同じスタイル (色など) にする)
  • コンテンツ領域 (#Wrapper) を固定幅のままページの中央に配置する

これを行うには、次の css を追加します。

#Container {width:100%;}
#Header {width:100%; margin:0, auto;}

上記の css により、ヘッダーは (その親コン​​テナーを介して) ブラウザー ページの幅を広げることができます。#Wrapper が左にシフトされていることがわかります。これを追加：

#Wrapper {margin:auto;)

これにより、#Wrapper が中央に配置されます。

構造が整っているはずです。これで、#Header に色などを追加して、フッターと一致させることができます。

于 2013-04-08T14:20:15.343 に答える
0

これはかなり基本的な html/css です。
div を作成し、その中にコンテナを配置してスタイリングを開始するだけです。

HTML:

<div id="header"> 
    <div id="container">
        <p>content</p> 
    </div>
</div>

CSS:

#header {
    width: 100%;
    height:400px;
    background:black;
    position:absolute;
    border-top:3px solid #ff25a7;
}
#container {
    width:90%;
    height:300px;
    margin:0 auto;
}
#container p {
    font-size:30px;
    padding:10px;
    color: #ff25a7;
}

開始するのに役立つjsFiddleを次に示します。

于 2013-04-08T14:17:25.707 に答える
-1

ヘッダーにフッターと同じクラスを与えてみてください。その後 (フッターの位置が の場合absolute bottom)、 を に設定positionします。absolute top:0px;

于 2013-04-08T13:59:59.783 に答える