我無法更改 html 部分的背景顏色
[英]I can't change the background color of the html sections
問題描述
我在用 html 創建的 3 個部分中添加背景顏色時遇到了一些問題。 你能不能看看，讓我知道我在編碼上做錯了什么？ 當我在 html style="background-color: whatever color " 中寫入時，我只能看到背景顏色。 看起來 CSS 沒有應用我一遍又一遍地嘗試的更改。
* { 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>
1 個解決方案
解決方案1
1 已采納 2017-10-17 11:59:27
從您的 CSS 中刪除所有----行和<!-- xxx -->行，因為這些不是有效的 CSS 並且可能會阻止您的 CSS 正確應用。 CSS 注釋通常使用 C 語法（ /* comment */ ）。
無法更改背景顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.