div布局的自由伸展三栏式版面的代码

时间:2014-06-14 15:47来源:网络整理作者:网络点击: 次

分享到：

div布局的自由伸展三栏式版面的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../www.w3.org/TR/xhtml1/DTD/strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 
<head> 
<title>自由伸展的三栏式版面</title> 
<meta name="Big John" content="August 24, 2002" /> 
<meta http-equiv="content-Type" content="text/html; charset=GB2312" />  
<meta name="mssmarttagspreventparsing" content="true" /> 
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" /> 
<meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " /> 
<meta name="distribution" content="global" /> 
<meta name="resource-type" content="document" /> 
<meta name="robots" content="all" /> 
<meta http-equiv="imagetoolbar" content="no" /> 
<meta http-equiv="pragma" content="no-cache" />

html {margin: 0; padding: 0;}

body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;  
  font-size: small; background: #ee8 repeat-y url(images/browncol.gif);} 
/*** Image is 180px wide, and 20px high ***/

pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}

a {color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}

.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}

/******************************************************************************* 
                       Positioning rules 
*******************************************************************************/ 
h1, h2 { 
font-size: 22px; 
margin: 0; 
color: #040; 
background-color: #c83;    /*** The header and footer have backgrounds, to cover the 2-tone body BG  ***/ 
border-top: 4px solid #000; 
border-bottom: 5px solid #000; 
padding: 3px 0 3px 1em; 
}

h2 {background-color: #638; color: #fff;}

div#leftbox {      /*** No side padding or borders, to avoid the IE5.x box model problem ***/ 
position: absolute; 
left: 10px; 
width: 150px; 
color: #ee8; 
padding-top: 10px; 
}

#middlebox { 
margin: 0 34% 0 170px; 
border-left: 3px solid #000; 
border-right: 3px solid #000; 
padding: 10px; 
background-color: #dda;     /*** This div has a background to cover the 2-tone body BG ***/ 
}

div#rightbox {    /*** No side padding or borders, to avoid the IE5.x box model problem ***/ 
position: absolute; 
right: 25px;     /*** IE5/mac will show a horizontal scrollbar  
        if this is less than 16px, or other units are used 
        http://www.l-c-n.com/IE5tests/right_pos/ ***/            
width: 30%; 
color: #820; 
padding-top: 10px; 
}

--> 
</style> 
</head>

<body>

<h1> 
自由伸展的三栏式版面（Three Column Stretch）（页首） 
</h1>

<div id="leftbox"> 
<pre> 
<strong>#leftbox</strong> { 
position: absolute; 
left: 10px; 
width: 180px(150px?); 
} 
</pre>

<p> 
<strong>这个栏段</strong>的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。 
<p> 
</p> 
这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的"宽度(width)"值。 
</p> 
<p> 
<a href="#"><strong>测试用连结</strong></a> 
</p> 
</div>

<div id="rightbox">     
<pre> 
<strong>#rightbox</strong> { 
position: absolute; 
right: 2%; 
width: 30%; 
}

</pre> 
<p> 
<strong>这个栏段</strong>也能显示"body"的背景，但是因为"body"的背景 
图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是"body"的背景颜色(background-color)。  
这个栏段的"宽度(width)"和右边界的区域是用百分比作单位，你想用其它单位也可以。 
</p> 
<p> 
如果页面比 640px 还窄，中间和右边栏段使用的"pre"卷标会导致内容重叠。 
</p> 
<p> 
<a href="#"><strong>测试用连结</strong></a> 
</p>

</div>

<pre> 
<strong>#middlebox</strong> {  
margin: 0 34% 0 170px; 
border-left: 2px solid #000; 
border-right: 2px solid #000; 
padding: 0 10px 10px; 
background-color: #6b9; 
} 
</pre> 
<p> 
<strong>中间栏段</strong>有设定背景色，以便跟右边栏段作区分。 
这个栏段也需要补白(padding)和边框(border)，不过因为没有设定"宽度(width)"属性，并不会触发 IE5.x 的区块模块(box model)问题。 
</p> 
<p> 
这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则"body"的背景就会在页尾(footer)下方出现。 
</p>

