HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>qq音乐</title><link rel="stylesheet" href="css/qq_music.css" /><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/public.css" /><script type="text/javascript" src="js/qqmusic.js"></script>
</head>
<body><!-- 顶部 --><div id="header"><div class="wrap"><ul class="fr"><li><span>您还未登录,</span><a href="#">马上登录</a><span>|</span></li><li><a href="#"><span id="vip"></span>绿钻</a><span>|</span></li><li><a href="#"><span id="sui"></span>付费音乐包</a><span>|</span></li><li><a href="#">全民K歌</a><span>|</span></li><li><a href="#">QQ演出</a><span>|</span></li><li><a href="#">QPlay</a><span>|</span></li></ul></div></div><!-- 中间主体区 --><div id="center"><!-- 导航栏以及搜索框 --><div id="top"><div class="wrap"><!-- logo --><div id="logo" class="fl"><img src="img/logo.png" height="54" width="182" alt="" /></div><!-- 导航栏 --><div id="nav" class="fl"><ul class="nav"><li><a href="#">音乐馆</a><div><a href="#">首页</a><span>|</span><a href="#">排行榜</a><span>|</span><a href="#">歌单广场</a><span>|</span><a href="#">电台</a><span>|</span><a href="#">歌手</a><span>|</span><a href="#">专辑</a></div></li><li><a href="">MV</a><div><a href="#">MV推荐</a><span>|</span><a href="#">MV排行榜</a><span>|</span><a href="#">MV库</a><span>|</span><a href="#">音乐现场</a><span>|</span><a href="#">MV专题</a><span>|</span><a href="#">巅峰榜盛典</a></div></li><li><a href="">我的音乐</a><div><a href="#">主题</a><span>|</span><a href="#">歌单</a><span>|</span><a href="#">MV收藏</a><span>|</span><a href="#">听众</a><span>|</span><a href="#">收听</a></div></li><li><a href="">下载客户端</a></li></ul></div><!-- 搜索 --><div id="search" class="fl"><form action=""><input type="text" class="text" value="找到好音乐" /><input type="button" class="button" /></form></div></div></div><!-- 内容区 --><div id="main" class="wrap"><!-- 内容区左边区域 --><div id="side_left" class="fl"><!-- 轮播图 --><div id="scroll_bar"><img src="img/1.jpg" height="280" width="700" alt="" /><p id="pre">&lt;</p><p id="next">&gt;</p><div id="circle_section"><p class="circle"></p><p class="circle"></p><p class="circle"></p><p class="circle"></p><p class="circle"></p><p class="circle"></p></div></div><!-- 在线首发 --><div id="online_first"><div class="section_top red_border"><h1>在线首发</h1><a href="#">/更多</a><div class="fr"><a href="#" class="pre"></a><a href="#" class="next"></a></div></div><ul><li class="mg_r_b"><a href="#"><img src="img/online_img/000HbmZA1fHnoD.jpg" alt="" /><h3>中国好声音第三...</h3><span>中国好歌曲</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_r_b"><a href="#"><img src="img/online_img/000xeDc04TWB6K.jpg" alt="" /><h3>神秘世界</h3><span>萧煌奇</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_r_b"><a href="#"><img src="img/online_img/000yVdgC09dcPS.jpg" alt="" /><h3>所谓如君</h3><span>魏如君</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_r_b"><a href="#"><img src="img/online_img/000ZmnKf4fuO0O.jpg" alt="" /><h3>火锅英雄</h3><span>赵英俊</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_b"><a href="#"><img src="img/online_img/001BeN6N1Rte52.jpg" alt="" /><h3>At least for now</h3><span>At least for now</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_r"><a href="#"><img src="img/online_img/002iLj0R01DDgx.jpg" alt="" /><h3>曾经在</h3><span>冲击力乐队</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_r"><a href="#"><img src="img/online_img/002qntlg0OJhb5.jpg" alt="" /><h3>时光机</h3><span>张博林</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_r"><a href="#"><img src="img/online_img/002UHYrG2vReCi.jpg" alt="" /><h3>谁是大歌神</h3><span>谁是大歌神</span></a><p></p><a href="#" class="btn"></a></li><li class="mg_r"><a href="#"><img src="img/online_img/004EvugT3C2fi7.jpg" alt="" /><h3>张磊的</h3><span>张磊</span></a><p></p><a href="#" class="btn"></a></li><li><a href="#"><img src="img/online_img/0012LUMJ3hkJon.jpg" alt="" /><h3>HIM</h3><span>history</span></a><p></p><a href="#" class="btn"></a></li></ul></div><div class="cl"></div><!-- MV首播 --><div id="music_list"><div class="section_top orange_border"><h1>MV首播</h1><a href="#">/更多</a></div><ul><li class="mv_mg_r mv_mg_b"><a href="#"><img src="img/mv_img/1460629184656234110.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li><li class="mv_mg_r mv_mg_b"><a href="#"><img src="img/mv_img/1460686132735178920.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li><li class="mv_mg_r mv_mg_b"><a href="#"><img src="img/mv_img/1460687134603178920.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li><li class="mv_mg_b"><a href="#"><img src="img/mv_img/1460687582500265320.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li><li class="mv_mg_r"><a href="#"><img src="img/mv_img/1460690350742326570.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li><li class="mv_mg_r"><a href="#"><img src="img/mv_img/1460706311470203030.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li><li class="mv_mg_r"><a href="#"><img src="img/mv_img/1460708976431326570.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li><li><a href="#"><img src="img/mv_img/1460724418122326570.jpg" alt="" /></a><a href="#" class="mv_btn"></a><p><a href="#" class="mv_name">点亮万家灯火</a><span>-</span><a href="#" class="singer_name">纪敏佳</a></p><p>北漂经历与感悟，纪敏佳唱...</p><span>2016-04-18</span></li></ul></div><div class="cl"></div><!-- 最新推荐 --><div id="recommend"><div id="new_recommend"><div class="section_top green_border"><h1 class="fl">最新推荐</h1><a href="#" class="broadcast"></a><a href="#" class="add"></a><div class="language fr"><a href="#" class="select">华语</a><span>|</span><a href="#">韩语</a><span>|</span><a href="#">欧美</a></div></div><div class="cl"></div><div class="recommend_list"><ul><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li></ul></div></div><!-- 最热推荐 --><div id="hot_recommend"><div class="section_top green_border"><h1 class="fl">最热推荐</h1><a href="#" class="broadcast"></a><a href="#" class="add"></a></div><div class="cl"></div><div class="recommend_list"><ul><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li><li><a class="recommend_song" href="#">迷雾（《魔宫魅影》电影主题曲）</a><span>-</span><a class="recommend_singer" href="#">A-lin</a></li></ul></div></div><div class="cl"></div></div><!-- MV精选 --><div id="choice"><div class="section_top pink_border"><h1>精选集</h1></div><div class="choice_left fl"><img src="img/choice_img/20151015175001.jpg" alt="" /><a href="#">mv精选</a><br /><span>音乐抚慰青春之痛，追忆那时的蜜语甜言。</span></div><div class="choice_right fl"><ul><li class="choice_mg_r choice_mg_b"><img src="img/choice_img/20151015160855.jpg" alt="" /><a href="#">音乐时尚两不误</a></li><li class="choice_mg_r choice_mg_b"><img src="img/choice_img/20151015160924.jpg" alt="" /><a href="#">相恋跨越时空</a></li><li class="choice_mg_b"><img src="img/choice_img/20151015161017.jpg" alt="" /><a href="#">好的歌手会搞怪</a></li><li class="choice_mg_r"><img src="img/choice_img/20151015161055.jpg" alt="" /><a href="#">静享一曲中国风</a></li><li class="choice_mg_r"><img src="img/choice_img/20151015161125.jpg" alt="" /><a href="#">音乐和短裙最配</a></li><li><img src="img/choice_img/20151015161200.jpg" alt="" /><a href="#">一枝独秀更耀眼！</a></li></ul><div class="cl"></div></div></div></div><!-- 内容区右边区域 --><div id="side_right" class="fl"><div id="user_login"><a href="#"><img src="img/side_right/bg_login.png" alt="" /></a></div><div id="ranking"><!-- 巅峰榜 --><div id="ranking_title"><h3 class="side_right_title fl">巅峰榜</h3><a href="#" class="broadcast"></a><a href="#" class="add"></a></div><div class="area"><a class="select" href="#">流行指数</a><span>|</span><a href="#">内地</a><span>|</span><a href="#">港台</a><span>|</span><a href="#">欧美</a><span>|</span><a href="#">韩国</a></div><ul id="ranking_list"><li class="ranking_one"><span></span><img src="img/side_right/002Ibq0k31FYiu.jpg" alt="" /><a class="ranking_one_song">只是没...</a><br /><a class="ranking_one_singer">张靓颖/王...</a></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li><li><span></span><h5><a href="#">有心无意</a></h5><p><a href="#">本兮</a></p></li></ul><ul class="rank_index"><li class="rank_index_mg_r rank_index_mg_b"><a href="#">iTunes榜</a></li><li class="rank_index_mg_r rank_index_mg_b"><a href="#">美国公告牌</a></li><li class="rank_index_mg_b"><a href="#">英国UK榜</a></li><li class="rank_index_mg_r rank_index_mg_b"><a href="#">iTunes榜</a></li><li class="rank_index_mg_r rank_index_mg_b"><a href="#">美国公告牌</a></li><li class="rank_index_mg_b"><a href="#">英国UK榜</a></li><li class="rank_index_mg_r"><a href="#">iTunes榜</a></li><li class="rank_index_mg_r"><a href="#">美国公告牌</a></li><li><a href="#">英国UK榜</a></li><!-- <li class="cl"></li> --></ul></div><!-- 热门歌手 --><div id="hot_singer"><div class="hot_singer_title"><h3 class="side_right_title">热门歌手</h3><a href="#">/更多</a></div><ul class="singer_list"><li class="singer_list_mg_r singer_list_mg_b"><img src="img/side_right/0025NhlN2yWrP4.jpg" alt="" /><a href="#">周杰伦</a></li><li class="singer_list_mg_r singer_list_mg_b"><img src="img/side_right/0025NhlN2yWrP4.jpg" alt="" /><a href="#">周杰伦</a></li><li class="singer_list_mg_b"><img src="img/side_right/0025NhlN2yWrP4.jpg" alt="" /><a href="#">周杰伦</a></li><li class="singer_list_mg_r"><img src="img/side_right/0025NhlN2yWrP4.jpg" alt="" /><a href="#">周杰伦</a></li><li class="singer_list_mg_r"><img src="img/side_right/0025NhlN2yWrP4.jpg" alt="" /><a href="#">周杰伦</a></li><li><img src="img/side_right/0025NhlN2yWrP4.jpg" alt="" /><a href="#">周杰伦</a></li></ul><ul class="singer_area"><li class="singer_area_mg_r singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_r singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_r singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_r singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_r singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_r singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_b"><a href="#">华语男歌手</a></li><li class="singer_area_mg_r"><a href="#">华语男歌手</a></li><li class="singer_area_mg_r"><a href="#">华语男歌手</a></li><li><a href="#">华语男歌手</a></li></ul></div><!-- 精彩活动 --><div id="activity"><div><h3 class="side_right_title">精彩活动</h3></div><div class="act_content"><div class="rank_index_mg_b"><a href="#"><img src="img/side_right/20160401165031.jpg" alt="" /></a><p><a href="#">[精彩活动] 长江国际音乐节</a></p></div><div><a href=""><img src="img/side_right/20160401165120.jpg" alt="" /></a><p><a href="#">[精彩活动] 光年</a></p></div></div></div></div></div></div><div class="cl"></div><!-- 低栏 --><div id="footer"><div class="wrap"><div class="follow_on"><dl class="soft_download fl"><dt>软件下载</dt><dd><a href="#">PC版</a><a href="#">ipone客户端</a><a href="#">ipad客户端</a></dd><dd><a href="#">MAC版</a><a href="#">Android客户端</a><a href="#">Android Pad客户端</a></dd><dd><a href="#">Windows Phone版</a></dd></dl><dl class="fl"><dt>特色产品</dt><dd><a href="#">车载互联</a></dd><dd><a href="#">QPlay</a></dd><dd><a href="#">qq音乐原创音乐平台</a></dd></dl><dl class="friend_link fl"><dt>友情链接</dt><dd><a href="#">腾讯视频</a><a href="#">手机QQ空间</a><a href="#">最新版QQ</a><a href="#">腾讯课堂</a><a href="#">腾讯社交广告</a></dd><dd><a href="#">电脑管家</a><a href="#">QQ浏览器</a><a href="#">画报</a><a href="#">腾讯微云</a><a href="#">黄钻活动</a><a href="#">星钻</a></dd><dd><a href="#">企鹅FM</a><a href="#">腾讯云</a><a href="#">腾讯云论坛</a><a href="#">兴趣部落</a><a href="#">腾讯云搜</a></dd><dd><a href="#">智能电视网</a><a href="#">当贝市场</a></dd></dl></div><div class="cl"></div><p class="footer_menu"><a href="#">关于腾讯</a>|<a href="#">About Tencent</a>|<a href="#">服务条款</a>|<a href="#">用户服务协议</a>|<a href="#">广告服务</a>|<a href="#">腾讯招聘</a>|<a href="#">客服中心</a>|<a href="#">网站导航</a></p><p class="copyrighten"><span>Copyright © 1998 - 2016 Tencent.</span><a href="#">All Rights Reserved.</a></p><p class="copyrightzh"><span>腾讯公司</span> <a href="#">版权所有 腾讯网络文化经营许可证</a></p></div></div></body>
</html>

