我無法更改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部分的背景顏色

回答

相關問題