9

http://www.stumbleupon.com/

http://www.mixx.com/

これらのWebサイトはどちらも、コンテンツが中央に配置され、幅の80％のようにカバーされている間、ページ全体に背景ヘッダーが引き伸ばされており、レイアウトの他の部分とも完全に一致しています。

ヘッダーには1つだけでなく、2つの背景色があるため、これら2つのサイトに特に興味があります。

Webにはたくさんのチュートリアルがあると思いますが、検索するキーワードはありません。

4

9 に答える 9

7

プロパティでbackground-image設定されます：bodybackground-repeat

background-repeat: repeat-x;

詳細：http ：//www.w3schools.com/css/pr_background-repeat.asp

編集：コンテンツの中央揃えについて— <em>私は次のようにします：

<body>
<div id="wrapper">
  <!-- here is wrapper *everything* else -->
</div>
</body>

次にwidth、ラッパーのセットを値に設定します（ほとんどの場合960px）。次に、マージンをに設定すると0 auto、中央に配置されます。

#wrapper{
  margin: 0 auto;
}
于 2010-02-22T09:12:40.680 に答える
7

分析中stumbleupon.com:

「ヘッダー」は、実際には と の2 つのdivで構成さwrapperHeaderれwrapperNavます。この 2 つは背景色が異なります。これらの div には、CSS プロパティを持つ子がそれぞれ 1 つだけあります。

margin: 0 auto

これにより、水平方向のセンタリングが行われます。

このプロパティはコンテンツ div にも割り当てられるため、ヘッダー、ナビゲーション、およびコンテンツは常に中央に配置されます。もちろん、これにはこの要素の幅を設定する必要があります。

構造は次のようになります。

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

Firebug for Firefoxを入手すれば、自分で要素を簡単に分析できます。

于 2010-02-22T09:17:17.490 に答える
4

背景画像の追加には 2 つの欠点があります。

  1. ヘッダーの色を変更するたびに、Photoshop を開いてそこで色を変更し、CSS で再度変更する必要があります。

  2. ヘッダーの背景色をページ全体に広げたいのですが、フッターも同じようにしたい場合はどうすればよいでしょうか?

最も簡単な解決策は次のとおりです。

(すべてのヘッダー コンテンツとフッターで異なる色を使用できるように、ページ全体に色を広げる簡単な方法を作成するだけでなく、IE の二重マージンの問題からも解放されます (幅とマージンを使用する場合)同じ要素）。

index.html:

   <html> 
    <body id="body"> 
    <div id="header"> 
        <div class="container"> 
            <!-- header's content here -->
        </div><!-- .container --> 
    </div><!-- #header --> 
    <div id="content"> 
        <div class="container"> 
            <!-- main content here -->
    <div id="footer"> 
        <div class="container"> 
            <!-- footer's content here -->
        </div><!-- .container --> 
    </div><!-- #footer --> 
    </body> 
    </html>

スタイル.css:

.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}

#header {
    background: #EEE;
}

#content {
    background-color: #F9F9F9;
}

#footer {
    background-color: #333;
    color: #BBB;
    clear: both;
}

この例では、は要素を中央に配置し、幅も指定します。また、 #とには幅がないdiv.containerため、背景色がページ全体に広がる可能性があります。将来的には、 内の div にマージンとパディングを適用するだけで、将来 IE に関する多くの問題を解決できます。header, #content#footer.container

于 2010-02-22T09:30:26.993 に答える
2

これを行う簡単な方法があります。Google Chrome と Firefox の両方と互換性があります。IE はテストされていません。

CSS ファイル内:

body{
    overflow-x:hidden;
}

div#headerbg{
    width:110%;
    margin-left:-20px;
    background-color:black;
}

HTMLファイルで使用するだけです。これにポジショニングなどを追加できます。

于 2012-05-17T14:26:57.493 に答える
1

水平方向に設定された背景の繰り返しで、幅 1 ピクセルの背景画像を使用できます。

background-image:url('paper.gif');
background-repeat:repeat-x;

そして、好きなようにコンテンツを配置します。

于 2010-02-22T09:13:28.200 に答える
1

これは固定幅のレイアウトですが、左右のマージンが自動的に設定されます。これにより、ページ サイズがコンテンツの幅よりも広い場合、コンテンツ ブロック全体が中央に配置されます。

背景は、メニュー要素が実際にページの全幅を拡張しているように見せるために、繰り返し画像 (repeat-x) として設定されています。

于 2010-02-22T09:14:25.030 に答える
0

私はあなたが100％/ 80％の幅の違いについて話していると思います....

これは、開始するのに役立ちます。

<div id="header" style="width:100%; margin: 0px;">
   <!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
   <!-- content -->
</div>

コンテンツの margin: auto は、ブロックを中央に配置します。

アダムのように、背景の繰り返しを追加して、グラフィカルに楽しい要素を与えます.

于 2010-02-22T09:14:40.207 に答える
0

CSS 2 では、背景画像を引き伸ばすことはできません。背景画像の寸法を設定するためのプロパティはありません。X、Y、または両方の軸で繰り返すことができます。

CSS 3 では、そのストレッチが可能になります。

于 2010-02-22T10:15:05.407 に答える
0

大騒ぎすることなく、非常にシンプルです。

これを - body - と - div コンテナ - の間に貼り付けます - そこには他に何でも好きなものを入れることができますが、私のページでは次のようになっています:

<body>

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;  top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg"  id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%;   height:5px;">

<map name="ImageMapImageMap0">
</map>
</div>

<div container>

次に、top: px height: _px img src="yourfile/yourimg.jpgに必要な情報を変更します。重要なのは、次の高さ:_ _pxを忘れないことです。

他に必要なものはどこにもありません。それを試してみてください。

于 2014-01-30T02:26:06.173 に答える