css代码

qq_music.css

/*
* @Author: anchen
* @Date:   2016-04-11 21:08:54
* @Last Modified by:   anchen
* @Last Modified time: 2016-07-02 10:29:41
*/
/*header*/
#header{height: 30px;width: 100%;background-color: #2F2F2F;font-size: 12px;line-height: 30px;
}
#header li{float: left;margin-left: 15px;
}
#header li span{color: #8B8B8B;
}
#header li a{color: #B5B5B5;display: inline-block;margin-right: 10px;
}
#header li a:hover{color: #00FF66;
}
#vip{display: inline-block;width: 24px;height: 24px;background: url(../img/vip.png);vertical-align: middle;
}
#sui{display: inline-block;width: 24px;height: 24px;background: url(../img/sui.png);vertical-align: middle;
}
/*header*/
/*center*/
#top{height: 113px;width: 100%;border-bottom: 2px solid #DDDDDD;
}
#top img{margin-top: 30px;
}#nav{margin-left: 56px;height: 113px;
}.nav li{float: left;padding: 48px 20px 10px 20px;background: white;position: relative;
}
.nav li a{color: #686868;font-size: 16px;
}
.nav li:hover a{color: #EFFAF3;
}.nav li:hover{background: #0DAD51;color: #FFFFFF;
}.nav li div{position: absolute;bottom: -12px;display: none;
}#search{width: 232px;height: 45px;margin-left: 107px;margin-top: 36px;background: url(../img/frame_bg.png)no-repeat 0px -160px;
}
#search .text{color: #C3C3C3;margin-top: 12px;margin-left: 18px;border: 0px;width: 170px;
}
#search .button{width: 25px;height: 25px;margin-left: 2px;border: 0 none;opacity: 0;cursor: pointer;
}#main{margin-top: 18px;
}
#side_left{width: 700px;
}
#scroll_bar{position: relative;height: 280px;width: 700px;
}
#pre,#next{position: absolute;width: 40px;height: 80px;background-color: #000000;color: #ffffff;line-height: 80px;text-align: center;font-size: 40px;opacity: 0.6;top: 100px;cursor: pointer;
}
#pre{left: 0px;
}
#next{right: 0px;
}
#pre:hover,#next:hover{opacity: 0.7;
}
#circle_section{height: 20px;width: 240px;position: absolute;/*background-color: #000000;*/bottom: 15px;left: 230px;
}
.circle{width: 20px;height: 20px;border-radius: 50%;background-color: #000000;opacity: 0.2;float: left;margin-right: 20px;cursor: pointer;
}
.circle:hover{opacity: 0.4;
}
.section_top{border-left: 5px solid;padding-left: 8px;margin-bottom: 22px;
}
.section_top h1{display: inline-block;margin-right: 12px;font-size: 25px;color: #333333;
}
.section_top a,.hot_singer_title a{color: #0C8F44;font-size: 14px;
}
.section_top .pre{background: url(../img/icon_sprite.png)no-repeat -33px -96px;
}
.section_top .next{background: url(../img/icon_sprite.png)no-repeat 0px -129px;
}
.section_top .pre,.section_top .next{display: inline-block;width: 31px;height: 30px;
}
.section_top .next:hover{background: url(../img/icon_sprite.png)no-repeat -64px -129px;
}
#online_first{margin-top: 22px;
}
#online_first li{float: left;width: 130px;height: 130px;overflow: hidden;position: relative;
}
#online_first li img{width: 130px;
}
#online_first p{height: 47px;width: 130px;position: absolute;bottom: 0px;opacity: 0.5;background-color: black;
}
#online_first h3{position: absolute;bottom: 30px;color: #0CC65B;font-size: 13px;top: 90px;left: 5px;z-index: 3;
}
#online_first span{position: absolute;bottom: 4px;font-size: 12px;left: 5px;z-index: 3;color: #D1FFA4;
}
#online_first .btn{position: absolute;display: none;width: 18px;height: 18px;background: url(../img/icon_play.png)no-repeat -1px -1px;top: 50px;right: 5px;
}
#online_first li:hover .btn{display: inline-block;
}
#online_first li .btn:hover{background: url(../img/icon_play.png)no-repeat -21px -1px;
}
#music_list{margin-top: 22px;
}
#music_list li{width: 160px;height: 160px;float: left;position: relative;
}
#music_list img{width: 160px;height: 90px;
}
#music_list .mv_name,#ranking_list h5 a,.singer_list a,.act_content  p a{font-size: 12px;color: #0C8F44;
}
#music_list .mv_name:hover,#ranking_list h5 a:hover,.singer_list a:hover,.act_content p a:hover{color: #00CC33;
}
#music_list p span{padding: 0px 2px;
}
#music_list .singer_name,#ranking_list p a,.rank_index a{font-size: 12px;color: #515151;
}
#music_list .singer_name:hover,#ranking_list p a:hover,.rank_index a:hover{color: #000000;
}
#music_list p{font-size: 12px;color: #8B8B8B;
}
#music_list li p a{line-height: 34px;
}
#music_list li>span{font-size: 12px;color: #B8B8D7;float: right;margin-top: 8px;
}
#music_list .mv_btn{position: absolute;display: none;width: 18px;height: 18px;background: url(../img/icon_play.png)no-repeat -1px -1px;right: 5px;bottom: 75px;
}
#music_list li:hover .mv_btn{display: inline-block;
}
#music_list .mv_btn:hover{background: url(../img/icon_play.png)no-repeat -21px -1px;
}
#recommend{margin-top: 37px;
}
#new_recommend{float: left;width: 333px;
}
.broadcast{display: inline-block;width: 30px;height: 30px;background: url(../img/icon_sprite.png)no-repeat 0px -64px;margin: 0px 10px 0px 8px;
}
.broadcast:hover{background: url(../img/icon_sprite.png)no-repeat -30px -64px;
}
.add{display: inline-block;width: 30px;height: 30px;background: url(../img/icon_sprite.png)no-repeat -56px -285px;
}
.add:hover{background: url(../img/icon_sprite.png)no-repeat -88px -285px;
}
.language a,.area a{font-size: 12px;line-height: 30px;color: #0C8F44;
}
.language a:hover,.area a:hover{color: #00CC33;
}
.language span,.area span{font-size: 12px;padding: 0 6px 0;color: #D8D8D8;
}.language .select,.area .select{color: #333361;font-weight: bold;
}
.recommend_list span,.recommend_singer,.recommend_song{font-size: 13px;line-height: 37px;
}
.recommend_song{color: #0C8F44;
}
.recommend_song:hover{color: #00CC33;
}
.recommend_list span{display: inline-block;padding: 0 6px;
}
.recommend_singer{color: #515151;
}
.recommend_singer:hover{color: #000000;
}
#hot_recommend{float: left;margin-left: 16px;border-left: 2px solid #E5E5E5;
}
#hot_recommend ul{margin-left: 21px;
}
#choice{margin-top: 26px;
}
.choice_left{width: 271px;
}
.choice_left a,.choice_right a{font-size: 12px;color: #0C8F44;
}
.choice_left a:hover,.choice_right a:hover{color: #00cc33;
}
.choice_left span{font-size: 12px;color: #8B8B8B;padding-top: 6px;display: inline-block;
}
.choice_right{margin-left: 15px;
}
.choice_right ul{width: 414px;
}
.choice_right li{float: left;width: 130px;
}
.choice_right img{width: 130px;height: 130px;
}
#side_right{width: 224px;margin-left: 36px;
}
#ranking{margin-top: 20px;
}
.side_right_title{display: inline-block;font-size: 18px;color: #A9A9A9;line-height: 30px;
}
#ranking_list{margin-top: 15px;
}
#ranking_list ul{width: 22px;
}
#ranking_list .ranking_one{height: 50px;
}
#ranking_list .ranking_one span{float: left;width: 32px;height: 18px;background: url(../img/icon_sprite.png)no-repeat -164px -225px;margin-top: 0px;
}
#ranking_list .ranking_one img{float: left;height: 50px;margin-left: 12px;margin-right: 12px;
}
#ranking_list .ranking_one .ranking_one_song{font-size: 20px;color: #FF5400;margin-top: 4px;font-weight: bold;cursor:pointer;
}
#ranking_list .ranking_one .ranking_one_song:hover{color: #00cc33;
}
#ranking_list .ranking_one .ranking_one_singer{color: #515151; font-size: 12px;margin-top: 12px;cursor:pointer;
}
#ranking_list .ranking_one .ranking_one_singer:hover{color: #000000;
}
#ranking_list{padding-bottom: 20px;border-bottom: 1px dotted #C6C6C6;
}
#ranking_list li{height: 13px;margin-top: 8px;
}
#ranking_list span{float: left;display: inline-block;width: 14px;height: 10px;background: url(../img/icon_sprite.png)no-repeat -166px -285px;margin-top: 7px;
}
#ranking_list h5{float: left;margin-left: 27px;
}
#ranking_list p{float: right;
}
.rank_index{height: 60px;padding-bottom: 20px;padding-top: 20px;border-bottom: 1px solid #E4E4E4;
}
.rank_index li{float: left;width: 60px;height: 12px;
}
#hot_singer{margin-top: 26px;
}
.singer_list{height: 162px;margin-top: 15px;padding-bottom: 24px;border-bottom: 1px dotted #C6C6C6;
}
.singer_list li{width: 50px;float: left;
}
.singer_list img{width: 50px;
}
.singer_area {margin-top: 17px;height: 85px;padding-bottom: 8px;border-bottom: 1px solid #E4E4E4;
}
.singer_area li {width: 60px;float: left;
}
.singer_area a{font-size: 12px;color: #515151;
}
.singer_area a:hover{color: #000000;
}
#activity{margin-top: 20px;
}
.act_content{margin-top: 20px;
}
/*center*/
/*footer*/
#footer{height: 286px;width: 100%;background-color: #F7F7F7;margin-top: 122px;margin-bottom: 30px;
}
.follow_on{padding-top: 38px;
}
.follow_on dl{font-size: 18px;color: #757575;font-weight: bold;
}
.follow_on dd{font-size: 12px;line-height: 28px;font-weight: normal;
}
.follow_on a{display: inline-block;color: #515151;margin-right: 20px;
}
.follow_on a:hover{color: #000000;
}
.soft_download{margin-right: 60px;
}
.friend_link{margin-left: 60px;
}
.footer_menu{width: 500px;margin: 54px auto 0px;
}
.footer_menu a,.footer_menu{font-size: 12px;color: #515151;
}
.footer_menu a:hover{color: #000000;
}
.copyrighten,.copyrightzh{font-size: 12px;margin-top: 5px;
}
.copyrighten{width: 314px;margin: 0 auto;
}
.copyrightzh {width: 236px;margin: 0 auto;
}
.copyrighten a,.copyrightzh a{color: #515151;
}
.copyrighten a:hover,.copyrightzh a:hover{color: #000000;
}
.copyrighten span,.copyrightzh span{color: #8B8B8B;
}
/*footer*/

