我无法更改html部分的背景颜色

-1

我在使用html创建的3个部分中添加背景色时遇到了一些问题。你可以看一看，让我知道我在做什么错误的编码？我只能在html style =“background-color：”无论颜色“中写入时看到背景颜色。看起来像CSS没有应用我反复尝试的更改。我无法更改html部分的背景颜色

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    width: 80%; 
 
    overflow: hidden; 
 
} 
 

 
header { 
 
    border-bottom: 1px solid green; 
 
    background-color: #e7e7e7; 
 
} 
 

 
#logo { 
 
    float: left; 
 
    margin-top: 20px; 
 
} 
 

 
nav { 
 
    float: right; 
 
    margin-top: 20px; 
 
} 
 

 
nav li { 
 
    float: left; 
 
    display: inline; 
 
    list-decoration: none; 
 
    padding: 20px 20px 20px 20px; 
 
} 
 

 
nav li a { 
 
    color: #333333; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
} 
 

 
--------- #firstpart { 
 
    margin-top: 40px; 
 
    height: 300px; 
 
    background-color: fuchsia; 
 
} 
 

 
.cajaslider { 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    float: left; 
 
    border: 1px solid navy; 
 
    height: 400px; 
 
    width: 55%; 
 
} 
 

 
#twitter { 
 
    padding-top: 5px; 
 
    margin-left: 40px; 
 
    float: right; 
 
    height: 300px; 
 
    width: 38%; 
 
} 
 

 
#columns { 
 
    width: 65%; 
 
} 
 

 
#secondpart { 
 
    padding-top: 20px; 
 
    height: 425px; 
 
    background-color: #e44d26; 
 
} 
 

 
#secondpart h3 { 
 
    font-size: 20px; 
 
    text-align: left; 
 
} 
 

 
.text { 
 
    float: left; 
 
    width: 30%; 
 
    padding-right: 25px; 
 
    text-align: justify; 
 
} 
 

 
.text a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
.text1 { 
 
    float: left; 
 
    width: 30%; 
 
    padding-right: 10px; 
 
    border-right: 1px solid maroon; 
 
    text-decoration: none; 
 
} 
 

 
.text1 a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
.text1 p { 
 
    text-align: left; 
 
    color: white; 
 
} 
 

 
.text p { 
 
    text-align: left; 
 
    color: white; 
 
} 
 

 
.button1 { 
 
    padding: 5px; 
 
    margin-top: 5px; 
 
    border-bottom-color: maroon; 
 
} 
 

 
#formright { 
 
    float: right; 
 
    width: 32%; 
 
    height: 350px; 
 
    padding: 15px 10px 15px 10px; 
 
    background-color: #666666; 
 
    color: white; 
 
    margin-right: -45px; 
 
    border-radius: 5%; 
 
    border-right: 5%; 
 
} 
 

 
#entries { 
 
    margin-left: 15px; 
 
    margin-top: -25px; 
 
} 
 

 
#entries input[type=name] { 
 
    padding: 4px; 
 
    height: 25px; 
 
    width: 250px; 
 
} 
 

 
#hr1 { 
 
    margin-top: -40px; 
 
} 
 

 
------- footer { 
 
    margin-top: 20px; 
 
} 
 

 
#socialmedia { 
 
    margin-left: 250px; 
 
    margin-top: 30px; 
 
} 
 

 
#socialmedia li { 
 
    float: left; 
 
    list-style: none; 
 
    display: inline; 
 
    width: 20%; 
 
    padding: 20px 5px 20px 5px; 
 
} 
 

 
<!------------------------About page--------------------->#aboutsect { 
 
    height: 300px; 
 
    background-color: yellow; 
 
} 
 

 
.caja { 
 
    margin-top: 20px; 
 
    height: 550px; 
 
    border-bottom: 1px solid green; 
 
} 
 

 
#mainimg { 
 
    float: left; 
 
    width: 35%; 
 
    background-color: white; 
 
} 
 

 
#content { 
 
    float: right; 
 
    width: 45%; 
 
    background-color: white; 
 
} 
 

 
-------- section h2 { 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 

 
section .button1 { 
 
    margin-top: 20px; 
 
} 
 

 
.caja2 { 
 
    margin-top: 20px; 
 
    padding-left: 150px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.person { 
 
    float: left; 
 
    margin-left: 30px; 
 
    width: 30%; 
 
    margin-bottom: 40px; 
 
} 
 

 
section img { 
 
    border-radius: 50%; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
section h3 { 
 
    font-size: 15px; 
 
    margin-left: 10px; 
 
    margin-top: 20px; 
 
} 
 

 
section p.centrado { 
 
    font-size: 15px; 
 
    margin-left: 5px; 
 
    margin-top: 20px; 
 
} 
 

 
section p { 
 
    font-size: 15px; 
 
    margin-left: -40px; 
 
    margin-top: 20px; 
 
} 
 

 
------- #clients { 
 
    height: 200px; 
 
    background-color: yellow; 
 
} 
 

 
#clients h3 { 
 
    margin-top: 60px; 
 
} 
 

 
#cajaotra { 
 
    margin-top: 20px; 
 
    height: 200px; 
 
    border-bottom: 1px solid green; 
 
    margin-left: 150px; 
 
} 
 

 
.client1 { 
 
    margin-top: 30px; 
 
    padding: 10px; 
 
    margin-right: 70px; 
 
} 
 

 
------ <!------------------------Service page---------------------!>#services { 
 
    height: 300px; 
 
} 
 

 
#cajafoto { 
 
    height: 300px; 
 
    border-bottom: 1px solid blue; 
 
} 
 

 
.equip { 
 
    height: 200px; 
 
    width: 80%; 
 
    margin-left: 100px; 
 
    margin-top: 20px; 
 
} 
 

 
----------------- #fraccion { 
 
    height: 400px; 
 
} 
 

 
#cajaourservices { 
 
    margin-top: 50px; 
 
    height: 200px; 
 
} 
 

 
#ourservices { 
 
    float: left; 
 
    width: 60%; 
 
} 
 

 
#wantmore { 
 
    float: right; 
 
    width: 30%; 
 
} 
 

 
----------------- #serviceimages { 
 
    height: 400px; 
 
} 
 

 
#cajaimagenes { 
 
    height: 300px; 
 
    margin-top: 30px; 
 
} 
 

 
.train { 
 
    width: 25%; 
 
    margin-left: 20px; 
 
    padding: 30px; 
 
    float: left; 
 
}

