项目index总结

 页面效果:

  本次项目用到的语言有html5 css3 scss预处理器  本次项目测试在G3 屏幕1080p分辨率进行

下面开始逐一进行拆解分析结构和代码

首先导航是用header标签来写的 通过iframe标签来进行引入

下面是导航功能标签演示:

划过官方导航时出现的bug有二维码过大 和 划过官方导航时二维码把下面内容撑开 解决方法是让二维码脱离文档流 设置二维吗宽度和高度的大小 

 

 这个效果时用动画的效果来做的

@keyframes identifier {
    0%{
    transform:scale(0);
    }
    25%{
        transform: scale(1);
    }
    90%{
        transform: scale(0.7);
    }
    100%{
        transform: scale(1);
    }
}

   animation-name: identifier;
   animation-duration: 2s;

划过图片时的:hover时增加下边框 期间遇见的bug有划过图片时有位移原因是超出所设置的大小解决方法是给图片也设置一个下边框颜色调成看不见即可或者把你的:hover的边框多出来的像素放到你宽高的值里面