Question

我克隆了我的网站original website以制作new website。在原始页面上，页面全部为白色，带有蓝色文本。在新页面上，我尝试添加

html {
background-color: red;

body {
color: #036;
font-size: 2rem;
background-color: #fff; }

这是原始页面的css

body {
color: #036;
font-size: 2rem;
background-color: #fff; }



 body {
 color: #036;
 font-size: 2rem;
 background-color: #fff; }

原始页面正常工作，但新页面未显示背景html红色，即使验证了html，整个页面也无法正确显示。你能解决这个问题吗？感谢

编辑我没有正确地提出我的问题。我希望它看起来类似于这个页面stnickporticons.com，其中颜色在html的外部，中间是全白的

Answer 1

查看“新网站”代码，您可以在页面底部看到一个红色条。您正在将background-color应用于html，而不应用于body

body {
 color: #036;
 font-size: 2rem;
 background-color: red; /*red*/
}

Answer 2

查看新页面的CSS，看起来您有一些语法错误导致页面无法正确格式化。

例如，在新页面上，您似乎没有关闭'html'样式标记。

html {
  background-color: red;
// Here you are missing the closing tag.

body {
  color: #036;
  font-size: 2rem;
  background-color: #fff; 
}

此外，您还想在体内设置“背景颜色”。此外，根据您最近的评论，您似乎需要两种不同的颜色。这是经过调整的CSS，希望能够得到您正在寻找的结果：

body {
  color: #036;
  font-size: 2rem;
  background-color: red;
}

.container {
  background-color: white;
}    

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #036;
}

.masthead img {
  width: 100%;
  height: 100%;
  padding-top: 5rem;
  height: calc(100% - 1px);
  background-image: url('images/Ahepa215-banner.jpg') no-repeat fixed center;
  background-size: cover;
}

Answer 3

我用这个解决了它

html {
  background-color: red;
}
body { 
  color: #036;
  font-size: 2rem;
  background-color: #fff; 
  width: 90%;
 margin: 0 auto
}

Bootstrap背景机身颜色白色容器+网站无法正确显示

3 个答案: