CSS DIV如何做这样的排版
<divid="b2"><divclass="aa">001</div><divclass="bb">002</div><divclass="cc">003</div><...
<div id="b2">
<div class="aa">001</div>
<div class="bb">002</div>
<div class="cc">003</div>
</div>
<div id="b3">004</div>
这样的代码可以么，CSS文件要如何写啊？ 展开
<div class="aa">001</div>
<div class="bb">002</div>
<div class="cc">003</div>
</div>
<div id="b3">004</div>
这样的代码可以么，CSS文件要如何写啊？ 展开
6个回答
展开全部
1、选中DIVb2，点击右侧CSS选项卡下的+号，添加CSS样式定义。
2、在新建CSS规则面板下选择#b2（对应DIV b2的ID），确定。
3、在CSS规则定义面板左侧分类下选择方框，右侧输入对应的数值。b2的DIV定义好了
4、下面定义DIV001，同样选中DIV001，点+号新建CSS。
5、在CSS规则定义下选择“背景”，选择好色彩，
6、选择“方框”，定义DIV001的宽，高，浮动float为left。
7、同DIV001一样，新建DIV002样式。
8、选择背景色
9、选择方框后，填写DIV002的样式属性值，注意，因为它是向右浮动的，所以这里的FLOAT要选择为right。
10、同DIV001一样，新建并设定DIV003的参数
11、定义DIV004的样式，因为DIV004和上面的DIV-B2是一样的宽度，所以这里设置为width:400px，Clear为both，防止有的浏览器兼容性问题而位移。
12、设置完毕，查看左侧的效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
你的HTML代码能实现，要用到定位属性position，见如下代码。另外给你提供一段参考代码，在注释中：
<style type="text/css">
/*
*{margin:0;padding:0;}
#w{width:980px;height:800px;margin:0 auto;border:#999 5px;border-style:dashed solid;}
#l{float:left;width:70%;height:600px;}
#l p{height:50%;}
.t{background:#00f;}
.b{background:#fcc;}
#r{float:right;width:30%;height:600px;clear:right;background:#0f0;}
#b{height:200px;background:#f00;clear:both;}
*/
*{margin:0;padding:0;}
#w{width:980px;height:800px;margin:0 auto;border:#999 5px;border-style:dashed solid;}
#b2{position:relative;width:980px;height:600px;}
.aa{width:700px;height:300px;position:absolute;top:0;left:0;background:#09c;}
.bb{width:280px;height:600px;position:absolute;top:0;right:0;background:#0f0;}
.cc{width:700px;height:300px;position:absolute;top:300px;left:0;background:#00f;}
#b3{height:200px;background:#ff0;clear:both;}
</style>
</head>
<body>
<!--
<div id="w">
<div id="l">
<p class="t">001</p>
<p class="b">003</p>
</div>
<div id="r">002</div>
<div id="b">004</div>
</div>
-->
<div id="w">
<div id="b2">
<div class="aa">001</div>
<div class="bb">002</div>
<div class="cc">003</div>
</div>
<div id="b3">004</div>
</div>
</body>
<style type="text/css">
/*
*{margin:0;padding:0;}
#w{width:980px;height:800px;margin:0 auto;border:#999 5px;border-style:dashed solid;}
#l{float:left;width:70%;height:600px;}
#l p{height:50%;}
.t{background:#00f;}
.b{background:#fcc;}
#r{float:right;width:30%;height:600px;clear:right;background:#0f0;}
#b{height:200px;background:#f00;clear:both;}
*/
*{margin:0;padding:0;}
#w{width:980px;height:800px;margin:0 auto;border:#999 5px;border-style:dashed solid;}
#b2{position:relative;width:980px;height:600px;}
.aa{width:700px;height:300px;position:absolute;top:0;left:0;background:#09c;}
.bb{width:280px;height:600px;position:absolute;top:0;right:0;background:#0f0;}
.cc{width:700px;height:300px;position:absolute;top:300px;left:0;background:#00f;}
#b3{height:200px;background:#ff0;clear:both;}
</style>
</head>
<body>
<!--
<div id="w">
<div id="l">
<p class="t">001</p>
<p class="b">003</p>
</div>
<div id="r">002</div>
<div id="b">004</div>
</div>
-->
<div id="w">
<div id="b2">
<div class="aa">001</div>
<div class="bb">002</div>
<div class="cc">003</div>
</div>
<div id="b3">004</div>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="b1">
<div class="b1_1"><!--这个div包函001跟003，然后左对齐：float:left-->
<div class="aa">001</div>
<div class="cc">003</div>
</div>
<div class="bb">002</div><!--这个div右对齐：float:right-->
</div>
<div class="b2">004</div>
<div class="b1_1"><!--这个div包函001跟003，然后左对齐：float:left-->
<div class="aa">001</div>
<div class="cc">003</div>
</div>
<div class="bb">002</div><!--这个div右对齐：float:right-->
</div>
<div class="b2">004</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="all">
<div class="top">
<div class="left">
<div class="left1"></div>
<div class="left2"></div>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
css 就不写了 边框的上下左右可以分别设置
<div class="top">
<div class="left">
<div class="left1"></div>
<div class="left2"></div>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
css 就不写了 边框的上下左右可以分别设置
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html>
<head>
<style type="text/css">
p{margin:0px;padding:0px;}
#b2{
width:900px;
height:600px;
}
#b1{
width:700px;
height:600px;
float:left;
}
.aa{
width:700px;
height:300px;
float:left;
background:#0C6;
}
.bb{
width:700px;
height:300px;
float:left;
background:#09F;
}
.cc{
width:200px;
height:600px;
float:right;
background:#F00;
}
#b3{
width:900px;
height:200px;
background:#0F0;
}
</style>
</head>
<body>
<div id="b2">
<div id="b1">
<div class="aa">001</div>
<div class="bb">003</div>
</div>
<div class="cc">002</div>
</div>
<div id="b3">004</div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
p{margin:0px;padding:0px;}
#b2{
width:900px;
height:600px;
}
#b1{
width:700px;
height:600px;
float:left;
}
.aa{
width:700px;
height:300px;
float:left;
background:#0C6;
}
.bb{
width:700px;
height:300px;
float:left;
background:#09F;
}
.cc{
width:200px;
height:600px;
float:right;
background:#F00;
}
#b3{
width:900px;
height:200px;
background:#0F0;
}
</style>
</head>
<body>
<div id="b2">
<div id="b1">
<div class="aa">001</div>
<div class="bb">003</div>
</div>
<div class="cc">002</div>
</div>
<div id="b3">004</div>
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
