摘要：因为互联网的快速发展，前端技术的不断更新与进步，越来越多人都有建一个自己网站的想法，这时合理运用html和css等前端语言来搭建一个属于自己的网站就显得非常时尚而且有意义，在这种背景下产生了大量有趣且富有个性的个人网站，而且在这个过程中制作者也充分提升了自己的技术水平，一个成功的个人网站不仅在功能上有所体现而且整个界面的设计感也是非常重要的。 

本人制作的网站从刚能上属于音乐网站，个人网站相当于一个人与人交流的平台，如果每个人都拥有属于自己的网页，那么无论我们是否在线，别人都能通过此网页了解我们的个人想法、信息、知识、见解等。本次毕业设计的原型采用了RP来制作原型，实现大致页面跳转的合理逻辑，确认无误后利用Photoshop，illustrator等设计工具对网站界面进行设计工作，再使用html/xhtml，css等前端开发语言进行页面编写，运用JavaScript，jQuery库进行网页动效的实现，此毕设包含音乐网站首页，音乐播放功能，推荐歌单，网站信息几个模块。

关键词： html  css  JavaScript  人机交互设计

目录

摘要

ABSTRACT

1绪论-1

2 相关技术介绍-1

2.1  UI设计概述-1

2.2  html/css简介-2

2.3  音乐网站需求概述-5

3 需求分析及界面设计-6

3.1  网站需求分析-6

3.2  网站功能模块设计-6

3.3  网站界面设计-7

4 相关技术介绍-10

4.1 轮播图制作-10

4.2网页导航及锚点的制作-12

4.3 网站页面的实现-12

5 总结与展望-16

致谢-18

参考文献-18