我是网页设计的新手。在这个项目中，我试图用它们的 id 为 5 个 div 元素设置背景颜色。其中 3 个有效，但最后 2 个 div（饮料和食物）没有变色。我还尝试重新排列和重命名元素或将元素更改为 p 标签，但它们都有同样的问题。这是我的代码和结果：<html> <head> <style> body { padding:0px; margin:0px; } #navigationbar { width:100%; height:131px; position:absolute; top:526px; } .d1 { font-weight:bold; text-align:center; font-size:20pt; width:20%; height:100%; float:left; margin:0px; } .p1 { margin-top:65px; } #breakfast { background-color:red; } #sweets { background-color:#ff1a1a; } #appetizer { background-color:#009933; { #food { background-color:lime; } #drink { background-color:blue; } </style> </head> <body> <div id="navigationbar"> <div class="d1" id="breakfast"> <p class="p1"> Breakfast </p> </div> <div class="d1" id="sweets"> <p class="p1"> Sweets </p> </div> <div class="d1" id="appetizer"> <p class="p1"> Appetizer </p> </div> <div class="d1" id="drink"> <p class="p1"> Drink </p> </div> <div class="d1" id="food"> <p class="p1"> Food </p> </div> </div> </body></html>
2 回答
万千封印
TA贡献1891条经验 获得超3个赞
您的代码中有一个错误的括号：
#appetizer
{
background-color: #009933;
{ /* wrong bracket */
代替
#appetizer
{
background-color: #009933;
}
倚天杖
TA贡献1828条经验 获得超3个赞
这是一个工作版本，为简洁和外观做了一些修改。
.d1 { text-align: center; width: 20%; height: 100%; float: left; }
.p1 { margin-top: 65px; }
#breakfast { background-color: red; }
#sweets { background-color: skyblue; }
#appetizer { background-color: #009933; } /* <-- The issue was here */
#food { background-color: lime; }
#drink { background-color: blue; }
<div id="navigationbar">
<div class="d1" id="breakfast">
<p class="p1"> Breakfast </p>
</div>
<div class="d1" id="sweets">
<p class="p1"> Sweets </p>
</div>
<div class="d1" id="appetizer">
<p class="p1"> Appetizer </p>
</div>
<div class="d1" id="drink">
<p class="p1"> Drink </p>
</div>
<div class="d1" id="food">
<p class="p1"> Food </p>
</div>
</div>
添加回答
举报
0/150
提交
取消