- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
挺符合标准的CSS左、中、右3列布局，好像加载时候是先显示中栏，然后显示两侧。不过这里先后顺序不是重点，重点是如何在心中为你的网页布局出一个大致的框架，用惯TABLE的人，往往不习惯用CSS，不过看到CSS布局竟然可以代码这么少，一定会为CSS喝采的。
<!DOCTYPE html PUBLIC "-//W。3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>CSS左中右3列布局先显示中栏内容的方法</title> </head> <style> body{font-size:12px;} div{color:#fff} #m{padding-left:150px} #middle{position:absolute;background:red;width:498px;margin-right: auto;margin-left: auto; padding: 0px;} #left{float:left;background:green;width:140px;} #right{float:right;background:blue;width:140px} #pagebox{width:800px;margin-right: auto;margin-left: auto; padding: 0px;color: #000;background:#ffa200;} #header{BACKGROUND: #ffee22;HEIGHT: 60px;} #logo {float:left;MARGIN: 2px 2px ;padding:0px;} #footer{clear:both;background:#808080;color:#fff;height:60px;} </style> <body> <div id="pagebox"> <div id="header"> <div id="logo"><a title="WEB2.0标准布局" href="http://www.yzci.com/" ><img alt="标准布局" src="/images/logo.gif" border="0"/></a></div> <p>Header</p> </div> <div id="m"> <div id="middle"> 中栏<br /> <ul> <li> <a href="http://mb5u.com/soft/3959.shtml" target="_blank">很可怕的一个C#2008恶搞程序</a></li><li><a href="http://mb5u.com/soft/3069.shtml" target="_blank">25175 单项选择考试系统ASP.net版 v1.0</a></li><li><a href="http://mb5u.com/soft/2062.shtml" target="_blank">C#图片/相册管理程序代码</a></li><li><a href="http://mb5u.com/soft/3352.shtml" target="_blank">给VB的ListBox滚动条皮肤添加图片背景和渐变色</a></li><li><a href="http://mb5u.com/soft/3096.shtml" target="_blank">VB中的MsChart控件使用示例</a></li><li><a href="http://mb5u.com/soft/1610.shtml" target="_blank">J2me手机程序开发环境的搭建教程 PDF</a></li><li><a href="http://mb5u.com/soft/1117.shtml" target="_blank">蜀山剑侠传游戏J2ME手机版源代码</a></li><li><a href="http://mb5u.com/soft/2240.shtml" target="_blank">VB语言参考及函数速查手册 CHM</a></li><li><a href="http://mb5u.com/soft/1647.shtml" target="_blank">简单坦克大战J2ME手机版</a></li><li><a href="http://mb5u.com/soft/3452.shtml" target="_blank">AJAX仿Windows桌面菜单及图标的效果</a></li><li><a href="http://mb5u.com/soft/3934.shtml" target="_blank">《JavaScript 宝典》第四版 PDF</a></li> </ul> </div> </div> <div id="left">浮动在#m{padding-left:150px}上Padding区域。 <h1>左栏</h1></div> <div id="right">右栏<br></div> <div id="footer">网页底部</div> </div> <script language="javascript"> var l=document.getElementById("left").scrollHeight var m=document.getElementById("middle").scrollHeight var r=document.getElementById("right").scrollHeight layoutHeight=Math.max(l,m,r) document.getElementById("left").style.height=layoutHeight+"px" document.getElementById("right").style.height=layoutHeight+"px" document.getElementById("middle").style.height=layoutHeight+"px" </script> </body> </html>