为什么我在主页的背景图片上看不到面板?



在我的项目中,我想在我的网页中间做一个面板。

面板是内容div,白色背景颜色在太一.jpg。

内容div中有四个部分div。

网页代码是这样的:

<body style="background:url(./image/taiyi.jpg); height:100%; width:100%;">
<style>
content{
top:400px;
left:400px;
width: 1200px;
height: 1200px;
background-color:white;
}
.content .upleft, .downleft{
width: 250px;
height: 250px;
float: left;
background-color: red;
}
.content .upright, .downright{
width: 250px;
height: 250px;
float: right;
background-color: blue;
}
</style>
<script type="text/javascript">
$(function() {
$("#header").load("header_02.html");
});
</script> 

<div id="header"></div>    
<div class="content">
<div class="upleft"></div>
<div class="upright"></div>
<div class="downleft"></div>
<div class="downright"></div>
</div>
<!--footer start-->
<div id="footer"></div>
<script>
$(function() {
$("#footer").load("../footer_02.html");
});
</script>
<!--footer end-->

现在我看到了蓝色和红色的div。但我还没有看到带有白色div 的内容div。

我试过:

content{
margin-top:40px;
margin-left:40px;
width: 1200px;
height: 1200px;
background-color:white;
}

content{
margin-top:40px;
margin-left:40px;
width: 1600px;
height: 900px;
background-color:white;
}

但也有失败。好像没什么问题,谁能帮我?

在 css 中声明content为类

.content{ //put dot to determine that it's class
margin-top:40px;
margin-left:40px;
width: 1600px;
height: 900px;
background-color:white;
}

最新更新