我的网站上的标题问题

在我发布任何问题之前，我收到了一些批评，所以我现在想设计一个更好的问题。是啊。所以，我正在制作一个网站，并且我有一个导航标题。但是，在CSS中，我将div class =“header”的标题设置为color：black ;.我不知道为什么背景不黑并且不在那里。我做了一个jsfiddle。正如你在jsfiddle中看到的那样，头部不存在，当你向下滚动时，如你所见，头部不是白色的。有谁知道如何使标题变得牢固，或者层次结构中是否存在不一致？我的网站上的标题问题

.header { 
 
    position:relative; 
 
    top:-20px; 
 
    left:0px; 
 
    width:100%; 
 
    background-color:#000000; 
 
    border-left: 5px solid white; 
 
} 
 
.header ul li a { 
 
    color: black; 
 
    position: fixed; 
 
    top: 13px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    //background: #000000; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
a#strawpoll { 
 
    right: 215px; 
 
} 
 
a#previousblogs { 
 
    right: 95px; 
 
} 
 
a#aboutme { 
 
    right: 15px; 
 
} 
 
h1 { 
 
    text-align: left; 
 
    position: fixed; 
 
    left: 10px; 
 
    top: -10px; 
 
    color: black; 
 
} 
 
body { 
 
    position: relative; 
 
    top: 60px; 
 
    font-family: 'Raleway', sans-serif; 
 
    background-image: 
 
    //url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg'); 
 
    background-size: cover; 
 
    color: white; 
 
    text-align: center; 
 
    color: black; 
 
} 
 
a:link { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
.header a:hover { 
 
text-decoration: underline; 
 
} 
 
a:visited { 
 
    color: black; 
 
    text-decoration: none; 
 
}

<title>My Blog</title> 
 
\t <meta charset="utf-8"/> 
 
\t <link rel="stylesheet" type="text/css" href="blog.css"> 
 
     <link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png"> 
 
     <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
    \t <link type="text/css" rel="stylesheet" href="jquery.mmenu.css" /> 
 
    <body> 
 
<div class="header"> 
 
<div class = "navbar"> 
 
    <ul> 
 
     <li><a id = "strawpoll" href ="#"> Strawpoll </a></li> 
 
     <li><a id = "previousblogs" href ="#"> Previous Blogs </a></li> 
 
     <li><a id = "aboutme" href ="#"> About Me </a></li> 
 
    </ul> 
 
</div> 
 
\t <script src="app.js"></script> 
 
\t <h1><a href ="#">My Life</a></h1> 
 
</div> 
 
<p> 
 
texttext, yeah, I put this here to increase the page length, so that I can show you guys the header is not filled in. starting from here its all reandom stuff. 
 
<p> 
 
bopbopbopbopbopbopbob 
 
</p> 
 
<p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
<p> 
 
bopbopbopbopbopbopbob 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p> 
 
</p><p> 
 
bopbopbopbopbopbopbob 
 
</p> 
 
sapodksadksa 
 
daa 
 
</p>

这里是jsfiddle

添加的意见，如果我不清楚。希望我是。

来源

2016-07-07 RareKyurem

请粘贴您的代码在你的问题，谢谢。 – Raptor

您应该添加溢出：隐藏在你的.header

你应该对为什么工作更好的解释阅读本SO post。

来源

2016-07-07 04:16:07 VilleKoo

你的CSS需要调整，而且我也觉得.header类是在jquery.menu.css使用已经使我改变.header1

下面是一个工作示例。不知道这是你想要的。

.header1 { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    background-color: #000000; 
 
    border-left: 5px solid white; 
 
    height: 100px; 
 
} 
 
.header1 ul { 
 
    float: right; 
 
    margin-right: 20px; 
 
    list-style-type: none; 
 
    margin-top: 5px; 
 
} 
 
.header1 ul > li { 
 
    display: inline-block !important; 
 
    margin-right: 10px; 
 
} 
 
.header1 ul > li > a { 
 
    font-weight: bold; 
 
} 
 
.header1 > h1 { 
 
    text-align: left; 
 
    margin-left: 20px; 
 
} 
 
.content { 
 
    margin-top: 105px; 
 
} 
 
body { 
 
    position: relative; 
 
    top: 60px; 
 
    font-family: 'Raleway', sans-serif; 
 
    //background-image: url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg'); 
 
    background-size: cover; 
 
    color: white; 
 
    text-align: center; 
 
    color: black; 
 
} 
 
a:link { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: underline; 
 
} 
 
a:visited { 
 
    color: #cccccc; 
 
    text-decoration: none; 
 
}

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" /> 
 
<div class="header1"> 
 
    <ul> 
 
    <li><a id="strawpoll" href="#"> Strawpoll </a> 
 
    </li> 
 
    <li><a id="previousblogs" href="#"> Previous Blogs </a> 
 
    </li> 
 
    <li><a id="aboutme" href="#"> About Me </a> 
 
    </li> 
 
    </ul> 
 
    <h1><a href ="#">My Life</a></h1> 
 
</div> 
 
<p class="content"> 
 
    texttext, yeah, I put this here to increase the page length, so that I can show you guys the header is not filled in. starting from here its all reandom stuff. 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    <p> 
 
     bopbopbopbopbopbopbob 
 
    </p> 
 
    <p> 
 
     bopbopbopbopbopbopbob 
 
    </p> 
 
    </p> 
 
    <p> 
 
    bopbopbopbopbopbopbob 
 
    </p> 
 
    sapodksadksa daa 
 
</p>

来源

2016-07-07 04:25:02

<html> 
<title>My Blog</title> 
<meta charset="utf-8" /> 
<link rel="stylesheet" type="text/css" href="blog.css"> 
<link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png"> 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" /> 
<style> 
    body{ 
     margin: 0; 
     padding: 0; 
    } 
    .header{ 
     width: 100%; 
     position: relative; 
    } 
    .navbar{ 
     background: #000; 
     width: 100%; 
     overflow: hidden; 
     position: fixed; 
     top:0; 
    } 
    .navbar h1{ 
     float: left; 
     padding-left: 20px; 
    } 
    .navbar h1 a{ 
     color: #fff; 
     text-decoration: none; 
    } 
    .navbar ul{ 
     float: right; 
     line-height: 45px; 
     padding-right: 20px; 
    } 
    .navbar ul li{ 
     display: inline-block; 
    } 
    .navbar ul li a{ 
     color: #fff; 
     padding: 0 10px; 
     text-decoration: none; 
    } 
    .content{ 
     width: 100%; 
     float: left; 
     margin-top: 100px; 

    } 
</style> 

<body> 
    <div class="header"> 
     <div class="navbar"> 
      <h1><a href ="#">My Life</a></h1> 
      <ul> 
       <li><a id="strawpoll" href="#"> Strawpoll </a></li> 
       <li><a id="previousblogs" href="#"> Previous Blogs </a></li> 
       <li><a id="aboutme" href="#"> About Me </a></li> 
      </ul> 
     </div> 
    </div> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus totam ipsum laudantium laborum doloremque doloribus quas incidunt unde reprehenderit at, modi cum repellendus accusantium ea corrupti, magni ut provident dicta!Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
     </div> 


</body> 
</html>

来源

2016-07-07 06:30:50

我的网站上的标题问题

回答

相关问题