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

如何用CSS进行网页布局

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

最新回答 / Geminihope
如果你想设置main的具体宽度,则大于等于left和right的宽度。大于left和right可以显示middle,如果是等于则left和right所在的那一行就无法显示middle。如果middle的高度大于left和right,则下方可以显示
开场音太大,课程音太小
使用了margin-left所以使用clear both 加上保险
可能右边内容不足, footer会跑到上面去。
clear:both 清楚浮动
foot{}里为什么要加:clear:both??

已采纳回答 / 浮生若梦_0023
就把righe 标签 写在前面呀 ~ 他本来的代码 就是把 right 写在前面的! 你只需要绝对定位 left  ,然后right 用margin-left:210px;就好了

已采纳回答 / 慕侠5947235
你是不是看错 height和width的值了。。
浮动为什么不可以?
开场音乐老是吓一跳,建议去掉
首先清除一下样式 body{margin:0;padding:0}
让总的外框的外边距和内边距为0.
margin:0;框外边距为零!
padding:0;框内边距为零!
margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right
因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)

最新回答 / 咸鱼的日常
<...图片...>首先看这个要求,上面top,中间main颜色红色,left和right本来是在红色的main下面的,所以需要设置浮动和绝对定位,把left和right浮动到上面,然后下面有个foot,难点就在不改变<...code...>right和left的顺序的前提下,实现如图所示的布局,所以单一的float已经不行了,需要用到绝对定位。完整代码如下所示,你先理解理解,当然我的方法不是唯一的,也有其他方法能达到同样效果。<...code...>
.top{width:600px;height:60px;background:gray;}
.main{width:600px;background:orange;position:relative;}
.left{ width:100px;height:300px;background:blue;position:absolute;top:0;left:0;}
.right{height:300px;background:green;margin-left:110px;}
.foot{width:600px;height:40px;background:red;}
很柔和的雄性生音!

已采纳回答 / honoril
若不设置浮动,两个板块就会按照代码输入顺序上下排列而不是左右排列了。可以试一下。
这个是觉得是对“Clear:both”解释比较清楚,大家可以看下 http://www.divcss5.com/jiqiao/j406.shtml
.main{ height:500px; background:#F00; position:relative;}
.left{ width:200px; height:500px; background:#00F; position: absolute;}
.right{ width:calc(100% - 205px); height:500px; margin:0 0 0 205px; background:#90EE90; position: absolute;}
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消