网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
css吧 关注：63,415贴子：458,702

学生狗求救。



<!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>
<link href="my.css" rel="stylesheet" type="text/css" />
</head>
<div id="top">"top"</div>
<div id="left">"left"</div>
<div id="center">"center"</div>
<div id="right">"right"</div>
<div id="bottom">"bottom"</div>
<body>
</body>
</html>
#top{width:100%;height:100px;background:grey;}
#left{float:left;margin-top:-30px;margin-left:10%;width:200px;height:200px;background:red;}
#center{float:left;margin:-30px auto;height:200px;background:blue;}
#right{float:right;margin-top:-30px;margin-right:10%;width:200px;height:200px;background:green;}
#bottom{float:left;width:100%;height:100px;background:grey;clear:both;}


2026-02-19 05:46:16
广告
不感兴趣
开通SVIP免广告
为什么不是想要的效果。。。。


@@@@@@@qq1406554120


其实，我是来水贴的。我什么都不懂。


啦啦啦啦啦叫我体检去住宿了很厚实绿葡萄论文


@圣龙骑士
吧主给弄出来


只能用5个div？


2026-02-19 05:40:16
广告
不感兴趣
开通SVIP免广告
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.layout{width:100%;height:100%;overflow:auto;}
.header,.footer{width:100%;height:50px;background:orange;position:absolute;}
.header{top:0px;left:0px;}
.footer{left:0px;bottom:0px;}
.main {position: absolute;z-index: 2;top: 10%;left: 10%;background-color: red;width:80%;height:80%;}
.main .left,.main .right{width:50px;position:absolute;height:100%;}
.main .left{left:0px;top:0px;background:blue;}
.main .right{right:0px;top:0px;background:green;}
.main .center{position:absolute;height:100%;background:black;top:0px;left:50px;right:50px;}
</style>
</head>
<body>
<div class="layout">
<div class="header">header</div>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>


结贴了没有呀


那我只能拿75分了，交叠部分该怎么做呢？下面交叠的话应该可以设置footer的margin-top解决。上面的交叠怎么做呢？哦，我知道了，交叠部分可以用相对定位做。等下有空再来写全。


已验证正确
<style type="text/css">
#top{
width:100%;
height:100px;
background:gray;
}
#container{
width:80%;
margin:0 auto;
position:relative;
top:-50px;
z-index:1;
}
#right{
width:200px;
height:300px;
float:right;
background:red;
}
#wrap1{
width:100%;
float:left;
margin-left:-200px;
}
#wrap2{
margin-left:200px;
}
#left{
width:200px;
height:300px;
float:left;
background:blue;
}
#wrap3{
width:100%;
float:right;
margin-right:-200px;
}
#center{
margin-right:200px;
height:300px;
background:green;
}
#bottom{
width:100%;
height:100px;
background:gray;
clear:both;
position:relative;
top:-100px;
z-index:-1;
}
</style>
</head>
<body>
<div id="top">Top</div>
<div id="container">
<div id="wrap1">
<div id="wrap2">
<div id="left">Left</div>
<div id="wrap3">
<div id="center">Center</div>
</div>
</div>
</div>
<div id="right">Right</div>
</div>
<div id="bottom">Bottom</div>


刚好5个DIV就完事……
<html>
<head>
<style>
.top{
width:100%;
height:100px;
background-color:gray;
z-index:-1;
}
.bottom{
width:100%;
height:100px;
background-color:gray;
position: absolute;
bottom:0px;
z-index:-1;
}
.left{
margin:-40px auto auto 10%;
width:10%;
height:250px;
float:left;
background:red;
}
.center{
margin:-40px auto auto auto;
overflow:hidden;
width:60%;
height:250px;
background:blue;
float:left;
position:relative;
}
.right{
margin:-40px 10% auto auto;
width:10%;
height:250px;
background:green;
float:right;
}
</style>
</head>
<body>
<div class=top >top</div>
<div class=bottom >bottom</div>
<div class=left>left</div>
<div class=center>center</div>
<div class=right>right</div>
</body>
</html>


好吧，上面那个做错了~~补一个对的~~突然瞧了瞧，原来它要固定中间一个80%大小的筐。顺便把IE8以下的也兼容下~~基本没问题了，这次才是100分。
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.top{
width:100%;
height:10%;
background-color:gray;
z-index:-1;
}
.bottom{
width:100%;
height:10%;
background-color:gray;
position: absolute;
bottom:0;
z-index:-1;
}
.pos
{
margin:-2% 10% 10% 10%;
width:80%;
height:90%;
background-color:blue;
}
#left
{
width:200;
height:100%;
background-color:red;
float:left;
}
#right
{
width:200;
height:100%;
background-color:green;
float:right;
}
</style>
</head>
<body>
<div class=top >top</div>
<div class=bottom >bottom</div>
<div class=pos>
<div id=left>left</div>
<div id=right>right</div>
</div>
</body>
</html>


2026-02-19 05:34:16
广告
不感兴趣
开通SVIP免广告
回去试试。


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
分享到: