如何更改box div的顏色（HTML）

我正在嘗試創建網站，並將我的信息分離爲多個框。我試圖改變每個盒子的顏色，但它不起作用。這是我的代碼。該和試圖改變div的顏色。如何更改box div的顏色（HTML）

感謝。

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Blank</title> 



***<!--Box--> 
    <style>.boxed { 
     border: 1px solid black ; 
     margin-top: 20px; 
     margin-left: 50px; 
     margin-right: 50px; 
     padding-left: 20px; 
      padding-right: 20px; 
    } 
     </style>*** 


    </head> 

    <body> 
    <main> 
    </main> 



    <font face="caslon"> 
    <color background: green> 
    <div class="boxed"> 
     <h1> <font face="caslon", style="font-weight:bold">How is electricity produced?</font></h1> 
    <p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p> 
    <p style="font-weight:normal">They include: </p> 
    </div> 
    </color> 


    <color background: red> 
    <div class="boxed"> 
     <h3><p style="font-weight:bold">Static electricity</p></h3> 
     <p style="font-weight:normal"> 
    Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity. 
    </p> 
    </div> 
    </color> 

    </font> 
    </body> 
    </html>

來源

2017-04-11 AEON

你甚至試過Google嗎？ – Mazz

您需要風格每div與background-color

嘗試將此style="background-color:YourColorCode;"添加到您的div。

有關font-face更好的理解，看到這個link

見下片段：

.boxed { 
 
     border: 1px solid black ; 
 
     margin-top: 20px; 
 
     margin-left: 50px; 
 
     margin-right: 50px; 
 
     padding-left: 20px; 
 
     padding-right: 20px; 
 
    }

<body> 
 
     <main> 
 
     </main> 
 
     <div class="boxed" style="background-color:green;"> 
 
     <h1><font style="font-weight:bold">How is electricity produced?</font></h1> 
 
    <p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p> 
 
    <p style="font-weight:normal">They include: </p> 
 
    </div> 
 
    <div class="boxed" style="background-color:red"> 
 
     <h3><p style="font-weight:bold">Static electricity</p></h3> 
 
     <p style="font-weight:normal"> 
 
    Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity. 
 
    </p> 
 
    </div> 
 
    </body>

來源

2017-04-11 06:44:56

你需要給每個元素id

<div id="box1"></div> 
<div id="box2"></div> 
<div id="box3"></div>

那麼你的CSS看起來像

#box1{ 
    background-color:red; 
} 
#box2{ 
    background-color:blue; 
}

希望這是有益的給你:)

來源

2017-04-11 06:42:16

您正在創建自定義顏色的標籤，而不是在div標籤這個使用樣式屬性的。

<div class="boxed" style="background-color:green"> 
</div>

來源

2017-04-11 06:46:56 Karan

如何更改box div的顏色（HTML）

回答

相關問題