网页布局基础_技术问答

首页免费课网页布局基础问答

网页布局基础

全部评论问答未解决精华

Torry1

超字了，继续……

2 为什么同时设置left和right左浮动后mainbody消失而紫色版权块在右侧？
一个很重要的概念是【被设置float属性的块元素不在文档流中（相当于被拿了出来），所以流中的下一个块元素实际上是在被设置float属性的块元素的下面！但有意思的是，这个在下面的块元素中的内联元素（行元素）依然会围绕被漂移的块元素进行流动分布！！！】。这个概念很重要，（但是老师没有特别强调）。了解了这个以后我们再看上面的问题。left和right被设置了左浮动，mainbody作为空的容器父元素，因为其中的两个子元素已经被“拿”了出来，所以缩成了一个点被left元素覆盖。而下面的

11 3-3 横向两列布局

2016-11-10

Torry1

首先感谢老师贡献这么好的免费课程，而且老师的声音很好听！~ 本人也是小白，刚接触前端一个星期。这个案例非常好，但是有一些问题老师没有详细解释到。查了很多资料，总结一下奉献给大家。

1 为什么单独设置left块左浮动以后，right块依然在left下面？
因为right依然是块元素，要独占一行；

2 为什么同时设置left和right左浮动后mainbody消失而紫色版权块在右侧？
一个很重要的概念是【被设置float属性的块元素不在文档流中（相当于被拿了出来），所以流中的下一个块元素实际上是在被设置float属性的块元素的下面！但有意思的是，这个在下面的块元素中的内联元素（行元素）】

12 3-3 横向两列布局

2016-11-10

慕粉1242542

*{margin:0; padding:0;}
#wrap{width:970px; height: auto;}
#mainbody{position: relative; margin-top:15px;}
#left{position:absolute ;width:110px; }
#mid{position :absolute ;left: 123px;top: 0px; width:650px;border:1px solid #999;}
#right{position:absolute ; left:790px;border:1px solid #999;}

0 5-1 网页布局-编程挑战

2016-11-09

wusolong0

作为小白，觉得老师讲得很好，觉得好的请顶起来

6 2-2 盒子模型

2016-11-09

wzcxing

border ,padding+content内容，background-images，background-color，margin，3D盒子模型

0 2-3 编程练习

2016-11-09

慕粉途远

答案:
#wrap{margin:auto;}
#mainbody{position: relative;width: 100%;overflow: hidden}
#left{width:110px;float: left}
#mid{position:relative;width:650px;loat:left;margin-left:13px}
#right{position:absolute;top:0px;left:794px}
最后的距离应该是 left:110 + mid:650 + margin-left:13 + 边框:4 = right:794

1 5-1 网页布局-编程挑战

2016-11-09

lolly1

我觉得老师讲得思路很清晰明了，非常棒~~

3 2-2 盒子模型

2016-11-08

放开那个周星星

女老师！！

0 1-1 网页布局-课程简介

2016-11-08

慕粉15733293243

为啥我的做出来绿色块在黑色的右下方，不是和黑色并排显示啊。绿色块没有直接顶到红色块上啊。

0 3-5 编程练习

2016-11-08

PCH

很好的理解了浮动和定位的知识

0 4-4 使用绝对定位实现横向两列布局

2016-11-08

qq_杂么说你不懂_0

#right{width:190px;border:1px solid #999; position:absolute;top:0 ;right:0;}
这样可好

1 5-1 网页布局-编程挑战

2016-11-08

qq_嘉瑞科技_04347968

双子座也暂停了……

0 2-2 盒子模型

2016-11-08

简单的复杂1

我觉得讲得不错，不收费已经是很多小伙伴入门的恩赐了，你去看看除了这儿，哪里不收费，站出来，费力录得还吐槽，那你去买来看啊！

2 2-4 自动居中一列布局

2016-11-07

qq_小白菜_13

呵呵真是无语在网上学个免费的课程，你身为一个学生还嫌弃老师普通话讲得不好，爱听不听啊，本来老师就没收你钱，基本的尊师重道都有好多人不懂，还有嫌老师讲的差的，嫌老师讲的差你就别听啊，那么多课程又没逼你们听课。你们的行为真的让我想起了以前报道的新闻，餐馆老板免费给环卫工人发放馒头，还有人不想吃馒头要求老板退钱的。老板不退钱还打砸餐馆。我觉得你们和他们的行为就是50步和100步的区别。老师辛苦录的一段教学视频，不管讲的好还是不好，让你们这些嫌这嫌那的人观看了，我真心替老师感到不值。而且你们这些要求老师普通话要讲的标准还要课讲得好的，推荐你们别看免费课程的，去看收费课程。

14 2-1 网页布局相关知识点讲解——标准文档流、块级及行级元素等

2016-11-06

墨遥4328677

居然可以下载ppt，简直是良心啊

5 2-3 编程练习

2016-11-06

首页上一页 48 49 50 51 52 53 54 下一页尾页

该课程已下架

课程须知: 1.一定要对HTML+CSS相关标签有所掌握；2.对网页布局知识有简单的了解

老师告诉你能学到什么？: 1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局；2.精通标准文档流、盒子模型、float属性以及position属性等知识。

微信扫码，参与3人拼团

热搜

最近搜索清空

网页布局基础