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

如何用CSS进行网页布局

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

已采纳回答 / qq_猜不透_8
添加样式 margin:0 auto;就可以实现main和footer居中对齐

已采纳回答 / nishigui
我也出现了同样的问题,但是这个代码我在dw上写了,都显示出来了,所以我觉得应该不是代码的问题。遇到这种问题找不到为啥的先换个地方写一下,再说吧。望采纳。

已采纳回答 / 慕勒4413983
.main{width:100%;height:600px;background:#00F; position:relatve}.left{ width:200px;height:600px;background:#3CC; ;top:0; left:0}.right{width:80%;height:600px;background:#F33; margin-left:210px;position:absolute}可以回顾一下相对定位与绝对定位

已采纳回答 / Hbrsql
"margin-left:210px;"可以使.right DIV右移210px,已达到实践的效果.position:abosolute;right:0;top:100px;也能达到同样的效果.要实现同一种效果,可能有好多种方式,选择自己认为较优的即可.

已采纳回答 / MrRon
定位错了:posiition:absolute;

已采纳回答 / 恺大帝
颜色后面加上;

已采纳回答 / 慕粉4013882
在html里面先写right  再写 left就行了啊  

已采纳回答 / lsnFor
首先你要理解文档流和浮动:文档流:自上而下,从左到右。浮动(两张纸叠放,最下面的是文档流,上面的是浮动元素的位面):脱离文档流。然后分析问题:top元素的子元素head,高度100px,存在于文档流中main元素的子元素left,right高度600px,浮动,脱离文档流footer元素,高度100px,存在于文档流中。文档流(底层)top元素后紧跟footer元素,并不受浮动元素影响,因为不在同一个位面。

已采纳回答 / stone310
relative是相对定位,占空间,absolute绝对定位,不占空间;right块宽度问题发下代码

已采纳回答 / 天生我才必有用哈
标签加上float属性后,会脱离文档流显示在文档流的上面,就是后加载

已采纳回答 / 拴栓
这样一串连续的字符会被创建为一个无名块框,如果中间没有空格,默认不会换行,可以改变换行机制,对middle设置word-wrap: break-word; 让其强制换行,即使没有空格也换行,一般连续的一串字符是一个单词(word),所以是break-word;也可以设置overflow:hidden或者overflow:auto,这样会自动隐藏溢出的内容或者出现滚动条;

已采纳回答 / 慕沐9651679
你的right部分  position:absolute  只有设置了top:0,未定义left 和right,则默认值为auto。如果left或right的值为auto,则元素的顶端或者左边(从左往右读)要相对于其未定位前本来的顶端或左边对齐。

已采纳回答 / 慕勒6241362
看看这个有没有帮助http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

已采纳回答 / 慕尼黑6530071
clear:both对于父包含没有效果,只适用于紧邻后面的元素

已采纳回答 / 慕虎9205161
首先,答案有很多种,很简洁的如下.top{height:100px;background:#ccc;}.main{height:500px;background:red;}.left{width:30%;height:500px;background:blue;float:left;}.right{width:65%;height:500px;background:green;float:right;}.foot{height:100px;background:yellow;}width:100%;这玩意...
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消