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"><</p>
<p id="next">></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 = '';
}
}//还有图片有很多传不了
3513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
