第三次作业中的不足与总结

QQ音乐

这一次通过模仿QQ音乐的客户端，对前端网页的制作有了更多的了解，并且已经能大体模仿出QQ音乐的样式，但其中还有点不足的地方。

第一个问题

左边列表我选择分成两个div，然后遇到了第一个问题，就是左边的图片和右边的文字不能很好的结合在一起，我选择建立七个div，把图片作为背景图片，设置在左边，再将文字以右浮动，显示在图片的右边，但和原版对比，显示出一个问题。

（下图为原版）

我做的图片和上边左边的边框没有距离，文字也是顶着上边框，这个也显得比较短小，没有原版看起来的舒服。

对于图片和文字的处理有个想法，就是在这个div内，在设两个div，一个是图片，一个是文字，这样方便改变图片的位置，但因为后来代码量变多，没有随意更改。

第二个问题

第二个问题就是头部搜索框的问题。

（下图为原版）

同样是图片和文字的问题，我还是将图片作为背景图片放在这个input中，但远没有原版看起来的圆润。

（下图为原版）

然后就是点击搜索的时候，原版的搜索框内的文字会消失，图片会移到最右端，而我做的图片因为是作为背景图片，无法移动，提示文字也没有消失。

第三个问题

第三个问题就是最上方的快捷栏的问题。

（下图为原版）

因为一开始看到客户端的快捷栏那有hover的显示效果，所以我将快捷栏的图片放在超链接标签内，但在最后添加hover时候，原版会显示为绿色，我的无法显示出颜色。四个伪类都无法显示。但给文字添加伪类的时候显示正常，我猜测是因为将图片作为超链接，给图片施加伪类，就无法显示出hover的效果。

第四个问题

第四个问题就是CSS的代码问题。在我的CSS中，有很多div的样式元素相同，有些的数值也相同。我觉得这些相同的地方分开写会显得多余冗长，也试过将相同数值的元素放在一起写，但没得到想要的效果。我觉得将相同数值的元素放在一起能够很好的减少代码量，但有一个改动就会改动很多的地方，分开写或许显得代码很长，但是方便每个节的单独修改。还有就是在变动文字图片位置的时候，拿不准位置的距离，一时会想不到合适的元素，会用padding和margin去调试。

登录界面的模仿

在模仿QQ音乐之前，我模仿了一个登录界面，正通过这个页面的模仿，对原本不太了解的div有了基本的运用能力。在模仿这个页面的时候，也产生了一些问题。

从CSS的25行往后，名称那一栏都有.bigBox .inputBox，起初反反复复的删除对比，发现页面没有变化，通过请教学姐和百度，重新理解了下CSS样式中，空格和逗号的区别。后面都是前面的子元素，定义的是最后的那一个元素。

因此对这个部分CSS的前面元素删除后页面发生变化也理解了 ，在这个页面中有三个input，两个是在class为inputText中，这部分定义的就是这两个CSS，删除后，定义的是三个input。

QQ邮箱的模仿

QQ邮箱的模仿是第二个模仿的页面，经过登录界面的模仿，对邮箱的模仿熟悉了点，但还没有做全，即使熟悉了点，中途也参考了下页面的源代码。也通过邮箱的模仿，会运用fixed，和absolute两个定位元素。也见到几个没用过的元素，并能在实践中运用起来。

总结

登录界面和邮箱的模仿都有源代码能参考，而QQ音乐的模仿是第一个单独完成的页面，通过对这个三个页面的模仿，我发现在CSS中body的margin：0和padding：0两个元素对于页面起到了很大的作用。

QQ音乐的模仿虽然没有做到最好，但在模仿因为没有找到简便的调整图片文字的方法，所以用了很多的绝对定位，对绝对定位的用法有了更多的了解，对每一节的margin和padding也能够较为熟练的运用起来。对于前端网页的开发也有了点手感。

到最好，但在模仿因为没有找到简便的调整图片文字的方法，所以用了很多的绝对定位，对绝对定位的用法有了更多的了解，对每一节的margin和padding也能够较为熟练的运用起来。对于前端网页的开发也有了点手感。

在制作过程中，也显露出了很多的不足，在日后希望能补足并更进一步。