发表于: 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的用法和区别;

三、初步学会了翻转效果的制作;

四、养成随时记录笔记的习惯(这一点很重要)


返回列表 返回列表
评论

    分享到