论坛

标题: 不知道为什么弹出了内容框。求指出。 [打印本页]

作者: coolz 时间: 2016-11-18 19:59
标题: 不知道为什么弹出了内容框。求指出。
不知道为什么弹出了内容框。求指出。<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动框架布局</title>
<style>
*{padding:0; margin:0;}
/*头部区域*/
.header { height:100px; background:#39f;}
.header .nav{ height:100px; width:980px; background:#06C; margin:0 auto;}

/*海报区域*/
.banner {height:500px; width:980px; background:#F90; margin:10px auto;}

/*主要内容区域*/
.main { height:400px; width:980px; background:#6F6;
margin:10px  auto;  }
#left {
height:400px;
  width:300px;
  background:#999;
float:left;
   }
#right-top-left{
height: 195px;
   width:330px;
   background: #999;
   float:left;
   margin-left:10px;
   }
#right-top-right {
height:190px;
   width:330px;
   background:#939;
   float:left;
   margin-left:10px;}
#right-bottom-left {
height: 190px;
   width:330px;
   background:#C03;
   float:left;
   margin:10px 0 0 10px;  }
#right-bottom-right {
height: 195px;
width:330px;
background:#69c;
   float:left;
   margin:10px 0 0 10px; }

/*底部区域*/
.footer{ height:100px;background:#C03;}
.footer .bottom { width:980px;height:100px; background:#F30; margin:0 auto;}
/*margin 的值在在默认情况下，元素之间的间隔不会叠加，中间的间距取决于两元素的最大值。*/

</style>

</head>

<body>

<div class="header">
<div class="nav"></div>
</div>

<div class="banner">
</div>


<div class="main">
<div id="left">left</div>
<div id="right-top-left">左上</div>
<div id="right-top-right">右上</div>
<div id="right-bottom-left">左下</div>
<div id="right-bottom-right">右下</div>
</div>


<div class="footer">
<div class="bottom">bottom</div>
</div>

</body>
</html>

作者: 潜意式 时间: 2016-11-19 17:07
#right-top-left{
      height: 195px;
      width:330px;
      background: #999;
      float:left;
      margin-left:10px;
这个div的高度应该是190px

欢迎光临论坛 (http://bbs.qinxue.com/)