一、今天完成的任务:
1,任务八,三个PC端页面
2,制作carousel
- 尽量用html+css写出了正文页样式
二、遇到的问题:
task8的前两个页面进行的还算比较顺利,虽然仍需时不时修改有关float、position、padding和margin的数值,但基本上都能有着较为清晰的结构思路。
但是第三个页面的鼠标滑过显示隐藏div的问题是我之前都不曾遇到过的。因为当我试着尝试使用display:none和display:hidden的样式时,hover浮现的div却就原来div里的内容挤出,并不不符合要求。
我需要的,是一个div重叠在另一个div上,平常时不会显现,但是当鼠标滑过时会以半透明的方式出现。
在花时间在网络上查阅了有关资料后,我发现了 opacity: 0;filter: alpha(opacity=0);关于透明度的属性。
最后的成果是:
.mywrap{z-index:1000;height:530px;width:100%;position:absolute;background:rgb(61,61,61);filter: alpha(opacity=0); opacity: 0;left:0;}
.mywrap:hover { filter: alpha(opacity=90); opacity: 0.9;}
三、收获:
进一步熟悉了栅格式的使用,并新学会了如何鼠标滑过在原div上显示隐藏div。
四、存在问题
关于task8页面导航条的样式,我尝试了多次,没有能做到与psd中一样。
四、明天的计划:
就task8存留的问题进一步改进,并继续往下学习。
评论