<p> 
<strong>这整个范例</strong>没有在任何栏段里宣告"高度(height)"属性，这是为了避掉一些浏览器表现"高度(height)"属性的独特方式。 
因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。 
</p> 
<p> 
页首、页尾和中间栏段是"固定的(static)"（或说"相对的(relative)"），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定"高度(height)"。 
</p>

</DIV>
<div class="dede_pages">
   <ul class="pagelist">
    <li><a>共2页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a href='#'>1</a></li><li><a href='n_42621_2.shtml'>2</a></li><li><a href='n_42621_2.shtml'>下一页</a></li>
   </ul>
</div>
</DIV>
<DIV class=page_next>
<UL>
<LI>上一篇：<a href='/newsHtm/20/n_42620.shtml'>几乎被设计师遗忘了的标签fieldset legend</a> </LI>
<LI>下一篇：<a href='/newsHtm/22/n_42622.shtml'>ul+li及css制作韩国风格菜单代码</a>  </LI></UL>

</DIV>

<DIV class=blkContainerSblkCon>

<script>document.write('<div id="SOHUCS" sid="'+UYId+'" ></div>');</script>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: 'cytTCv4G0',
conf: 'prod_ff1eac20de6755fec45da9b19bca6cbc'
});
</script>
</DIV>
<script type="text/javascript">      
 SyntaxHighlighter.highlight();   //高亮代码    
 </script>
</div>

 <div class="top_bg">精彩图集</div>
    <div class="top_bg_down">

<div class="CH_CP_TOP">
		<div class="p_img_xian">
		   <A href="/newsHtm/95/n_41495.shtml" title='BS项目中的CSS架构_仅加载自己需要的CSS'><img src='/sp/attachments/allimg/c140612/140255A0196230-1R50_lit.png' border='0' width='100' height='72' alt='BS项目中的CSS架构_仅加载自己需要的CSS'></A></div>
		<div class="CH_title">
			<A href="/newsHtm/95/n_41495.shtml"  title='BS项目中的CSS架构_仅加载自己需要的CSS'  target=_blank>BS项目中的</A>
		</div>
	</div>
<div class="CH_CP_TOP">
		<div class="p_img_xian">
		   <A href="/newsHtm/97/n_41197.shtml" title='css实现气泡框效果(实例加图解)'><img src='/sp/attachments/allimg/c140611/14024W0S423F-14933_lit.png' border='0' width='100' height='72' alt='css实现气泡框效果(实例加图解)'></A></div>
		<div class="CH_title">
			<A href="/newsHtm/97/n_41197.shtml"  title='css实现气泡框效果(实例加图解)'  target=_blank>css实现气泡</A>
		</div>
	</div>

<ul>
 <li><A title="Iframe自适应其加载的内容高度" href="/newsHtm/40/n_43640.shtml">Iframe自适应其加载的内容高度</A></li>
<li><A title="Lesson02_01 表格标签" href="/newsHtm/06/n_43406.shtml">Lesson02_01 表格标签</A></li>
<li><A title="制作WEB在线编辑器-插入HTML标签" href="/newsHtm/76/n_43376.shtml">制作WEB在线编辑器-插入HTML标签</A></li>
<li><A title="文章内容页广告浮于左上角的解决办法" href="/newsHtm/11/n_43311.shtml">文章内容页广告浮于左上角的解决</A></li>
<li><A title="什么叫标准网页设计?" href="/newsHtm/07/n_43307.shtml">什么叫标准网页设计?</A></li>
<li><A title="CSS入门教程篇" href="/newsHtm/92/n_43292.shtml">CSS入门教程篇</A></li>
<li><A title="CSS标签切换代码实例教程 比较漂亮" href="/newsHtm/42/n_42642.shtml">CSS标签切换代码实例教程 比较漂</A></li>
<li><A title="推荐深入理解css中的position定位和z-index属性" href="/newsHtm/34/n_42634.shtml">推荐深入理解css中的position定位和</A></li>
<li><A title="让网页框架透明 底部对齐的代码" href="/newsHtm/07/n_42407.shtml">让网页框架透明 底部对齐的代码</A></li>
<li><A title="网页打开新窗口target=_blank不符合标准" href="/newsHtm/31/n_42131.shtml">网页打开新窗口target=_blank不符合</A></li>

