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

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.60
1991人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
怪不得我搞出来是错误的,第10行多了一个大括号
left框的宽度200px, right框宽度300px,margin 右侧左侧的距离必须分别大于300px和200px才能产生空白。
先给main一个相对定位;position:relative 然后把左边的绝对定位;position;absolute;top:0;left:0; 然后把右边的margin-left:210px
大家测试我的,字数超了,背景bgc代替。
.top{bgc:gray; width:80%; margin:0 auto;}
.main{bgc:red; width:80%; position:relative; margin: 0 auto;}
.right{bgc:green; height:300px; margin-left:210px;}
.left{bgc:blue; width:200px; height:300px; position:absolute; top:0; left:0; }
.foot{bgc:yellow; width:80%; margin:0 auto;}
直接在第九行写上 margin:0;auto 就行啦
老师说话好温油~(●'◡'●)
老师讲得很好,不想听的别瞎xx
还是要多加练习,看千遍不如做一遍
.top{width:100%; height:100px; background:#ccc;}
.main{width:100%; float:left; background:red;}
.left{width:33%; height:300px; background:blue; float:left;}
.right{width:66%; height:300px; background:green;float:right;}
.foot{width:100%; height:50px; background:orange; clear:both;}
2楼的看法不认同,我自己有写过几个项目,现在来回顾知识。一定要活学活用,切记不要学死了
.top{height:40px;width:100%;background:#ccc;}
.main{height:400px;width:610px;background:red;}
.left{height:400px;width:200px;background:blue;display:inline;float:left;}
.right{height:400px;width:400px;background:#40EE40;display:inline;float:right;}
.foot{height:40px;width:100%;background:#FF6600;}
最后一个任务清除浮动是否可以用 float:none ?
真棒 .讲的
任务一的 汉字删除掉
.left{width:200px;
height:500px;
background-color:blue;
position:absolute;}
.right{height:500px;
background-color:aquamarine;
width:100%;
margin-left:210px;
position:absolute;}
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消