实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>经典三列布局之双飞翼</title>
<style>
div{ text-align:center;}
.header,.footer{ width:100%; height:60px; background:#999999; line-height:60px;}
.pagebody{ overflow:hidden; width:1000px; margin: auto;}
.wrap{ width:100%;float:left; background:#FF9966}
.wrap .main{ min-height:650px;}
.left,.right{ float:left; width:200px; min-height:650px;}
.left{ background:#00CC99; margin:0 -1000px}
.right{ background:#66FFFF; margin:0 -200px;}
</style>
</head>
<body>
<div class="header">
<div class="content">页头</div>
</div>
<div class="pagebody">
<div class="wrap">
<div class="main">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">底部</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
博客列表 >经典三列布局之双飞翼
经典三列布局之双飞翼
- A微信视频直播衡阳微生活的博客原创转载
- 2018年03月28日 13:41:10521浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
