我不确定为什么背景颜色标签不适用于我的身体元素。我唯一能想到的是我把它覆盖了别的东西,但我似乎无法弄清楚出了什么问题。无论哪种方式,我只是试图将背景颜色更改为灰色。我还在学习,这只是我在freecodecamp上的第二个项目。
body{
background-color: grey;
padding-top: 70px;
}
header{
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0px 0px 10px 3px #555
}
#headerText{
color: white;
text-align: right;
}
#headerText2{
color: white;
text-align: center;
}
#headerImg{
padding: 20px 30px 0px 0px;
}
#headerImg img{
width: 100%;
height: 100%;
}
hr {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #aaa;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.vertical-align {
display: flex;
align-items: center;
}
#section2{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#section3{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#top-bar-img{
height: 80px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
#top-bar{
background-color: purple;
box-shadow: 0 0 10px 3px #555;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<header id="section1">
<div class="row vertical-align">
<div class="col-xs-1"></div>
<div class="col-xs-8" id="center">
<h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
<hr></hr>
<h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
</div>
<div id="headerImg" class="col-xs-3">
<img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
</div>
</div>
</header>
<div id="section2">
gfgf
</div>
<div id="section3">
gfgf
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分:5)
你正在使用Bootstrap,他们的CSS规则正在覆盖你的。使您的规则更具体:
html > body{
background-color: grey;
padding-top: 70px;
}
html > body{
background-color: grey;
padding-top: 70px;
}
header{
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0px 0px 10px 3px #555
}
#headerText{
color: white;
text-align: right;
}
#headerText2{
color: white;
text-align: center;
}
#headerImg{
padding: 20px 30px 0px 0px;
}
#headerImg img{
width: 100%;
height: 100%;
}
hr {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #aaa;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.vertical-align {
display: flex;
align-items: center;
}
#section2{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#section3{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#top-bar-img{
height: 80px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
#top-bar{
background-color: purple;
box-shadow: 0 0 10px 3px #555;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<header id="section1">
<div class="row vertical-align">
<div class="col-xs-1"></div>
<div class="col-xs-8" id="center">
<h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
<hr></hr>
<h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
</div>
<div id="headerImg" class="col-xs-3">
<img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
</div>
</div>
</header>
<div id="section2">
gfgf
</div>
<div id="section3">
gfgf
</div>
</div>
</div>
</div>
</body>
在https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
了解有关CSS特异性的更多信息注意:您还应该不惜一切代价避免使用!important
。
答案 1 :(得分:0)
我想我能帮到你,使用重要(即背景颜色:灰色!重要;)来覆盖 bootstrap 属性
body{
background-color: grey ! important;
padding-top: 70px;
}
header{
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0px 0px 10px 3px #555
}
#headerText{
color: white;
text-align: right;
}
#headerText2{
color: white;
text-align: center;
}
#headerImg{
padding: 20px 30px 0px 0px;
}
#headerImg img{
width: 100%;
height: 100%;
}
hr {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #aaa;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.vertical-align {
display: flex;
align-items: center;
}
#section2{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#section3{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#top-bar-img{
height: 80px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
#top-bar{
background-color: purple;
box-shadow: 0 0 10px 3px #555;
}
&#13;
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<header id="section1">
<div class="row vertical-align">
<div class="col-xs-1"></div>
<div class="col-xs-8" id="center">
<h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
<hr></hr>
<h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
</div>
<div id="headerImg" class="col-xs-3">
<img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
</div>
</div>
</header>
<div id="section2">
gfgf
</div>
<div id="section3">
gfgf
</div>
</div>
</div>
</div>
</body>
&#13;
答案 2 :(得分:-1)
您应该尝试将!important
添加到背景颜色行的末尾。这将覆盖bootstrap的本机背景颜色。