<body> 
 
    <header> 
 
    <div class="container"> 
 
     <div id="logo"> 
 
     <a href="http://www.elpais.com"> 
 
      <img src="bottle2.jpg" title="bottle" height="50" width="50"></a> 
 
     <p>Drink Me</p> 
 
     </div> 
 

 
     <nav> 
 
     <ul> 
 
      <li><a href="http://www.elmundo.es">Home</a></li> 
 
      <li><a href="http://www.elmundo.es">About Us</a></li> 
 
      <li><a href="http://www.elmundo.es">Our Wines </a></li> 
 
      <li><a href="http://www.elmundo.es">Contact</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 

 

 
    <section id="aboutsect"> 
 
    <div class="container"> 
 
     <div class="caja"> 
 
     <div id="mainimg"> 
 
      <img src="circle.jpg" alt="the team"> 
 
     </div> 
 

 
     <aside id="content"> 
 
      <h2>Title</h2> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem 
 
      Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
      <button class="button1" type="submit">Read More</button> 
 

 
     </aside> 
 
     </div> 
 
    </div> 
 
    </section> 
 

 
    <section id="meet"> 
 
    <div class="container"> 
 
     <h3>MEET THE TEAM</h3> 
 
     <hr> 
 
     <div class="caja"> 
 

 
     <div class="caja2"> 
 

 

 
      <div class="person"> 
 
      <img src="rostro.jpg"> 
 
      <h3>James Keating</h3> 
 
      <p class="centrado">Profile Description</p> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
 
      </div> 
 
      <div class="person"> 
 
      <img src="rostro.jpg"> 
 
      <h3>James Keating</h3> 
 
      <p class="centrado">Profile Description</p> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
 
      </div> 
 
      <div class="person"> 
 
      <img src="rostro.jpg"> 
 
      <h3>James Keating</h3> 
 
      <p class="centrado">Profile Description</p> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
 
      </div> 
 
     </div> 
 

 
     <br> 
 
     <br> 
 
     <div class="caja2"> 
 

 
      <div class="person"> 
 
      <img src="rostro.jpg"> 
 
      <h3>James Keating</h3> 
 
      <p class="centrado">Profile Description</p> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
 
      </div> 
 
      <div class="person"> 
 
      <img src="rostro.jpg"> 
 
      <h3>James Keating</h3> 
 
      <p class="centrado">Profile Description</p> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
 
      </div> 
 
      <div class="person"> 
 
      <img src="rostro.jpg"> 
 
      <h3>James Keating</h3> 
 
      <p class="centrado">Profile Description</p> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 

 
    <section id="clients"> 
 
    <div class="container"> 
 
     <h3>OUR CLIENTS</h3> 
 
     <div id="cajaotra"> 
 

 
     <img class="client1" src="client1.jpg"> 
 
     <img class="client1" src="client1.jpg"> 
 
     <img class="client1" src="client1.jpg"> 
 
     <img class="client1" src="client1.jpg"> 
 
     <img class="client1" src="client1.jpg"> 
 
     </div> 
 
    </div> 
 
    </section> 
 

 
    <footer> 
 
    <div class="container"> 
 
     <ul id="socialmedia"> 
 
     <li><a href="http:www.facebook.com">Facebook<img src="facebook.png" height="24" width="24"></a></li> 
 
     <li><img src="facebook.png" height="24" width="24"><a href="http:www.facebook.com">Twitter</a></li> 
 
     <li><img src="facebook.png" height="24" width="24"><a href="http:www.facebook.com">LinkedIn</a></li> 
 
     </ul> 
 
    </div> 
 

 
    </footer> 
 

 
</body>

来源

2017-10-17 Irene Yo

看起来好像你没有将'id'标记添加到HTML中的相应元素。 – Baruch

你的意思是？ #clients {高度：200像素; background-color：yellow;}我不太明白......它应该是什么样子？我也尝试过＃section {height：200px;背景颜色：黄色;}并仍然没有工作... –

请参阅我的答案，希望是足够清楚。 – Baruch

删除所有线，并从你的CSS 线条，这些都不是有效的CSS和可能会阻止你的CSS被正确应用。 CSS评论通常使用C语法（/* comment */）。

来源

2017-10-17 11:59:27

我无法更改html部分的背景颜色

回答

相关问题