0

Facebook、StackExchange、または Twitter の画面の上部など、トップバーがあり、ページの残りの部分 (下のもの/本体) とは異なる背景を使用したいと考えています。どうすればこれを達成できますか?

4

4 に答える 4

2

これで試してください

CSS

body { background:#252525; margin:0;padding:0;}
.headerStrip{ height:40px; width:100%; z-index:1001; background:#F00; position:absolute; position:fixed;}

Html : body タグの後に入れます

<div class="headerStrip"></div>
于 2012-10-22T05:05:44.190 に答える
2

このコードを使用できます：

<div id="topbar">

</div>

Position:fixed;Twitterのトップバーのように使えます

body{
    background: green;
}

#topbar{
    width:100%;
    background-color:blue;
    height:80px;
    position:fixed;
}
于 2012-10-22T05:10:49.347 に答える
1

これを実現する最善の方法は、CSS Background プロパティを使用することです。

たとえば、stackoverflow は次のような id を持つ div を使用して、上部の灰色のバーの背景色を設定しています。

<div id="custom-header"></div>

次に、css ファイルで background-color を次のように使用しています。高さにも注意してください。

#custom-header {
background-color: #EEE; <------------
height: 31px;
margin-bottom: -31px;
}

これにより、StackExchange ロゴの後ろを通過する灰色のバーが上部に表示されます。

CSS と Background (省略形) プロパティを介して body が白に設定されていることがわかります。

body {
background: white; <-------------
color: black;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 80%;
text-align: center;
}

フッター div は、7 ピクセルの実線の黒線に background (省略形) と border-top を使用することで、さらに一歩進んでいることがわかります。

#footer {
color: #444;
background: #777; <------------
border-top: 7px solid black; <------------
clear: both;
padding: 15px;
margin-top: 30px;
}

これは数年前のものですが、Net Tutsのこのようなチュートリアルを実行する価値があるかもしれません。

于 2012-10-22T05:30:07.310 に答える
1

header_block をラッパーの外に配置する必要があります

 <div id="header_block">
      ...... Header_block Contents
    </div>
   <div id="wrapper">
      ...... Entire Page
    </div>

CSS

   #header_block
     {
           position:fixed;
           width:100%;
           float:left;
      }

これでうまくいくはずです

于 2012-10-22T05:22:53.370 に答える