发表于: 2016-03-17 00:11:14

2 1914


1.今天完成的事:

(1)完成了task8。

(2)了解了css实现翻转的原理和用途,参考文章http://www.webhek.com/css-flip/ ;w3c ;

实现原理大概就是将两个div重叠在一起,设置其中一张背面不显示,同时以-180deg的方式(即背面朝上)存在,然后设置hover,鼠标划过时将这张图片翻转至0deg,再调试下背景颜色,透明度等参数就能实现psd的效果,也可以设置两张同时翻转,就能鼠标划过完全显示另一张。

(3)黄伟师兄来帮忙看了下代码,在他的帮助下修改了task7首页底部栏的一个细节问题。之前自己也注意过但没调试出来,后来才发现是自己在ul宽度设置上犯了个错一直没发现。还是师兄看出来的问题,以后要细心。

2.明天计划的事:

 (1)完成task9.

 (2)task做的要更效率点。。今天跟黄伟师兄对比了下当初他的进度,发现自己太慢了。

3.遇到的问题:

  (1)图片翻转的问题,之前看网上的教程时没太理解怎么实现psd文件上的效果,自己把网上的代码拷下来调了半天也明白单张图片设置翻转和两张同时翻转的区别。

  (2)task7首页底部友情链接栏,之前用ul没能实现对齐,在黄伟师兄的帮助下才发现问题,ul定宽设少了。。

4.收获:

  (1)学会了做翻转效果,好像很有用的样子,做出来的网页看上去终于能动了。被黄伟师兄夸了句这翻转效果做得好!

  (2)要细心细心细心,尤其是回头检查代码的时候。

  (3)黄伟师兄教会了浏览器F12的设置,以后可以方便直接在浏览器里进行调试修改了。。


task8地址:http://119.10.57.67/ptt02/task/task8/task8.html

github:https://github.com/yangxiaokun/cssTASK/tree/master/task8


返回列表 返回列表
评论

    分享到