Question

在我的项目中，我想在网页首页的中间制作一个面板。

该面板的内容为taiyi.jpg上带有白色背景色的div。

内容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;
  }

但是也有失败。似乎没有错，谁可以帮助我？

Answer 1

在CSS中将content声明为类

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

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

1 个答案: