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> 
这个范例描述得更详细。 
</p> 
<p>

<strong>Nav4 中</strong>没办法使用像"div#leftbox"这类语法，所以请用"#leftbox"来代替。我的写法只是为了要明确地表示。 
</p> 
<p> 
<strong>致谢：</strong>再次感谢Philippe Wittenbergh 
，因为他的帮忙，让这个范例更为完善。<strong>更感谢</strong>  
Mark Howells 
，因为他提供了最初的 body 背景点子。  
</p> 
<p  class="small alignright"> 
e-mail  
©positioniseverything
 
最后更新日期： September 6, 2002
 
Created August 24, 2002 
</p> 
<p class="small alignright"> 
繁体中文翻译：<strong>yyhuang</strong>
 
简体中文转换:
 
如需引入外部Js需刷新才能执行]</div>

<hr>

</div>
			</div>

</div>
       
      <div class="col-md-4">
	
	
	<div class="panel panel-default">
		
		<div class="panel-heading"> <a href="/php/">PHP教程</a></div>
		<div class="list-group">
<a href="/php/1.html" class="list-group-item">PHP简介</a>
<a href="/php/8.html" class="list-group-item">PHP基本语法</a>
<a href="/php/12.html" class="list-group-item">PHP类型</a>
<a href="/php/24.html" class="list-group-item">PHP变量</a>
<a href="/php/34.html" class="list-group-item">PHP运算符</a>
<a href="/php/47.html" class="list-group-item">PHP控制结构</a>
<a href="/php/67.html" class="list-group-item">PHP函数</a>
<a href="/php/74.html" class="list-group-item">PHP类与对象</a>
<a href="/php/110.html" class="list-group-item">PHP异常处理</a>
<a href="/php/function.php" class="list-group-item">函数库分类</a>
						     
				
						
					</div>
					
	</div>
				
</div>

</div>

<div class="panel panel-default">
        <div class="panel-heading">快速导航</div>
        <div class="panel-body">
                       <a href="/list.php?id=1">PHP</a>
<a href="/list.php?id=2">MySQL</a>
<a href="/list.php?id=3">HTML</a>
<a href="/list.php?id=4">CSS</a>
<a href="/list.php?id=5">JavaScript</a>
<a href="/list.php?id=6">MSSQL</a>
<a href="/list.php?id=10">AJAX</a>

<a href="/list.php?id=14">Linux</a>
<a href="/list.php?id=17">Mac</a>
<a href="/list.php?id=7">ASP</a>
<a href="/list.php?id=11">服务器</a>

<a href="/list.php?id=15">SQL</a>
<a href="/list.php?id=16">jQuery</a>

<a href="/list.php?id=18">C#</a>
<a href="/list.php?id=19">C++</a>
<a href="/list.php?id=20">java</a>
<a href="/list.php?id=21">Android</a>
<a href="/list.php?id=22">IOS</a>
<a href="/list.php?id=23">oracle</a>
<a href="/list.php?id=24">MongoDB</a>

<a href="/list.php?id=26">SQLite</a>
<a href="http://wamp.phpstudy.net/">wamp</a>
<a href="/jiaotong/">交通频道</a>   
	<span style="display:none">

</span>
                    </div>
    </div>

<hr>

</div>

<div class="bottom">
	
	<div class="container">
   Copyright © 2016 phpStudy  | 豫ICP备2021030365号-3<script src="/images/foot.js?1"></script>
    </div>
</div>
<script src="/js/foot2.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>