快捷导航
发新帖
返回列表
不知道为什么弹出了内容框。求指出。<!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>


举报 使用道具
| 回复

共1个回复 最后回复于 2016-11-19 17:07

勤币 18146   学币 398  
沙发
发表于 2016-11-19 17:07:48 | 只看该作者
#right-top-left{
        height: 195px;
         width:330px;
         background: #999;
         float:left;
         margin-left:10px;
这个div的高度应该是190px
举报 使用道具
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表