站长论坛

标题: 一行三列DIV+CSS布局解析 [打印本页]
作者: sunhw0725    时间: 2007-10-8 14:24
标题: 一行三列DIV+CSS布局解析
一行三列DIV+CSS布局;这是昨天晚上做的一个例子；

CSS部分:


程序代码
<style>
/* 子 鼠 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; }

</style>



DIV部分:

程序代码
<div id="header">header</div>

<div id="wrap">

<div id="info">
  <div id="left">left<</div>
  <div id="center">富翁的儿子与朋友做生意，被骗了富翁的儿子与朋友做生意。富翁的儿子与朋友做生意，被骗了儿。富翁的儿子与朋友做生意，被骗了儿。富翁的儿子与朋友做生意，被骗了儿。富翁的儿子与朋友生骗了儿。富翁的儿子与朋友做生意，被骗了儿。
  </div>
</div>
<div id="right">right</div>

</div>

<div id="footer">footer</div>


完整代码:
　<!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=utf-8" />

<style>
/* 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; }

</style>
</head>
<body>

<div id="header">header</div>

<div id="wrap">

<div id="info">
  <div id="left">left<</div>
  <div id="center">富翁的儿子与朋友做生意，被骗了富翁的儿子与朋友做生意。富翁的儿子与朋友做生意，被骗了儿。富翁的儿子与朋友做生意，被骗了儿。富翁的儿子与朋友做生意，被骗了儿。富翁的儿子与朋友生骗了儿。富翁的儿子与朋友做生意，被骗了儿。
  </div>
</div>
<div id="right">right</div>

</div> <!-- wrap end-->

<div id="footer">footer</div>
</body>
</html>




欢迎光临 站长论坛 (http://www.tzlink.com/bbs/) Powered by Discuz! X3.2