音悦商城项目报告

• 项目设计

首先构思好整体网页的布局，然后使用html以及css实现音悦商城整体的页面布局以及页面的美化效果，以及各个页面的跳转等功能，最后使用iframe将头部和底部两个公共部分与其他页面组合在一起。

• 项目模块设计

2.1头部和底部部分

头部部分：

 

头部部分由顶部官方部分，中间搜索栏部分以及底部艺人分类三部分组成使用flex弹性布局完成，右侧鼠标移动上去弹出二维码，使用display:none隐藏，然后用:hover设置移动弹出

底部部分：

由上边图片和下边文字部分组成

2.2首页部分

首页部分整体使用flex弹性布局完成页面的整体布局

首先最上边是用css3动画完成的一个类似轮播图的效果

其次就是追星必备板块和TOP榜板块，也是用flex完成，然后使用CSS3进行美化

然后TOP榜部分添加了一个缩放的动画效果，使页面看起来更美观炫酷

最后就是新品首发部分，这部分也是使用flex布局，其中小爱心使用css精灵进行切图，使用:hover来实现小爱心的变换

2.3专辑部分以及独家发售部分

这两个页面都是使用grid网格布局来实现效果的呈现

• 总结

在本次项目中，我收获了很多，但也认识到了自己的诸多不足，比如在构思网页的细节部分，这让我在此次项目中花费了很多的无用功，当然，这也在同学们的帮助下迎刃而解。今后我要更加努力的学习，来弥补这些不足。