论坛
标题:
浮动
[打印本页]
作者:
lily525
时间:
2017-1-12 09:59
标题:
浮动
<!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
完成没有问题哦，浮动布局实用性非常高，注意多理解和练习。
欢迎光临 论坛 (http://bbs.qinxue.com/)
Powered by Discuz! X3.1