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

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.60
1991人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
.left{float: left; left: 0;}
.right{float: right; right: 0}



.left{position; absolute; left: 0;}
.right{position; absolute; right: 0}

都是可以实现上面三列布局的

已采纳回答 / 木子舟义
main 不写相对定位,那么main中含有绝对定位属性的标签会相对于屏幕的左上角定位。如果main有相对定位,那么main中含有绝对定位属性的标签会相对于main容器的左上角定位。

已采纳回答 / 深山小童
绝对定位是以它最近的已经定位的祖先元素为偏移基准的,所以为main设置position属性,之所以设置relative,因为相对定位没有脱离标准文档流,占据本身的位置,对排版影响较小,稳定,而绝对定位脱离文档流,相对复杂。right不用定位,是因为right是自适应宽度,没有固定宽度,如果使用绝对定位(或者浮动),其宽度是根据其内容大小变化的。
老师讲的很精彩,对布局有了清晰的认识。我在网上看到一篇文章不错,讲的是如何按照编码规范写出好的代码,不敢私藏,分享给大家。

链接是:http://t.cn/RUDeImC
想来想去不能把left挤上main里去,看了别人的代码,还是得靠position:absolute来硬上啊。
看不到效果的同学,可以在页面上按住ctrl+-缩放浏览器页面,再点效果区全屏就可以看到效果了。我是雷锋
楼下都太认真了。。把right的宽度减少30px不就出间距了么。。

已采纳回答 / 李晓健
如果你的左边和右边的宽度加起来和父级宽度一样,往哪浮动都一样,如果他们宽度和小于或大于父级宽度的话,他们的效果就不一样了,这个你自己在各种情况下多写写就好了,慢慢的体会。你体会的多了,就知道什么情况下应该用哪一个值了。

已采纳回答 / 待到半暖天晴
.main{ width:960px; height:600px; margin:0 auto}.left{ width:300px; height:600px; background:#ccc; float:left;}/*左浮动样式*/.right{ width:640px; height:600px; background:#FCC; float:right;}/*右浮动样式*/你设置右边的宽度不填满外面的蹭就会有中间白色的留白
老师好棒!!!学到了很多知识
.top{height:100px;background:#ccc;}
.main{height:600px;margin:0 auto;position:relative; background:red;}
.left{height:600px;width:200px;background:#00f;position:absolute;left:0;top:0;}
.right{height:600px;margin:0px 0px 0px 210px; background:#1d9;}
.foot{height:50px;background:orange;}

最新回答 / 遗失de回忆
因为视频中给main设置了高度 是600px  实践里没有给main设置高度所以需要清除浮动

已采纳回答 / 一毛钱
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。看看float的定义就知道了
给个赞,老师讲课很吸引人
.main{background: red;height:600px;}
.left{ height:600px;width:200px;background:blue;float: left;margin-right: -100%;}
.right{height:600px;float: left;width: 100%;background:green;float:right;}
.foot{height:100px;background: #FF7F24;}
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消