基本信息
源码名称：CSS 双飞翼布局 例子
源码大小：2.09KB
文件格式：.html
开发语言：CSS
更新时间：2013-07-02
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />    
<title>PE Layout Example 3</title>
<link rel="stylesheet" href="reset.css" type="text/css" media="screen" />
<style type="text/css">
    body { font: 22px/1.5 Georgia, sans-serif; color: #333; min-width: 500px; }
    a { outline: none; text-decoration: none; color: #8CD0D3; }
    a:visited { color: #8CD0D3; }
    pre { font: 12px 'Courier New', monospace; }

    .main { background: #D6D6D6; }
    .sub { background: #E79F6D; }
    .extra { background: #77BBDD; }

    #hd, #ft {
        height: 50px;
        background: #666; color: #eee;
        text-align: center;
    }
    #ft { height: 40px; }

    /* core layout css */
    .main {
        float: left;
        width: 100%;
    }
    .sub {
        float: left;
        width: 190px;
        margin-left: -100%;
        position: relative;
        left: -190px;
    }
    .extra {
        float: left;
        width: 230px;
        margin-left: -230px;
        position: relative;
        right: -230px;
    }
    .main, .sub, .extra {
      /*  padding-bottom: 5000px;
	  margin-bottom: -5000px;
	  */
    }
    
    #bd {
        padding: 0 230px 0 190px;
    }

    #bd { overflow: hidden; _zoom: 1; }

</style>
</head>
<body>

<div id="page2">
    <div id="hd">
        <p>Header</p>
    </div>
    <div id="bd">
        <div class="main">
            <p>Main</p>
            <pre>
.main {
    float: left;
    width: 100%;
}
            </pre>
        </div>
        <div class="sub">
            <p>Sub</p>
            <pre>
.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
}
            </pre>
        </div>
        <div class="extra">
            <p>Extra</p>
            <pre>
.extra {
    float: left;
    width: 230px;
    margin-left: -230px;
}
            </pre>
        </div>
    </div>
    <div id="ft">
        <p>Footer</p>
    </div>
</div>

</body>
</html>