如何更改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）

回答

相关问题