div仿框架布局之典型的两栏布局进化V2

最新推荐文章于 2021-11-28 16:12:44 发布

q707096967

最新推荐文章于 2021-11-28 16:12:44 发布

阅读量899

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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>

<!--Google Analytics-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3500471-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>