发新贴  快速回复

老师您好,请您帮我看一下代码。

  昀朵一枚
2017-06-14 17:26

1.在这个练习中,我把背景图中放了很多元素,可能是偷懒了。

2.在ball这个class中,div的布局好像有问题,在调试界面看,包不住里面的内容。

3.在下方li标签中,竖线的位置不对,但是又不知道怎么调整,请您指教。

4.谢谢您。

附件下载:
 

本帖内容针对以下视频发布:

4-浮动(float)练习
 
TOM-c

1.在背景图中放很多东西是肯定不行的 把所有的内容都包在div中,然后分好区块去实现

2.ball这个class是因为你整体布局不正确所导致的 

3.li标签中的竖线你当做背景图片来做是没错的  不过背景图片不仅仅可以使用left,top这样的关键字去调整位置,也可以使用具体的像素调整位置哦

4.不客气

2017-06-15 14:42  回复本帖
 
TOM-c

另外,你这个布局思路比较乱,建议你多看看html5基础视频

2017-06-15 14:42  回复本帖
多多

下载后压缩包无法解压,无法看到源码。

根据文字描述大概判断下问题。

 

 

【在ball这个class中,div的布局好像有问题,在调试界面看,包不住里面的内容。】

这个问题属于浮动后浮动元素的父级高度塌陷,给浮动元素的父级清除浮动即可(推荐使用after伪类的方式)。

2017-06-15 15:15  回复本帖
 
昀朵一枚

TOM-c 2017-06-15 14:42发表的内容:

1.在背景图中放很多东西是肯定不行的 把所有的内容都包在div中,然后分好区块去实现

2.ball这个class是因为你整体布局不正确所导致的 

3.li标签中的竖线你当做背景图片来做是没错的  不过背景图片不仅仅可以使用left,top这样的关键字去调整位置,也可以使用具体的像素调整位置哦

4.不客气

谢谢您 但根据您的指导,我还是没有理清楚思路,不知如何调整。

1.不知道您是否能下载我的代码

2.背景图中我将白色背景和横线都放进去了,不知道您所说的不行,是应将这些单独截出图片吗?

3.布局不正确的问题我明白,但您没有说清楚哪里不正确,所以我还是不知道如何修改。

4.竖线作背景图不仅可以用left,top定位我也清楚,但是用具体的像素值调整位置时竖线位置就不在文字的右侧了。

5.总得来说谢谢您。另外,视频我会继续看的。

2017-06-15 15:58  回复本帖
 
TOM-c

昀朵一枚 2017-06-15 15:58发表的内容:

谢谢您 但根据您的指导,我还是没有理清楚思路,不知如何调整。

1.不知道您是否能下载我的代码

2.背景图中我将白色背景和横线都放进去了,不知道您所说的不行,是应将这些单独截出图片吗?

3.布局不正确的问题我明白,但您没有说清楚哪里不正确,所以我还是不知道如何修改。

4.竖线作背景图不仅可以用left,top定位我也清楚,但是用具体的像素值调整位置时竖线位置就不在文字的右侧了。

5.总得来说谢谢您。另外,视频我会继续看的。

1.我有下载你的源码

2.背景图中放内容的元素是肯定不行的,比如白色色块,直接用背景颜色就能实现了,横线是不是可以用边框? 能用代码实现的尽量不要用图片代替

3.你这布局的最大问题就是层级划分或者说区域划分不明确,每一个内容都应该有对应的区域(这是一个比较抽象的概念,在这里也说不清楚,只能建议你继续看视频~无奈...)

4.竖线作背景图不仅可以用left,top定位,也可以用具体像素,还可以用关键字和具体像素配合,比如你这个 用right 4px 应该就差不多了,这个4px我是随便给的 意思一下,你自己看具体情况进行调整

2017-06-16 07:35  回复本帖
 
昀朵一枚

TOM-c 2017-06-16 07:35发表的内容:

1.我有下载你的源码

2.背景图中放内容的元素是肯定不行的,比如白色色块,直接用背景颜色就能实现了,横线是不是可以用边框? 能用代码实现的尽量不要用图片代替

3.你这布局的最大问题就是层级划分或者说区域划分不明确,每一个内容都应该有对应的区域(这是一个比较抽象的概念,在这里也说不清楚,只能建议你继续看视频~无奈...)

4.竖线作背景图不仅可以用left,top定位,也可以用具体像素,还可以用关键字和具体像素配合,比如你这个 用right 4px 应该就差不多了,这个4px我是随便给的 意思一下,你自己看具体情况进行调整

谢谢您

1.好的我回修改背景。

2.布局我自己看的时候没觉得乱啊,第一个div是全球通业务块,第二个是图片和文字描述,第三是下方的基本业务块啊。

3.我原来是这样写的 right 4px 不知道为什么一这样写,竖线就没有了。

2017-06-16 13:45  回复本帖
 
TOM-c

1. 这个作业应该分两块,一块是上面 最粗的那根红线和全球通这几个字以及下面的图文,这是一块,全球通应该是标题 红线是装饰用的  

第二块是下面的基本业务那里  如果硬是要把下面像你现在那样分成两块也是说得过去的 

2.竖线,我在你的代码里面直接改  right 9px是ok没问题的  你再检查一下是否还有别的什么问题

2017-06-16 16:03  回复本帖
 
昀朵一枚

TOM-c 2017-06-16 16:03发表的内容:

1. 这个作业应该分两块,一块是上面 最粗的那根红线和全球通这几个字以及下面的图文,这是一块,全球通应该是标题 红线是装饰用的  

第二块是下面的基本业务那里  如果硬是要把下面像你现在那样分成两块也是说得过去的 

2.竖线,我在你的代码里面直接改  right 9px是ok没问题的  你再检查一下是否还有别的什么问题

好的 谢谢您了!

2017-06-19 13:55  回复本帖
登录 后才可以发表回复