-1 
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="stylesheets\sets1.css">
 </head>
 <style type="text/css"> 
body                                                                   /* site bg color    */
     {
     margin: 0; 
     background-color:#b0c4de
     }

 #navbar ul { 
    margin: 0; 
    padding: 5px; 
    cellspacing: 0;
    cellpadding: 0;
    border: 0;
    list-style-type: none; 
    background-color: #8B008B; 
    } 

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color: white; 
    background-color: #8B008B; 
    } 

#navbar ul li a:hover { 
    color: #0EC6D7; 
    background-color: #8B008B; 
    } 

</style> 
</head> 
 <body> 
  <div id="navbar"> 
     <ul> 
     <li><a href="http://"><img src="images/logo.png" alt="Site Logo" height="50" width="68"></img></a></li> 
     <li><a href="#">Forum's</a></li> 
     <li><a href="#">Chat's</a></li> 
     <li><a href="#">Login</a></li> 
     <li><a href="#">Sign up</a></li> 
  </ul> 
</div> 
</body> 
</html>

追加マージン：0; ボディタグに、それはページの上部全体をカバーするfbヘッダーのように機能し、空白や無知な破損など、クロスブラウザもありません。これを手伝ってくれたすべてのユーザーに感謝します。

4

3 に答える 3

3

本文のマージンを0pxに設定します

 body{
 margin:0px;
 background-color:#b0c4de
 }

これにより、体の周りの空白が削除されます

ナビゲーションバーをページ全体の上部に配置する場合は、幅を100％に設定してみてください

 #navbar{
 position:relative;
 width:100px;
 height:auto;
 background-color: #8B008B; 
 }

これにより、ページの上部にマゼンタのバーが作成されます。必要な高さがわからないので、自動に設定して、コンテンツに応じてサイズを変更します。次に、このdiv内にロゴ画像を配置できます。

于 2013-01-12T00:27:47.347 に答える
3

「スティッキー」ヘッダーを意味する場合は、position：fixedを使用してください

#navbar{
    position:fixed;
    top:0;
    left:0;
}

幅やzインデックスなど、デザインに固有の定義が必要になる場合がありますが、これが基本的な考え方です。

あなたがねばねばすることを意味しなかったなら、多分ウィリアムは正しい答えを得ました。

于 2013-01-12T00:20:12.760 に答える
-1

margin: 0;ボディタグを入れる必要があります。私はあなたがグーグルで見つけることができるリセットスタイルを使用してブラウザが置くすべてのスペースをリセットすることをお勧めします。

于 2013-01-12T00:21:38.517 に答える