为什么我在标题背景上添加的颜色不可见？

时间：2017-10-10 12:54:08

标签： html css header background-color

尝试将背景颜色应用于标题，但为什么#header背景颜色不可见？我试过了

  

标题{背景：灰色;宽度：100％;保证金：0自动}

我也尝试了不同的颜色，但它似乎并没有起作用。我是这个领域的新手，所以任何帮助都将受到赞赏。我附上了html和css代码。

＆＃13;
＆＃13; 
* {
  margin: 0 auto
}

#slogan {
  background: #063540;
  color: white;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: small;
  width: 100%;
  padding-left: 8%;
}

#header {
  background: grey;
  width: 100%;
  margin: 0 auto
}

a {
  text-decoration: none;
}

#logo a {
  color: #063540;
}

#logo {
  float: left;
  padding-left: 8%;
  color: #063540;
  margin-top: 20px;
}

.navbar {
  float: right;
  top: 0px;
  padding-right: 20%;
  margin-top: 20px;
}

.navbar a {
  padding-left: 25px;
  color: #063540;
  font-size: 14pt;
}
＆＃13; 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>MyWebsite</title>
</head>

<body>
    <p id="slogan">We are creative agency</p>
    <div id="header">
        <div id="logo">
            <a href="/">
                <h1>MyWebsite</h1>
            </a>
        </div>
        <div class="navbar">
            <a href="/">Home</a>
            <a href="/">About</a>
            <a href="/">Services</a>
            <a href="/">Projects</a>
            <a href="/">Pages</a>
            <a href="/">Blog</a>
            <a href="/">Contact</a>
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

因为你的header中有浮动元素，所以你需要清除浮动元素。

当浮动元素位于容器框内时，问题就会发生，该元素不会自动强制容器的高度调整到浮动元素。当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除了。

请参阅此link以获取更多理解。

#header:before, #header:after {
    content: "";
    clear: both;
    display: table;
}

＆＃13;
＆＃13; 
*{
  margin: 0 auto
}
#slogan {
  background: #063540;
  color: white;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: small;
  width: 100%;
  padding-left: 8%;
}

#header {
  background: grey;
  width: 100%;
  margin: 0 auto
}
#header:before, #header:after {
  content: "";
  clear: both;
  display: table;
}
a {
  text-decoration: none;
}

#logo a {
  color: #063540;
}

#logo {
  float: left;
  padding-left: 8%;
  color: #063540;
  margin-top: 20px;
}

.navbar {
  float: right;
  top: 0px;
  padding-right: 20%;
  margin-top: 20px;
}

.navbar a {
  padding-left: 25px;
  color: #063540;
  font-size: 14pt;
}
＆＃13; 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>MyWebsite</title>
</head>

<body>
    <p id="slogan">We are creative agency</p>
    <div id="header">
        <div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
        <div class="navbar">
            <a href="/">Home</a>
            <a href="/">About</a>
            <a href="/">Services</a>
            <a href="/">Projects</a>
            <a href="/">Pages</a>
            <a href="/">Blog</a>
            <a href="/">Contact</a>
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

  

500s内的所有元素都是浮点数，因此#header会脱离正常的文档流。

方法1） 

#header

#header:after {
    content: '';
    display: block;
    clear: both;
}

            * { 
        margin: 0 auto
        
    }
    
    #slogan {
        background: #063540;
        color: white;
        padding: 20px;
        font-family: 'Open Sans', sans-serif;
        font-size: small;
        width: 100%;
        padding-left: 8%;
         
        
    }
    
    #header {
        background: grey;
        width: 100%;
        margin: 0 auto;

        }
        #header:after {
            content: '';
            display: block;
            clear: both;
        }
    
    a {
        text-decoration: none;
        
    }
    #logo a {
        color: #063540;
        
    }
    
    #logo {
        float: left;
        padding-left: 8%;
        color: #063540;
        margin-top: 20px;
        
    }
    
    .navbar {
        float: right;
        top: 0px;
        padding-right: 20%;
        margin-top: 20px;
        
        
    }
    
    .navbar a {
        padding-left: 25px;
        color: #063540;
        font-size: 14pt;
        
        
        
    }

方法2）

将<p id="slogan">We are creative agency</p> <div id="header"> <div id="logo"><a href="/"><h1>MyWebsite</h1></a></div> <div class="navbar"> <a href="/">Home</a> <a href="/">About</a> <a href="/">Services</a> <a href="/">Projects</a> <a href="/">Pages</a> <a href="/">Blog</a> <a href="/">Contact</a> </div> </div>插入html代码：

<br style="clear: both">
            * { 
        margin: 0 auto
        
    }
    
    #slogan {
        background: #063540;
        color: white;
        padding: 20px;
        font-family: 'Open Sans', sans-serif;
        font-size: small;
        width: 100%;
        padding-left: 8%;
         
        
    }
    
    #header {
        background: grey;
        width: 100%;
        margin: 0 auto;

        }

    a {
        text-decoration: none;
        
    }
    #logo a {
        color: #063540;
        
    }
    
    #logo {
        float: left;
        padding-left: 8%;
        color: #063540;
        margin-top: 20px;
        
    }
    
    .navbar {
        float: right;
        top: 0px;
        padding-right: 20%;
        margin-top: 20px;
        
        
    }
    
    .navbar a {
        padding-left: 25px;
        color: #063540;
        font-size: 14pt;
        
        
        
    }

答案 2 :(得分：1)

这种情况正在发生，因为标题中的子元素具有float属性，当元素具有float属性时，它们实际上不会呈现为块元素 https://stackoverflow.com/a/16568504/2894798 这就是为什么默认情况下你的标题高度为0，所以要修复它我会添加一个明确的修复属性，

＆＃13;
＆＃13; 
* {	
  margin: 0 auto;
}

#slogan {
  background: #063540;
  color: white;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: small;
  width: 100%;
  padding-left: 8%;
}

#header {
  background: grey;
  width: 100%;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

#logo a {
  color: #063540;
}

#logo {
  float: left;
  padding-left: 8%;
  color: #063540;
  margin-top: 20px;
}

.navbar {
  float: right;
  top: 0px;
  padding-right: 20%;
  margin-top: 20px;
}

.navbar a {
  padding-left: 25px;
  color: #063540;
  font-size: 14pt;
}
＆＃13; 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>MyWebsite</title>
</head>

<body>
    <p id="slogan">We are creative agency</p>
    <div id="header">
        <div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
        <div class="navbar">
            <a href="/">Home</a>
            <a href="/">About</a>
            <a href="/">Services</a>
            <a href="/">Projects</a>
            <a href="/">Pages</a>
            <a href="/">Blog</a>
            <a href="/">Contact</a>
        </div>
        <div style="clear:both;">
        </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题