Navbar div具有Position:fixed;时创建的空白;

我想去掉导航栏下页面中间的空白。但是，在尝试了很多东西之后，白色条仍然存在，我感到困惑。

这是我的代码：

html:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="reset.css"/>
</head>
<body>
    <div class="header">
        <div class="navbar">
        <ul>
            <li><a>About</a></li>
            <li><a>Projects I've worked on</a></li>
            <li><a>Impossible List</a></li>
            <li><a>Contact</a></li>
        </ul>
        </div>
        <!-- end navbar div-->
    <div class="content">
    <p id = "title">Srikant Devarajan</p>
    </div>
    <!--end content div-->
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>

</body>
<!--end body-->
</html>
<!--end html-->

这是我的CSS：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://fonts.googleapis.com/css?family=Lato:300);
html,body{
    height:100%;
}
.header{ 
  background: url(images/background5.jpg) no-repeat center center fixed; 
   background-size: cover;
   height:100%;
}
.navbar{
    color:white;
    list-style: none;
    font-family: "Roboto";
    text-align:center;
    padding:20px;
    background-color:black;
    opacity:1.0;
    filter: alpha(opacity=70);
    position:fixed;
    top:0;
    widows: 100%;
}
.navbar ul{
    list-style: none;
}
.navbar li{
    display: inline;
    padding:70px;
    color:#CCCCCC;
}
.navbar a:hover{
    color:#fff;
}
.nav a{
    display:inline-block;
    padding:10px;
    opacity:2.0;
}
#title{
    margin-top:110px;
    font-size:70px;
    text-align:center;
    color:white;
    font-family:'Lato';
}
.content p{
    margin-top:70px;
    font-size:35px;
    text-align:center;
    color:white;
    font-family:'Lato';
}

当您将某个东西定位为固定时，想象浏览器不再认为它占用空间。空白是由标题ID中的页边空白创建的。试着修改这个值，看看空白是否发生了变化。

编辑：确实。这是标题ID中的页边空白。

相关内容

最新更新

热门标签：