您的位置：首页 > Web前端 > CSS

css+ div 实现框架布局

2017-01-18 15:57 351 查看
转载 ：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><div class="main"><div
style="width:100%;"></div></div></p>
<p><div class="main"><iframe
style="width:100%;"></iframe></div></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 © <a href="http://blog.doyoe.com/">doyoe.com</a>
</address>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css div frameset
相关文章推荐
新的分享
章节导航