发表于: 2018-07-22 23:23:34

1 624


今天完成的事情:

1.任务五依然没有完成

2.

明天计划的事情:

1.完成任务五

2.开始任务六

遇到的问题:

1.基本都解决了


收获:

第一:先说第一个表格,一根蓝线,一个专业技能字体。

我蓝线一开始用的是给了一个色块,然后绝对定位,给好left和top的值。但是最后检查说这样不行,还是要给一个盒子

用border的right来显示蓝线,给出差不多的位置。

一开始,我怎么调整,也调整不出来那个位置,后来按F12,找到display属性,发现是inline,然后我就在css的里面加了个display:inline-block

.oneLeft{
   display: inline-block;
   margin-top: 37px ;
   width: 26px;
   height: 26px;
   border-right: 3px solid #68cdd5;
}

然后就是,调整方向,位置,到最后,都弄好了。但是唯一没弄好的是最后一行,

因为缩小页面,字体会从线里面溢出去。

咨询了一下旁边的师兄,说左边定宽,右边自适应,才可以达到效果,又要重写。


第二:上面这些行,都是我用绝对定位做的,但是他们都说,用margin和padding也可以达到目的,我想了一下,也是可以的,线就用border-right。

position absolute:这个东西用了之后,就不占据文档流。也就是如果想对子级定位或者平级定位,需要补上原来的空间。

如果是float呢?就要清除浮动。清除浮动,相当于以前占用浮动位置的空间,浮起来了,不占用空间了。清除一下,边角延长,又把以前的空间占住了(可以这么理解)。然后布局就不会紊乱,高度就不会塌陷。


第三:昨天旁边师兄给我讲了讲position和float和占用文档流的区别。

受益匪浅。

position就是定位,加了这个东西,原来在文档流的内容就会浮动起来,不占用以前的空间了。

float是浮动,也不占用以前的空间了。但是这两个空间之间没有关联。

比如一个页面里面,我用了两个position定位,这两个之间,其实也没有关联。

我以前也考虑过这个问题,但是没有考虑那么深,这其实算是css里面最核心的东西,明白了这个之后,其他的都是小问题了。


第四:然后就是这个右边自适应问题了,我找了一下教程,说是左边用float left浮动;右边用宽度100%;

等明天试试,把任务五完成。


进度:CSS任务五

任务开始时间:2018.07.20
预计demo时间:2018.07.22
是否有延期风险:延期半天                       

任务代码地址:任务四的展示:https://kewangbuji.github.io/cssTask/task4/task4.html

任务三的展示:https://kewangbuji.github.io/cssTask/task3/task3.html    (文件名字我改了,现在可以了)


返回列表 返回列表
评论

    分享到