发表于: 2016-06-19 11:29:09
1 1270
今天完成的事情:task8完成;
接下来要做的事情:task9;
遇到的问题:
一、字体:我使用的VS软件中没有朗倩字体,所有我用的是雅黑来代替的;
二、hover鼠标悬浮时出现伪类样式:如果有两个元素a b 现在需要鼠标悬浮在a 上,而效果出现在b上时,分两种情况而论:1、a是b的父级,此时的语法:a:hover b{};2、a是b的兄弟元素,此时的语法:a:hover+b{};但是在我做的时候有些时候语法2出现失效的情况,这么做是不是有什么前提条件?
三、task8中鼠标悬浮时旋转效果的实现,我的只能总结如下:
1、需要两个属性配合:backface-visibility:hidden|visible;(该属性的效果为:某一元素的背部——就是将元素的反面显示在屏幕上——是否可见)和transform:rotateY(xxdeg);(该属性的效果为:绕X|Y|Z轴进行旋转)
2、由于是动态效果,所以需要设置初始状态和终止状态——就task8来说:初始状态为:(1)元素背部朝上——此时设置:trasnformY(180deg)——表示元素初始状态时是旋转了180度,背部朝上;(2)背部朝上并且隐藏——此时设置:backface-visibility:hidden;——表示元素背部朝上后不可见(如果设置为visible,则会出现镜像,屏幕上显示的元素内容为反的)。
3、终止状态:transformY(0deg);并且需要设置翻转过来所用时间:transition:2s;这样基本就可以完成一个翻转效果了。
收获:
一、找到了适合自己的学习方式:
1、任务开始前:看同学们的日志,找重难点;
2、根据重难点和PSD图来查找资料;
3、开始拆解网页分为几个盒子模型以及盒子模型该如何进行嵌套;
4、开始进行任务。
二、了解了word-wrap和word-break的用法和区别;
三、初步学会了翻转效果的制作;
四、养成随时记录笔记的习惯(这一点很重要)
评论