毕业设计基于BS架构的音乐欣赏网站设计与开发

（4）Cliplist表：该表用来存放音乐固定专辑（唱片公司发行的）信息，由于本网站规模和本人对专辑认识的限制，对专辑属性的设置相对比较简单。因为专辑英语音乐术语“多对多”关系，所以在此表中不设置与音乐的关联，将关联写至Cm表，Cliplist表结构如表4-3-4所示。 列名 类型 主键/外是否为键 空 Idcliplist Int (4) 主键 否 ClipName Varchar N/A 否 (50) Player Varchar N/A 否 (50) PubYear Datetime N/A 是 Com Varchar N/A 是 (50) Cover Varchar N/A 是 (50) 备注/说明 代理主键，内部使用唯一标识，自增 专辑名称，不唯一 专辑出品人/作者 专辑发行时间 发行专辑的公司 专辑海报/封面图片的存储地址 表4-3-4 Cliplist表结构

（5）Cm表：该表是music表和cliplist表的关系表，用来处理音乐和专辑的关系，这里一个音乐作品可以属于多个专辑，同时一个专辑包含多个音乐作品。Cliplist表结构如表4-3-5所示。 列名 类型 主键/外是否为键 空 ID Int (4) 主键 否 Name Int (4) 外键 否 Musicid Int (4) 外键 否 备注/说明 代理主键，内部使用唯一标识，自增 专辑id，专辑表里的主键，作为外键使用 音乐id，音乐表里的主键，作为外键使用 表4-3-5 Cm表结构

五、代码实现与运行图

（一）创建CSS文件 样式定义，统一页面风格

body {

font: 14px \

background: #333; color: #fff; } a {

outline: none;

text-decoration: none; } .left {

float: left; }

.right {

float: right; }

.clear {

clear: both; }

#background { background: url;

background-size: cover; position: fixed; top: 0; left: 0;

width: 100%; height: 100%;

-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }

#player {

width: 500px; height: 130px; padding: 25px;

margin: 50px auto 30px; position: relative; }

#player .cover {

background: rgba(0, 0, 0, ; border: 1px solid #333; position: absolute; top: 25px; left: 25px;

overflow: hidden;

-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; width: 130px; height: 130px;

-moz-box-shadow: 0 2px 10px black; -webkit-box-shadow: 0 2px 10px black; -o-box-shadow: 0 2px 10px black; box-shadow: 0 2px 10px black; }

#player .cover img {

-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; width: 130px; height: 130px; }

#player .ctrl {

margin-left: 155px;

text-shadow: 0 1px 2px #000; line-height: 16px; }

#player .ctrl .tag strong, #player .ctrl .tag span { display: block;

text-overflow: ellipsis; }

#player .ctrl .tag span { font-size: 12px; margin-top: 5px; color: #ccc;

（二）播放器Jquery实现代码 (function($){ p3', cover:'img/',

mp3: 'mp3/格子兮、牙牙乐 - 秋殇别恋.mp3', ogg: ''

}, {

title: '亡灵序曲', artist: '魔兽世界',

album: '魔兽世界 - 亡灵序曲.mp3', cover: 'img/', mp3: 'mp3/The ', ogg: '' }, {

title: '别再让步', artist: '童可可',

album: '童可可 - 别再让步.mp3', cover: 'img/',

mp3: 'mp3/童可可 - 别再让步.mp3', ogg: '' }, {

title: '漂洋过海来看你', artist: '丁当',

album: '漂洋过海来看你 - 丁当.mp3', cover: 'img/',

mp3: 'mp3/漂洋过海来看你 - 丁当.mp3', ogg: '' }, {

title: '龙的传人', cover: 'img/', artist: '成龙', album: '龙的传人',