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

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.60
1991人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
.top{background:gray;width:100%;}
.main{background:red;position:relative;overflow:hidden;}
.left{background:blue; width:200px;float:left;height:500px;}
.right{background:green;width:100%;position:absolute;margin-left:210px;height:500px;}
.foot{background:orange;width:100%;}
对不对
.top{width:100%; height:100px; background:#DDD;}
.main{width:100%; height:600px;background:red; margin:0 210px 0 0;}
.left{ width:200px; height:600px; background:blue; float:left;}
.right{ width:85%; height:600px; background:#9D9; float:right;}
.foot{width:100%; height:60px; background:#F50;}

最新回答 / Happy_learning
<...code...>你这个问题直接百度一下就有答案的 没必要在这里提问 等别人来答,在得到答案 
...楼下不说还好一说都没心思听课了 都在听 “啊”
锦囊中的代码并不能实现那样的效果好伐
纠结了半天看视频得到解决记录下来问题():
.main,.footer{ width:960px; [任务1]} /*都是原来的代码, 注意最开始设置了个定值 根据之前讲解定值块居中显示的 3点 宽度定值 margin:auto 或者视频讲解 margin:0 auto */
.head{.....}
.main{ height:600px; background:#fcc; margin:auto;}
.footer{ height:500px background:#ccc: margin:auto;}
div{ text-align:left; line-height:50px ;}
.main{ width:960px; height:600px; margin:0 auto; background:white;}
.left{ width:260px; height:600px; background:#ccc; float:left; margin:0 20px;}/*左浮动样式*/
.right{ width:620px; height:600px; background:pink; float:right;margin:0 1px}/*右浮动样式*/
结果图ok,但改的有点多了把。
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc;float:left;}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC;float:right;}


好逗啊!左右的宽度都等于父标签了,中间咋会有空隙呢????
非常好啊,真心不错

最新回答 / 慕移动9181930
对,因为我自己的机器是WIN7,没钱买苹果的本。。其他实验室有,我主要是想体验下Swift,看是否可以入手操作是的,构造方法是必须要和类同名的,但是在其他类中使用时还是需要类名.方法名()这样使用的

最赞回答 / qq_凯瑞同学_0
调整距离顶部的距离为0 就挨着顶部了

最赞回答 / 凉客CMC
.top{magin:0 auto;background-color:gray;}.main{width:100%;magin:0 auto;height:500px;background-color:red;}.left{width:200px;height:500px;background-color:blue;position: absolute;}.right{margin-left:210px;width:100%;height:500px;position:absolute;backgroun...
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消