</ul>
</div>

</div></div>
	<div id="control_right">
	<div class="top_bg_small">热点文章</div>
    <div class="top_bg_down_small">
      <p><div class="content_list_left">

<ul>

<li><A title="禁用Backspace键不让退到上一个网页" href="/newsHtm/78/n_1478.shtml">禁用Backspace键不让退到上一个网页</A></li>
<li><A title="html/js在线调试器" href="/newsHtm/40/n_16840.shtml">html/js在线调试器</A></li>
<li><A title="CSS教程之：CSS内间距" href="/newsHtm/03/n_1503.shtml">CSS教程之：CSS内间距</A></li>
<li><A title="控制TextArea限制行数和字符数的方法讲解" href="/newsHtm/77/n_1477.shtml">控制TextArea限制行数和字符数的方</A></li>
<li><A title="as2及as3 flash广告物料中添加clickTAG的方法as3中兼容ie不被拦截的方法" href="/newsHtm/52/n_16852.shtml">as2及as3 flash广告物料中添加click</A></li>
<li><A title="95%的中国网站需要重写CSS" href="/newsHtm/42/n_43642.shtml">95%的中国网站需要重写CSS</A></li>
<li><A title="使用css实现全兼容浏览器的三角形" href="/newsHtm/17/n_50917.shtml">使用css实现全兼容浏览器的三角形</A></li>
<li><A title="固定右栏宽度, 左栏内容先出现同时自适应宽度的布局" href="/newsHtm/39/n_43639.shtml">固定右栏宽度, 左栏内容先出现同</A></li>
<li><A title="手机上网，一步一步WAP网站建设从入门到学会教程" href="/newsHtm/82/n_1482.shtml">手机上网，一步一步WAP网站建设从</A></li>
<li><A title="IE Bug--浮动对象外补丁的双倍距离的解决方法" href="/newsHtm/37/n_43637.shtml">IE Bug--浮动对象外补丁的双倍距离</A></li>

</ul>
</div>
 </p>
      </div></div></div>
 
	</div> 
<div id="word_right">
    <div class="right_ad2"><div class="right_content1"><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div>
 <div class="right_ad1">
  <div class="right_content">
  <ul id="nav" class="menu_lbg1">
        <li><a href="#" onmouseover="javascript:qmain_menu_lbq(1)" >最新文章</a></li>
        <li class="a1" ></li>
        <li><a href="#" onmouseover="javascript:qmain_menu_lbq(2)">最新日志</a></li>
        <li class="a1"></li>
        <li><a href="#" onmouseover="javascript:qmain_menu_lbq(3)">最新帖子</a></li>
      </ul>
    <div class="change_bottom" id="change_down1"><div>

<ul>
 <li><A title="HTML实现title 属性换行小技巧" href="/newsHtm/43/n_53143.shtml">HTML实现title 属性换行小技巧</A></li>