public.css

/*
* @Author: anchen
* @Date:   2016-04-26 23:13:06
* @Last Modified by:   anchen
* @Last Modified time: 2016-04-26 23:13:10
*/
.fl{float: left;
}
.fr{float: right;
}
.wrap{width: 960px;margin: 0 auto;
}
.cl{clear: both;
}
.red_border{border-color: #FF0000;
}
.orange_border{border-color: #FF7800;
}
.green_border{border-color: #0DAD51;
}
.pink_border{border-color: #F3508D;
}
.mg_r_b{margin-right: 10px;margin-bottom: 10px;
}
.mg_b{margin-bottom: 10px;
}
.mg_r{margin-right: 10px;
}
.mv_mg_r{margin-right: 20px;
}
.mv_mg_b{margin-bottom: 25px;
}
.choice_mg_r{margin-right: 12px;
}
.choice_mg_b{margin-bottom: 35px;
}
.rank_index_mg_b{margin-bottom: 12px;
}
.rank_index_mg_r{margin-right: 20px;
}
.singer_list_mg_r{margin-right: 34px;
}
.singer_list_mg_b{margin-bottom: 20px;
}
.singer_area_mg_r{margin-right: 22px;
}
.singer_area_mg_b{margin-bottom: 1px;
}

reset.css

