网页布局基础_技术问答

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

网页布局基础

全部评论问答未解决精华

唐糖唐

那个边距写两个值不就行了吗

0 2-2 盒子模型

2015-10-21

傲雪骑士

对于父元素的影响清除就是：width:100%;overflow:hidden;
对于自己临近的清除就是：clear：both;感谢我吧同志们
所以上面的答案就是：一：width：100%；overflow：hidden；
float:left;float:right;然后放大看这样小屏是看不到的。。。

89 3-5 编程练习

2015-10-21

easyschen

感觉听不懂了 = =

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

2015-10-20

求教，left 和 mid 部分没有被边框包裹，问题出在哪里了？

已采纳回答 / 躺平的momo

你的left部分没有设置border

1 回答 348 浏览 5-1 网页布局-编程挑战

2015-10-20

overflow属性能再详细的介绍下吗？ W3School上的没看。。。

最新回答 / Y_du

http://www.w3school.com.cn/cssref/pr_pos_overflow.asp 有的，在W3School上。

1 回答 339 浏览 3-5 编程练习

2015-10-20

为什么我在mainbody left right 中填入了许多文字，不用清除浮动也可以达到相同的效果呢？

最新回答 / 618463

你这个其实并没有清除浮动，你没有设置高度！但你设置了左右浮动，所有最大宽度已经被限制死！如果没有内容，就会被压缩成一条直线，不可视，但你填充了大量文字或者内容，所以相应地压缩无法完成，mainbody就会一直被撑开！！只能这么解释了！！这么做有效果，但是实际没有意义！这种发现其实意义不大！！！得按游戏规则来玩！

1 回答 291 浏览 3-3 横向两列布局

2015-10-20

慕頭向

真心废话太多，

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

2015-10-19

慕頭向

多出来的边其实是用padding挤图片的时候产生的，padding会把盒子撑大的。个人的一点拙见，希望可以多交流。

0 2-2 盒子模型

2015-10-19

秦小涛FM

老师讲得很不错，浅显易懂。

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

2015-10-19

margin 实现居中 width 必须是 %形式 px的不行吗?

最新回答 / 呦呦慕粉

各位回答的真的是，，，，，，B选项用的是padding，，不是margin，。。还有用具体的px可以啊，没啥不妥。。。。

5 回答 388 浏览 2-6 练习题

2015-10-19

A级流寇

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

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

2015-10-19

A级流寇

我觉得老师的声音很好听，表达逻辑很清晰明了。很明显在教学大纲上下了很多功夫，只是发现在讲解img标签时可能让多数人误会img标签同span元素一样，这里帮大家澄清一下img元素是行内元素，非内联元素，且img元素的表现同inline-block相同， img作为一个可替换元素，可以设置内容的宽高，和上下的外边距，这在内联元素中，如span 是做不到的。

3 2-2 盒子模型

2015-10-19

两种布局方式比较

已采纳回答 / 子木李

看你的需求，如果是为了让元素能够在父元素内准确定位，则用position定位，举个例子，如漂浮的窗口、回到顶部按钮，如果只是为了把块级元素在一行内显示，则用float，用法float的例子:如横向的导航栏，将几个li显示在同一行，构成导航栏。一般来说，可能position用的更多一些，因为它能够精确定位，然后子元素相对于父元素的位置不会由于浏览器大小改变而改变

2 回答 502 浏览 5-1 网页布局-编程挑战

2015-10-18

菜菜的小鸟

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

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

2015-10-18

洪小仔

非常好，大爱!!!!!!

0 4-3 绝对定位

2015-10-18

qq_这都不是事_0

#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{【任务2】width:110px;float:left; }
#mid{【任务2】width:650px;border:1px solid #999; float:left; margin-left:13px;}
#right{【任务3】border:1px solid #999; top:0; position:absolute; margin-left:790px;}

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

2015-10-18

首页上一页 233 234 235 236 237 238 239 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空