<li><A title="使用css实现全兼容浏览器的三角形" href="/newsHtm/17/n_50917.shtml">使用css实现全兼容浏览器的三角形</A></li>
<li><A title="<strong>使用css实现全兼容tooltip提示框</strong>" href="/newsHtm/16/n_50916.shtml"> 使用css实现全兼容tooltip提示框 </A></li>
<li><A title="em px的关系" href="/newsHtm/43/n_43643.shtml">em px的关系</A></li>
<li><A title="95%的中国网站需要重写CSS" href="/newsHtm/42/n_43642.shtml">95%的中国网站需要重写CSS</A></li>
<li><A title="在iframe中隐藏横向滚动条的方法大全" href="/newsHtm/41/n_43641.shtml">在iframe中隐藏横向滚动条的方法大全</A></li>
<li><A title="Iframe自适应其加载的内容高度" href="/newsHtm/40/n_43640.shtml">Iframe自适应其加载的内容高度</A></li>
<li><A title="固定右栏宽度, 左栏内容先出现同时自适应宽度的布局" href="/newsHtm/39/n_43639.shtml">固定右栏宽度, 左栏内容先出现同时自适应</A></li>
<li><A title="转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）" href="/newsHtm/38/n_43638.shtml">转载未知大小的图片在一个已知大小容器中</A></li>
  
  </ul>
</div>
</div>
	<div class="change_bottom" id="change_down2" style="display:none"> 
	<ul>
	  <li><A title="不能看到某个圆圈中的数字，就说明某方面潜伏问题" href="/bbs/blog-1-3223.html">不能看到某个圆圈中的数字，就说明某方面潜伏问题</A></li>
    <li><A title="恶搞新交规" href="/bbs/blog-1-3222.html">恶搞新交规</A></li>
    <li><A title="三个故事说穿了许多人" href="/bbs/blog-1-3221.html">三个故事说穿了许多人</A></li>
    <li><A title="Linux下安装、启动MySQL" href="/bbs/blog-267-3220.html">Linux下安装、启动MySQL</A></li>
    <li><A title="学习PHP&MySQL之——字符编码篇（二）" href="/bbs/blog-267-3219.html">学习PHP&MySQL之——字符编码篇（</A></li>
    <li><A title="Navicat连接本地Mysql出现10061错误,但链接远程没有问题的解决方法" href="/bbs/blog-267-3218.html">Navicat连接本地Mysql出现10061错</A></li>
    <li><A title="MySQL Connector/Net 6.6.4 发布" href="/bbs/blog-267-3217.html">MySQL Connector/Net 6.6.</A></li>
    <li><A title="mysql主从同步图" href="/bbs/blog-267-3216.html">mysql主从同步图</A></li>
    <li><A title=""未找到 Oracle 客户端和网络组件。这些组件是.."的解决办法" href="/bbs/blog-267-3215.html">"未找到 Oracle 客户端和网络组</A></li>
    </ul>
	</div>
	<div class="change_bottom" id="change_down3" style="display:none">
	<ul  id="bbs_top10">
	 </ul></div></div>
 </div>
<style>.rmbq a{height:20px;padding:2px;line-height:20px;}</style>
<div class="right_ad1 rmbq">
  <div class="right_content2"><h2 class="tit1">热门标签</h2>

<div style="width: 280px;margin: 5px auto;height: 300px;line-height: 24px;overflow: hidden;">
       <a href='/tags.php?/Django%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/' class='tagc1'>Django应用程序</a>

<a href='/tags.php?/Progre/' class='tagc1'>Progre</a>

<a href='/tags.php?/js%E4%B8%8Ecss%E4%BA%A4%E4%BA%92/' class='tagc1'>js与css交互</a>

<a href='/tags.php?/strcmp/' class='tagc2'>strcmp</a>

<a href='/tags.php?/heartbeat%E5%BF%83%E8%B7%B3/' class='tagc2'>heartbeat心跳</a>

<a href='/tags.php?/%E4%B9%9D%E4%B9%9D%E4%B9%98%E6%B3%95%E8%A1%A8/' class='tagc1'>九九乘法表</a>

<a href='/tags.php?/php+php%E4%B8%8A%E4%BC%A0%E6%96%87/' class='tagc2'>php php上传文</a>

