网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索

 
 
 
日一二三四五六
       
       
       
       
       
       

签到排名:今日本吧第个签到,

本吧因你更精彩,明天继续来努力!

本吧签到人数:0

一键签到
成为超级会员,使用一键签到
一键签到
本月漏签0次!
0
成为超级会员,赠送8张补签卡
如何使用?
点击日历上漏签日期,即可进行补签。
连续签到:天  累计签到:天
0
超级会员单次开通12个月以上,赠送连续签到卡3张
使用连续签到卡
02月19日漏签0天
css吧 关注:63,415贴子:458,702
  • 看贴

  • 图片

  • 吧主推荐

  • 视频

  • 游戏

  • 1 2 下一页 尾页
  • 33回复贴,共2页
  • ,跳到 页  
<<返回css吧
>0< 加载中...

学生狗求救。

  • 只看楼主
  • 收藏

  • 回复
  • Winke_
  • columns
    8
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼


  • Winke_
  • columns
    8
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
<!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免广告
  • Winke_
  • columns
    8
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
为什么不是想要的效果。。。。


  • Winke_
  • columns
    8
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
@@@@@@@qq1406554120


  • 木子牙膏x
  • layouter
    11
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
其实,我是来水贴的。我什么都不懂。


  • 木子牙膏x
  • layouter
    11
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
啦啦啦啦啦叫我体检去住宿了很厚实绿葡萄论文


  • 婉挽汉裳F6
  • float
    5
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
@圣龙骑士
吧主给弄出来


  • 圣龍骑士
  • regions
    13
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
只能用5个div?


2026-02-19 05:40:16
广告
不感兴趣
开通SVIP免广告
  • 婉挽汉裳F6
  • float
    5
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
<!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>


  • gp3098
  • Grid
    10
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
结贴了没有呀


  • wuming156
  • layouter
    11
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
那我只能拿75分了,交叠部分该怎么做呢?下面交叠的话应该可以设置footer的margin-top解决。上面的交叠怎么做呢?哦,我知道了,交叠部分可以用相对定位做。等下有空再来写全。


  • wuming156
  • layouter
    11
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
已验证正确
<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>


  • 学习当人
  • style
    1
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
刚好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>


  • 学习当人
  • style
    1
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
好吧,上面那个做错了~~补一个对的~~突然瞧了瞧,原来它要固定中间一个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免广告
  • 贴吧用户_0G7WS7t
  • display
    7
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
回去试试。


登录百度账号

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频!
  • 贴吧页面意见反馈
  • 违规贴吧举报反馈通道
  • 贴吧违规信息处理公示
  • 1 2 下一页 尾页
  • 33回复贴,共2页
  • ,跳到 页  
<<返回css吧
分享到:
©2026 Baidu贴吧协议|隐私政策|吧主制度|意见反馈|网络谣言警示