CSS DIV如何做这样的排版9

发布网友发布时间：2023-09-16 15:58

我来回答

共5个回答

热心网友时间：2024-11-15 22:30

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、设置完毕，查看左侧的效果。

热心网友时间：2024-11-15 22:30

你的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="b2">
<div class="aa">001</div>
<div class="bb">002</div>
<div class="cc">003</div>
</div>
<div id="b3">004</div>
</div>
</body>

热心网友时间：2024-11-15 22:30

热心网友时间：2024-11-15 22:31

<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 就不写了边框的上下左右可以分别设置

热心网友时间：2024-11-15 22:32

<!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>