/*
* @Author: anchen
* @Date:   2016-04-11 21:06:39
* @Last Modified by:   anchen
* @Last Modified time: 2016-07-01 09:58:59
*/
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,li,p,input,button,hr{margin:0;padding:0}
body,button,input{ font:12px/1.5 "微软雅黑",arial, verdana, sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
li{list-style:none}
img{border:0}
input{border:0}
input:focus { outline: none }
q:before,q:after{content:”}
button,input{font-size:100%}
legend{color:#000}
small{font-size:12px}
hr{border:none;height:1px}
a{text-decoration:none}

js代码qqmusic.js

window.onload = function(){// 轮播图// 获取元素var oScroll_bar = document.getElementById('scroll_bar');var oScroll_img = oScroll_bar.getElementsByTagName('img')[0];var arrScroll_bar = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']var oPre = document.getElementById('pre'),oNext = document.getElementById('next');var oCircle = document.getElementById('circle_section'),aCircle = oCircle.getElementsByTagName('p');var num = 0;var oSearch = document.getElementById('search');var oText = oSearch.getElementsByTagName('input')[0];
// 初始化函数function init(){oScroll_img.src = arrScroll_bar[num];}// 上一张图片oPre.onclick = function(){num--;if(num==-1){num=0;}init();}// 下一张图片oNext.onclick = function(){num++;if(num==arrScroll_bar.length){num=arrScroll_bar.length-1;}init();}// 鼠标移到小黑点上效果for(var i=0;i<aCircle.length;i++){aCircle[i].index = i;aCircle[i].onmouseover = function(){oScroll_img.src = arrScroll_bar[this.index];}}// 搜索框效果oText.onclick = function(){oSearch.style.background = 'url(img/frame_bg.png)no-repeat -232px -160px';oText.value = '';}   }

//还有图片有很多传不了

仿QQ音乐(别人的代码)相关推荐

qq开放平台之站内应用-php抽奖大转盘,jQuery实现大转盘抽奖活动仿QQ音乐代码分享...
jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:--------------------------- ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
ios音乐播放器-仿QQ音乐
这篇文章主要写一个iOS系统下的音乐播放器 , 包括简单的仿QQ音乐播放器界面.音乐播放.歌词解析.后台控制等 ,如果你正好需要 , 希望你看完后能够对你的提升有所帮助 , 当然,阅读中如果发现什么 ...
计算机毕业设计-仿QQ音乐--HTML+CSS
目录作品展示 html部分代码 CSS部分代码轮播部分作品展示 html部分代码 <body><header><div class=& ...
android qq音乐布局,仿QQ音乐底部栏
最近在开发一款高仿QQ音乐播放器的Demo,遇到了一个问题,在QQ音乐主界面有一个常驻底部栏,底部栏中有一个可左右滑动切歌的组件,最后还是实现了效果,今天来回顾一下实现过程. 要实现的就是最下方的常驻 ...
用Vue高仿qq音乐官网-pc端
用Vue高仿qq音乐官网-pc端一直想做一个vue项目然后呢我就做了http://www.tuicool.com/articles/eymeiiN 效果预览部分地方不全部根据原版,也有自由发挥 ...
一段仿QQ窗口抖动的代码(VC++)
本来是想写个邮槽通信的东西,做好了框架发现邮槽单向收发数据确实不好搞, 于是不搞了.把里面实现的仿QQ窗口抖动的代码拿出来保留下来. /**************************** ...
android+仿ios+音乐播放器,iOS简单的音乐播放器(仿QQ音乐)
AVPlayer实现基本的播放,暂停,上一首,下一首,调节音量,调节进度等,正在学习的新人可以看下,有什么不足可以互相学习,谢谢支持 qq音乐.gif 这个是我写的一个简单的低仿QQ音乐, 如果你也喜 ...
qt 仿QQ音乐简易本地播放器
这是我禁用qt窗口自定义写了一个仿qq音乐的播放器,添加本地音乐实现循环,顺序,随机播放,可调节音量. 主要是对qt音频那一块的运用. 语言c++ 基本参考博客搬砖,中间栏为静态. 下载链接:http ...
20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
day-096-ninety-six-20230621-仿QQ音乐播放器-静态页面的免费部署-vue2 仿QQ音乐播放器 audio音频标签 audio标签 <audio src="i ...

仿QQ音乐(别人的代码)

HTML代码

css代码

qq_music.css

public.css

reset.css

js代码qqmusic.js

仿QQ音乐(别人的代码)相关推荐

最新文章

热门文章