请帮我写一个简单的DIV+CSS网页布局例子
浏览器：IE6要求：有4个DIV层·DIV1,DIV2,DIV3,DIV4DIV1为DIV2,3,4的父层·DIV2,3,4在DIV1中按左中右排列为3列·...
浏览器：IE6
要求：
有4个DIV层·DIV1,DIV2,DIV3,DIV4
DIV1为DIV2,3,4的父层·
DIV2,3,4在DIV1中按左中右排列为3列· 展开
要求：
有4个DIV层·DIV1,DIV2,DIV3,DIV4
DIV1为DIV2,3,4的父层·
DIV2,3,4在DIV1中按左中右排列为3列· 展开
展开全部
楼上的也太复杂了，什么都贴出来了？—
—
页面
代码
<div
class="content">
<div
class="left"></div>
<div
class="mid"></div>
<div
class="right"></div>
</div>
css文件
.content{
width:800px;
magin:0
auto;
}
.left{
float:left;}
.mid{
float:left}
.right{
float:left}
—
页面
代码
<div
class="content">
<div
class="left"></div>
<div
class="mid"></div>
<div
class="right"></div>
</div>
css文件
.content{
width:800px;
magin:0
auto;
}
.left{
float:left;}
.mid{
float:left}
.right{
float:left}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上的也太复杂了，什么都贴出来了？— —
页面代码
<div class="content">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
css文件
.content{
width:800px;
magin:0 auto;
}
.left{
float:left;}
.mid{
float:left}
.right{
float:left}
页面代码
<div class="content">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
css文件
.content{
width:800px;
magin:0 auto;
}
.left{
float:left;}
.mid{
float:left}
.right{
float:left}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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" />
<title>无标题文档</title>
<style type="text/css">
.content{width:600px; height:400px; border:1px solid #000;}
.a{ float:left; width:200px; height:400px; background:#F00;}
.b{ float:left; width:200px; height:400px; background: #FF0;}
.c{ float:left; width:200px; height:400px; background: #3F0;}
</style>
</head>
<body>
<div class="content">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.content{width:600px; height:400px; border:1px solid #000;}
.a{ float:left; width:200px; height:400px; background:#F00;}
.b{ float:left; width:200px; height:400px; background: #FF0;}
.c{ float:left; width:200px; height:400px; background: #3F0;}
</style>
</head>
<body>
<div class="content">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
CSS
/*基本信息*/
body {font:12px Tahoma;background:#CCCCCC;}/*适用于页面整体：字体及字体大小，页面页边距全部设置为0，文字对齐方式为居中，背景颜色*/
* { margin:0; padding:0; border:0;}/*全局设定，外边距，内边距和表格边框全部为0*/
html,body { height:100%;} /*全局设定高度为100％*/
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
/*页面主体*/
#pagebody {
width:780px; /*设定宽度*/
margin:0px auto; /*居中*/
}
#mainleft {
width:192px; /*设定宽度*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:5px auto;
height:auto;
}
#mainright {
width:580px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden;
border:0px solid #E00;/*初始使用表格，留存使用*/
margin:5px auto;
}
#mainright2 {
width:578px;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden;
border:0px solid #006699;
margin:2px auto;
height:auto;
}
#mainright3 {
width:285px; /*设定宽度*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:2px auto;
height:auto;
}
#mainright4 {
width:285px; /*设定宽度*/
float:right; /*浮动居左*/
clear:right; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:2px auto;
height:auto;
}
/*字体设置*/
#biaoti {
font-size:10px;
font-weight:bold;
padding-left:10px;
color:#FFf;
background-color:#006699;
height:20px;
}
页面
<!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>
<body>
<div id="pagebody"><!--页面主体-->
<div id="mainleft">
左侧显示
</div><!--左侧关闭-->
<div id="mainright2">
<div id="mainright3">
右侧一显示
</div>
<div id="mainright4">
右侧二显示
</div>
</div>
</div>
</body>
</html>
/*基本信息*/
body {font:12px Tahoma;background:#CCCCCC;}/*适用于页面整体：字体及字体大小，页面页边距全部设置为0，文字对齐方式为居中，背景颜色*/
* { margin:0; padding:0; border:0;}/*全局设定，外边距，内边距和表格边框全部为0*/
html,body { height:100%;} /*全局设定高度为100％*/
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
/*页面主体*/
#pagebody {
width:780px; /*设定宽度*/
margin:0px auto; /*居中*/
}
#mainleft {
width:192px; /*设定宽度*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:5px auto;
height:auto;
}
#mainright {
width:580px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden;
border:0px solid #E00;/*初始使用表格，留存使用*/
margin:5px auto;
}
#mainright2 {
width:578px;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden;
border:0px solid #006699;
margin:2px auto;
height:auto;
}
#mainright3 {
width:285px; /*设定宽度*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:2px auto;
height:auto;
}
#mainright4 {
width:285px; /*设定宽度*/
float:right; /*浮动居左*/
clear:right; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:2px auto;
height:auto;
}
/*字体设置*/
#biaoti {
font-size:10px;
font-weight:bold;
padding-left:10px;
color:#FFf;
background-color:#006699;
height:20px;
}
页面
<!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>
<body>
<div id="pagebody"><!--页面主体-->
<div id="mainleft">
左侧显示
</div><!--左侧关闭-->
<div id="mainright2">
<div id="mainright3">
右侧一显示
</div>
<div id="mainright4">
右侧二显示
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
