为了账号安全,请及时绑定邮箱和手机立即绑定

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.60
1991人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
做边框用绝对定位
.top{height:200px;background:gray;}
.main{height:500px;background:red;width:100%;}
.left{ width:200px;height:500px;background:blue;position:absolute; left:0;}
.right{background:green;height:500px;position:absolute;margin-left:210px;width:100%;}
.foot{height:100px;background:orange;}

最新回答 / feimin
相对于父容器来margin-top, position:absolute 脱离文档流

最新回答 / 慕尼黑13322
因为文本main在<div class="main"里面独占一行,left用了绝对定位已经脱离了文本流,所以说文本main会被left挡住,然后right会在文本main的下面。

最新回答 / 柒月君
去掉height的属性,给个宽度就会自适应.main{ weight:300px; background:#FCC;margin:0 auto;}

最新回答 / 慕码人0448675
相对定位的盒子不脱离标准流,又因为middle盒子是块级元素,所以同为块级元素的right会被挤下来。

已采纳回答 / 柒月君
没有,慕课网的事。 是W3C的协议
*{
padding: 0;
margin: 0;
text-align: center;
}
.top,.foot{
height: 50px;
line-height: 50px;
background-color: cadetblue;
}
.left,.right{
height: 500px;
}
.right{
background-color: blueviolet;
}

.left{
width: 200px;
position: absolute;
top: 50px;
background-color: #FF7F50;
}
他们设置 310 和210 是为了让效果图和案例一样,中间div和两边有空白的间距。由于中间的div设置的margin 所以,它的距离是相对于body的距离,你疑问为啥不是和左右两个div的距离,是因为,左右两个div由于设置了absolute 脱离了文档流,也就是相当于相对其他div来说,它类似于透明的空气一般。
.top{background:#ccc;}
.main{background:red; height:600px;}
.left{ width:30%;height:100%; float:left; background:blue;}
.right{width:60%;height:100%; float:right;background:black;}
.foot{background:orange;}
首页上一页1234567下一页尾页
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消