网页布局基础_技术问答

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

网页布局基础

全部评论问答未解决精华

LittleLeeZi

老师讲得很好，很仔细，学到了很多东西。

2016-12-28

慕粉1434583780

讲解内容清晰明了，结合案例说明。对于方法的实现条件和局限性进行说明，非常好。辛苦了！

2016-12-28

慕沐4465960

左边少了个border 复制mid里面的加上就好了

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

2016-12-28

慕粉4382624

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

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

2016-12-27

热爱javascript

对于父元素的影响清除就是：width:100%;overflow:hidden;

对于自己临近的清除就是：clear：both;

0 3-5 编程练习

2016-12-27

鬼知道我经历了什么

content里的width应该是732px

3 2-2 盒子模型

2016-12-26

晨影影

设置偏移量但是无已定相位的父元素，在分析以html为偏参照基准还是以body的时候没看懂，谁能解释下，我看9分12秒和9分18秒没啥区别┭┮﹏┭┮

1 4-3 绝对定位

2016-12-26

慕粉213410283

第二种就是给mainbody设置overflow：hidden并设置宽度， overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。
缺点是不能和position配合使用，因为超出的尺寸的会被隐藏。
所以推荐在没有position布局和float布局混合使用的情况下使用。

0 3-5 编程练习

2016-12-25

慕粉213410283

清除浮动除了视频讲解中两种方法以外还有很多方法（视频讲的还是很浅的）
第一种clear：both，清除临近的元素的浮动影响，可以通过在mainbody中加一个空div，给空div设置clearboth。
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
<div class="clearfloat"></div>
</div>
css中加代码：
.clearfloat{clear:both；}
缺点是需要加一个空div，会造成结构混乱，所以不推荐。

0 3-5 编程练习

2016-12-25

慕运维2579031

这视频可以下载嘛？

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

2016-12-25

良木

当块级元素设置float:left;或position:absolute;时，对隐性的改变元素的display属性为inline-block，所以元素的宽度才会随着内容进行调节

0 4-3 绝对定位

2016-12-25

wsjx

使用 overflow 默认值（visible）以外的值将创建一个新的块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会强制（重新）包围内容元素。 (个人理解) 因为left与right漂浮于mainbody上方，导致left与right会超出mainbody块所能包含的区域，为了让mainbody块能够包裹住left和right，会强制性创建一个区块将left与right包裹住，所以mainbody的高度会包裹住left与right。

0 3-3 横向两列布局

2016-12-24

wsjx

设置了浮动是脱离标准文档流的，视频里讲错了。

1 3-1 浮动布局简介及float属性

2016-12-24

调调37

#wrap{width:970px;margin:0 auto;}
试了之后才知道效果吧。
#mainbody{width:100%;overflow:hidden;position:relative;margin-top:15px;}
#left{float:left;width:110px;}
#mid{float:left;width:650px;border:1px solid #999;margin-left:13px;}
#right{position:absolute;left:792px;border:1px solid #999;}

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

2016-12-24

AndyAlien

PPT效果很不错，赞一个

1 2-2 盒子模型

2016-12-24

首页上一页 36 37 38 39 40 41 42 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

网页布局基础