服务：上海网站建设、行业网站制作、SEO网站设计、创意网页设计
主机和域名常见问题在线咨询技术资讯风格馆
English

技术资讯 >> Web前端设计 >> 正文

三列布局[左右固定宽,中间自适应!宽高自适应显示分辨率]

发布时间: 2009:09:21 23:12:22　浏览次数: 　文章来源: topideas.cn [eric]


上海网站设计专家-思卓

上海思卓拥有八年网站建设经验，专门提供网页设计服务，公司拥有丰富项目的操作经验，无论是在网站设计和还是程序编写都能提供最优质的服务。思卓的网站建设服务可以根据客户的不同需求提供多种解决方案，作为优秀的上海网站制作公司，我们基于做网站不同目的所提供不同网站建设方法，提高建站的标准和服务。TEL：021-58870898

思卓网站建设服务分类

创意网页设计、企业网站建设、FLASH网站制作、SEO网站设计、XHTML网页重构、行业网站建设方案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<body>
<div id="top">
 <a href="#" id="logo">TOPIDEAS</a>
 <ul>
  <li><a href="#">INDEX</a></li>
  <li><a href="#">INDEX</a></li>
  <li><a href="#">INDEX</a></li>
  <li><a href="#">INDEX</a></li>
  <li><a href="#">INDEX</a></li>
  <li><a href="#">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>
 </body>
</html>

 


 

转载请注明文章来自[topideas.cn ],上海网站建设专业服务商!