无法为具有 id 的 div 元素设置背景颜色
我是网页设计的新手。在这个项目中，我试图用它们的 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回答
-
万千封印
您的代码中有一个错误的括号：#appetizer{ background-color: #009933;{ /* wrong bracket */代替#appetizer{ background-color: #009933;} -
倚天杖
这是一个工作版本，为简洁和外观做了一些修改。.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>
随时随地看视频慕课网APP
相关分类
JavaScript