发表于: 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,以前没有仔细研究过,这个东西其实挺好玩的。
前三个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
评论