<a href='/tags.php?/php%E8%AF%BB%E5%8F%96excel%E6%96%87%E4%BB%B6/' class='tagc2'>php读取excel文件</a>

<a href='/tags.php?/%E5%9B%BE%E7%89%87%E6%97%8B%E8%BD%AC%E6%95%88%E6%9E%9C/' class='tagc1'>图片旋转效果</a>

<a href='/tags.php?/getchar%28%29/' class='tagc2'>getchar()</a>

<a href='/tags.php?/ajax%E6%97%A0%E5%88%B7%E6%96%B0/' class='tagc2'>ajax无刷新</a>

<a href='/tags.php?/query/' class='tagc1'>query</a>

<a href='/tags.php?/window.locat/' class='tagc1'>window.locat</a>

<a href='/tags.php?/SQLservice/' class='tagc2'>SQLservice</a>

<a href='/tags.php?/%E8%87%AA%E5%AE%9A%E4%B9%89session/' class='tagc2'>自定义session</a>

<a href='/tags.php?/php+php%E8%BE%93%E5%87%BA%E5%85%A8%E7%90%83/' class='tagc1'>php php输出全球</a>

<a href='/tags.php?/excel%E6%97%A0%E6%B3%95%E6%89%93%E5%BC%80/' class='tagc1'>excel无法打开</a>

<a href='/tags.php?/%E7%BC%BA%E7%9C%81%E5%AF%86%E7%A0%81%E6%9C%9F%E9%99%90/' class='tagc2'>缺省密码期限</a>

<a href='/tags.php?/command/' class='tagc1'>command</a>

<a href='/tags.php?/include_once/' class='tagc1'>include_once</a>

<a href='/tags.php?/100%E4%BB%A5%E5%86%85%E7%9A%84%E7%B4%A0%E6%95%B0/' class='tagc1'>100以内的素数</a>

<a href='/tags.php?/Web%E5%AE%89%E5%85%A8/' class='tagc2'>Web安全</a>

<a href='/tags.php?/%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9B%BF%E6%8D%A2/' class='tagc2'>字符串替换</a>

<a href='/tags.php?/service/' class='tagc2'>service</a>

<a href='/tags.php?/javascript%E9%97%AD%E5%8C%85/' class='tagc2'>javascript闭包</a>

<a href='/tags.php?/drupal7%3A/' class='tagc6'>drupal7:</a>

<a href='/tags.php?/%E5%A2%9E%E9%87%8F%E5%8D%87%E7%BA%A7%E6%96%B9%E6%B3%95/' class='tagc2'>增量升级方法</a>

<a href='/tags.php?/Mysql%E4%BC%98%E5%8C%96/' class='tagc2'>Mysql优化</a>

<div class="right_ad1">
  <div class="right_content2"><h2 class="tit1">赞助商链接</h2>
<div align="center">  <script type="text/javascript">
google_ad_client = "pub-2165610513794018";
/* 160x600, 创建于 08-11-28 */
google_ad_slot = "3974845827";
google_ad_width = 160;
google_ad_height = 600;

</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div>
 </div>
 
   
</div>
<div class="clear"></div></div>
<div class="clear"></div>
<div id="foot">

<div class="center">
	
<div class="tonglan" id="bottom" align="center">
<p>@CopyRight 2002-2008, 1SOHU.COM, Inc. All Rights Reserved QQ:1010969229</p>
		
<p><a href="http://beian.miit.gov.cn" target="_blank">京ICP备18042785号-1</a>
	
<script language="JavaScript" src="http://s67.cnzz.com/stat.php?id=259003&web_id=259003&show=pic" charset="gb2312"></script>

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19092289-1']);
  _gaq.push(['_setDomainName', '1sohu.com']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>-->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb97f11b3c4c68d586839d98f8773582d' type='text/javascript'%3E%3C/script%3E"));
</script>