html 新添加 标题 颜色,关于html：为什么我在标题背景上添加的颜色不可见？

本问题已经有最佳答案，请猛点这里访问。

试图对我的标题应用背景色，但为什么#header背景色不可见？我试过

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

我也尝试了不同的颜色，但似乎不起作用。我是这个领域的新手，所以任何帮助都会受到感激。我附上了HTML和CSS代码。

* {

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;

}

MyWebsite

We are creative agency

MyWebsite

Home

About

Services

Projects

Pages

Blog

Contact

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

当一个浮动的元素在一个容器框中时，这个元素不会自动强制容器的高度调整到浮动的元素。当一个元素浮动时，它的父元素不再包含它，因为该浮动已从流中移除。

请参考此链接了解更多信息。

#header:before, #header:after {

content:"";

clear: both;

display: table;

}

*{

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;

}

MyWebsite

We are creative agency

MyWebsite

Home

About

Services

Projects

Pages

Blog

Contact

我建议对您添加的代码添加更多解释；)

或者更准确地说，因为头中的所有内容都是浮动的。任何非浮动内容都会影响高度。

这是因为头中的子元素具有float属性，当元素具有float属性时，它们实际上不会呈现为块元素。https://stackoverflow.com/a/16568504/2894798这就是为什么在默认情况下，您的头高度为0，所以为了修复它，我将添加一个清晰的修复属性，

* {

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;

}

MyWebsite

We are creative agency

MyWebsite

Home

About

Services

Projects

Pages

Blog

Contact

All elements inside #header are float, so #header get out of normal flow of document.

方法1)

#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;

}

We are creative agency

MyWebsite

Home

About

Services

Projects

Pages

Blog

Contact

方法2)

将插入HTML代码：

* {

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;

}

We are creative agency

MyWebsite

Home

About

Services

Projects

Pages

Blog

Contact