css+ div 实现框架布局

来源：互联网发布：手机vc编程软件编辑：程序博客网时间：2024/04/28 14:53
转载：http://blog.doyoe.com/
这里写图片描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>div仿框架布局之典型的两栏布局Version2.0（Private） - Powered by 飘零雾雨</title><meta name="Description" content="摆脱frameset的束缚，以div代替，通过css实现仿框架布局" /><meta name="Keywords" content="div布局, div仿框架布局, 两栏布局" /><meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" /><style type="text/css">html,body {    overflow: hidden;    height: 100%;    margin: 0;    padding: 0;    font: 14px/1.8 Georgia, Arial, Simsun;}html {    _padding: 110px 0;}#hd {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100px;    background: #999;}#bd {    position: absolute;    top: 110px;    right: 0;    bottom: 110px;    left: 0;    overflow: hidden;    width: 100%;    _height: 100%;}#side {    position: absolute;    top: 0;    left: 0;    bottom: 0;    overflow: auto;    width: 200px;    _height: 100%;    background: #666;}#main {    position: absolute;    _position: static;    top: 0;    right: 0;    bottom: 0;    left: 210px;    overflow: auto;    _overflow: hidden;    _height: 100%;    _margin-left: 210px;    background: #666;}#content {    _overflow: auto;    _width: 100%;    _height: 100%;}#ft {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    height: 100px;    background: #999;}/* 与布局无关，一些说明性内容样式 */.tit-layout {    margin: 30px 0 0;    font-size: 18px;    text-align: center;}.copyright {    font-weight: bold;    text-align: center;}#feature {    width: 200%;    line-height: 4;}#feature .hd {    padding: 20px 15px;}#feature .hd h2 {    margin: 0;    font-size: 16px;}#feature .bd ol {    margin-top: 0;}#feature .bd h3 {    margin: 0;    padding: 0 15px;    font-size: 14px;}#feature .ft {    padding: 10px 15px 30px;}</style></head><body>    <div id="hd">        <h1 class="tit-layout">div仿框架布局之典型的两栏布局Version2.0（Private）</h1>    </div>    <div id="bd">        <div id="side">侧边栏</div>        <div id="main">            <div id="content">                <div id="feature" class="feature">                    <div class="hd">                        <h2>div仿框架布局Version2.0的特征：</h2>                        <span>update: 2008.09.22</span>                    </div>                    <div class="bd">                        <h3>优点：</h3>                        <ol>                            <li>以div代替frameset，用css实现仿框架布局</li>                            <li>在web标准模式Standard Mode下运行</li>                            <li>兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器，没被列入的浏览器未测试</li>                            <li>内容栏区域可以允许出现宽为100%或超100%的元素，如：                                <p>&lt;div class=&quot;main&quot;&gt;&lt;div                                    style=&quot;width:100%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;</p>                                <p>&lt;div class=&quot;main&quot;&gt;&lt;iframe                                    style=&quot;width:100%;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;</p>                            </li>                            <li>适用于：后台；邮箱等地方</li>                        </ol>                    </div>                    <div class="ft">                        <a href="http://blog.doyoe.com/" title="去css探索之旅浏览更多div布局文章">More</a>                    </div>                </div>            </div>        </div>    </div>    <div id="ft">        <address class="copyright">            Copyright &copy; <a href="http://blog.doyoe.com/">doyoe.com</a>        </address>    </div></body></html>
0 0