QQ音乐官网仿写总结

前言

经过前面对学校官网和小米官网的仿写之后，我开始了对QQ音乐官网的仿写，相较于之前对前两个官网的仿写这次的仿写我感觉越发熟练和精确了，从9.29集训到现在10.21独立完成三个官网的仿写任务，其中付出自不必言说，对我而言整个过程是相较于大学之前从未有过的专注和努力，我受益良多，所以在此要特别感谢软件开发基地的各位学长前辈，为我的编程学习指明了方向。

总体思路介绍

在开始仿写QQ音乐官网之前我对整体布局做了大致的划分，根据其背景颜色和各个版块分区，高度统一设置成自适应，让内容自行将其撑开。之后便是根据原官网对其进行测量记录，争取最大程度的复原好每一处细节。

编写过程中的问题及解决方法

说实话这次遇到的问题基本上在写学校官网和小米官网的时候大都已经解决了，所以基本上并没有卡壳的时候，而且编写过程中所遇问题当时就解决了，且在前两个博客中已做描述说明，在此我不再重复了。

核心代码讲解

此次核心代码应该是图片的缩放效果

想要做出图片缩放效果可以先在css中给目标对象加上hover属性，然后用transform: scale();来调整缩放倍数，其中正值是放大，负值是缩小，此外还可以用transition属性来调整动画时间。

如下所示

.box13>div>div>img:hover{
        transition: all 1s;
        transform: scale(1.2);
    }

为了不让放大的图片将盒子撑开，还可以对盒子设置overflow：hidden即溢出隐藏效果，这样就可以让图片只在盒内放大显示。

总结心得

此次对QQ音乐官网的仿写我感觉尤为轻松，在经过了三次仿写后我总结了许多经验，也收获了很多新知，但同时也让我明白未来的学习之路还很长，持之以恒的学习是很有必要的，所以我也较为期待接下来投入到js的学习中去，未来写出动态可与用户交互的页面。感谢观看。