发表于: 2018-05-13 23:15:49

2 684



今天母亲节,祝天下母亲节日快乐,身体健康~!

今天完成的事:

1、任务八进行中,感觉跨度有点大。第一个页面比想象中的复杂,但是写了大概百分之70左右。还差一点两行和底部的东西。今天全一头扎在任务里面了,差点忘了写日报...


明天的计划:

1、继续任务8,写好第一个页面,第二个也要完成百分之50;好像第二个页面没那么复杂。


遇到的困难:

1、昨天的轮播图问题,一个是我类名冲突,一个是我没有引用bootstrap文件,header部分的引用有问题。

2、今天反复用bootstrap的栅格布局,晚上的时候,有个小问题困扰了我很久:

怎么平分上面的4个colunm?

..由于我使用flex中的justify-content:space-between属性所以,最后一个colunm的样式总是觉得不对劲。第四个colunm分布元素只有两个,和前面的三个colunm的元素间距不一样,如果单独去设置第四个colunm的样式,会比较麻烦。

后面,突然想起前天任务7的时候用过的visibility:hidden属性。在第四个colunm里面加上一个隐藏的img(第三者),就很好解决了。

类似于空占位的想法,有时候挺好用。


收获:

1、今天主要是做任务了,新知识学习的不是很多,主要是对bootstrap栅格布局的使用熟练了一些,然后过程中更多的是对之前的一些知识的巩固。还是不够熟练吧,做网页过程总是一点点试,然后写完刷新,不对,在换一种写法。希望以后能熟练的减少尝试次数,构思清晰简便点,磕磕碰碰写完效率挺低的...

2、今天看了一下box-shadow,以前没有仔细研究过,这个东西其实挺好玩的。

box-shadow属性让盒子在显示时产生阴影效果。
box-shadow属性的指定方式如下所示:
box-shadow:length length length color

前三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径,color指阴影的颜色。还可以设置内阴影。

举个栗子:   

box-shadow:inset 0 0 5px 5px #888;/*内部阴影的水平方向与垂直方向上的偏移量距离均为0,模糊半径与展开半径均为5px*/

之前看过一个纯CSS的demo,用div+amnitation+boxshow写的一个发射子弹的坦克,所以印象深刻,有兴趣的可以试试。


进度:CSS-任务8


开始时间:2018.05.12

  

结束时间:2018.05.16


有无延期风险: 无。

禅道:http://task.jnshu.com/zentao/my-task.html


任务7总结

任务名称:CSS=TASK7

成果链接:https://kattemchen.github.io/Task/mytask7/css-7/html/page1.html

任务耗时: 2018.5.7-5.11(4天)

技能脑图:

官网脑图:

自己脑图:


任务总结:

task7三个页面的制作,整个过程中算是难度的一个提升吧。中间涉及的知识比较多,但更多的是对以前的知识的复习吧。

因为运用的bootstrap比较多,所以在清除默认样式,涉及到一个权重问题(脑图没给,因为觉得这个问题挺复杂的),总的知识太多,却很重要,慢慢积累吧。

然后是关于ulr的路径问题,之前没有仔细想过。所有的ulr都是基于你的文件当前路径,如果你写在css上,那么它就是按照你的CSS文件当前算,如果你写在HTML,那么就是基于你的html文件路径算。../可以退回上级目录。

还有一个难点就是关于z-index的问题,我琢磨了很久。这是网上的七阶图,具体可以看这里,详细很多:https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892



返回列表 返回列表
评论

    分享到