» 网友学堂 » HTML/CSS教程 » 一行三列DIV CSS布局解析
一行三列DIV CSS布局解析
作者:lonjew 发表时间:2008-4-24 09:41 阅读:232次 在百度搜索相关内容

一行三列DIV CSS布局;这是昨天晚上做的一个例子;

CSS部分:




程序代码

/* 子 鼠 www.zishu.cn */
body{margin:0px;padding:0px;font-size:12px; line-height:1.8;font-family: Verdana,宋体;}

#footer{background:#FF66CC;}
#header{ background:#FF3300;}
#footer,#header,#wrap{clear:both;}

#info{width:100%;background:#FF9900; float:left;}
#left{float:left;width:200px;background:#CC9966; }
#center{margin:0 200px;background:#666;}
#right{ margin-left:-200px; float:left; background:#CC6666; width:200px; }




DIV部分:





程序代码
header




left  




/* cnwebshow.com */
body{margin:0px;padding:0px;font-size:12px; line-height:1.8;font-family: Verdana,宋体;}
#footer{background:#FF66CC;}
#header{ background:#FF3300;}
#footer,#header,#wrap{clear:both;}
#info{width:100%;background:#FF9900; float:left;}
#left{float:left;width:200px;background:#CC9966; }
#center{margin:0 200px;background:#666;}
#right{ margin-left:-200px; float:left; background:#CC6666; width:200px; }



header


left
footer