<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>三列布局[左右固定宽,中间自适应!宽高自适应显示分辨率]</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <style> *{ margin:0; padding:0;} html,body{overflow:auto;} body{ font:12px/200% Verdana,Arial,Helvetica,sans-serif; color:#000; background:#333;} #top{ background:#60C3C3; margin:10px 20px;overflow:hidden; position:relative; height:90px;} #top #logo{font-size:2.5em;position:absolute;left:36px;top:12px; line-height:50px; overflow:hidden; } #logo:link,#logo:visited{ color:#FFF; text-decoration:none;} #top ul{ list-style-type:none; margin:68px 0px 0px 0px; height:20px; text-align:center; background:#BEFEFF;} #top ul li{ height:20px;border-left:1px #DDD solid; float:right; line-height:20px;} #top ul li a{ display:block;padding:0 20px; } #top ul li a:link,#top ul li a:visited{ color:#000;} #top ul li a:hover,#top ul li a:active{ background:#FFEA00; text-decoration:none;} #box{margin:0 20px; overflow:hidden; background:#FFF; _height:1%; } #left *,#right *,#center *{ padding:5px; } #center{margin:0px 210px;} #left,#right{margin:0 0 -9999px 0;padding-bottom:9999px;width:200px;} #left{ float:left;background:#DDD; border-right:10px #333 solid;} #right{float:right; background:#AAA;border-left:10px #333 solid;} #footer{ margin:10px 20px 0; height:100px;background:#DDD; clear:both;} </style> <div id="top"> <a href="#" _fcksavedurl="#" id="logo">TOPIDEAS</a> <ul> <li><a href="#" _fcksavedurl="#">INDEX</a></li> <li><a href="#" _fcksavedurl="#">INDEX</a></li> <li><a href="#" _fcksavedurl="#">INDEX</a></li> <li><a href="#" _fcksavedurl="#">INDEX</a></li> <li><a href="#" _fcksavedurl="#">INDEX</a></li> <li><a href="#" _fcksavedurl="#">INDEX</a></li> </ul> </div> <div id="box"> <div id="left"> <p>left </p> </div> <div id="right"> <p>Flash动画技术已经越来越成熟，已经逐步从休闲娱乐到商务广告片中的应用。现代人的生活压力越来越大，竞争也逐渐的激烈，传统的商业广告片虽然能给人带来强烈的视觉效果，但在人们一天紧张的工作之下无法起到最好的商业宣传目的 </p> </div> <div id="center"> <p>center </p> </div> </div> <div id="footer">footer</div>
