Question

 <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;到body标签，它就像fb标题覆盖整个页面顶部没有空格或无知破坏或任何类似的东西也是它的跨浏览器所以非常感谢。谢谢所有帮助我的用户

Answer 1

如果您的意思是“粘性”标题，请使用position：fixed

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

您可能需要定义宽度，z-index或其他任何特定于您的设计的内容，但这是基本想法。

如果你不是说粘性，那么威廉可能会得到正确答案。

Answer 2

在正文中将边距设置为0px

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

这将删除身体周围的任何空白

如果您希望导航栏跨越整个页面的顶部，请尝试将宽度设置为100％

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

这会在页面顶部形成一个Magenta栏。不确定你想要的高度，所以我把它变成了自动，所以它会根据内容重新调整大小。然后，您可以将徽标图像放在此div中。

Answer 3

您需要将margin: 0;放入正文标记中。我建议使用您可以在谷歌中找到的重置样式来重置浏览器放置的所有空格。

使CSS导航栏覆盖顶部

3 个答案: