浮动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局3</title>
<style>
*{ margin:0;padding:0;}

  /* 头部*/
.header{ height:60px; background:#CCC; margin:10px auto;}
.header .nav{ width:980px; height:60px; background:#999; margin:0 auto;}

/*广告位*/
.banner{ width:980px; height:400px; background:#999; margin:10px auto;}

/* 小广告位*/
.small{ width:980px;height:150px;background:#999;margin:10px auto;}

/* 主题部分*/
.main{ width:980px; height:650px;background:#CCC; margin:10px auto;}
.main .left{ width:320px; height:650px;background:#999; float:left;}
.main .middle{ width:320px; height:650px;background:#999; margin:0 10px;float:left;}
.main .right{ width:320px; height:650px;background:#999;float:left;}

/*底部*/
.footer{ background:#ccc;}
.footer .texter{ width:980px; height:60px; background:#999;margin:10px auto;}
</style>
</head>

<body>

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

  <div class="banner">轮播图</div>

  <div class="small">广告位</div>

  <div class="main">
<div class="left">左边盒子</div>
<div class="middle">中间盒子</div>
<div class="right">右边盒子</div>
  </div>

  <div class="footer">
<div class="texter">底部Copyright</div>
  </div>

</body>
</html>

潜意式 · 发表于 2017-1-12 17:59:49

完成没有问题哦，浮动布局实用性非常高，注意多理解和练习。

[作业] 浮动

共1个回复最后回复于 2017-1-12 17:59

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 浮动

共1个回复 最后回复于 2017-1-12 17:59

共1个回复最后回复于 2017-1-12 17:59