first commit

历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/css/content.css

@@ -0,0 +1,319 @@
+
+.content{
+    width: 100%;
+    margin-top: 22px;
+    
+
+}
+.content_1{
+    margin: 0 auto;
+    width: 1200px;
+    box-sizing: border-box;
+    display: flex;
+}
+.content_1_left{
+    /* overflow: hidden; */
+    width: 790px;
+    /* margin-right: 410px; */
+    float: right;
+    
+}
+.tiltle_div{
+    display: flex;
+    width: 85%;
+    height: 38px;
+    justify-content: space-between;
+    align-items:center;
+}
+
+/* 标题h2模板 */
+.h2_mode{
+    display: flex;
+    /* padding-bottom: 25px; */
+    align-items:baseline;
+    /* hei */
+  
+}
+.h2_mode >h3{ 
+    font-size: 24px;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+    font-weight:lighter ;
+    font-style: normal;
+}
+
+.h2_mode p{
+    font-weight:lighter ;
+    font-style: normal;
+    font-size: 14px;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+    color: #999;
+    margin-left: 10px;
+    
+}
+.tiltle_div img{
+    width: 46px;
+    height: 25px;
+}
+
+/* 左边内容 */
+.content_1_left_content{
+    width: 820px;
+    /* height: 820px; */
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* 第一行左边图文模板 */
+.content_1_left_content_img{
+width: 173px;
+display: block;
+margin-bottom: 26px;
+transition: all ease 1s;
+margin-right: 20px;
+
+}
+.c1_l_img_div a{
+    overflow: hidden;
+    position: relative;
+    transition: all ease 1s;  
+}
+.content_1_left_content_img img{
+    width: 173px;
+    height: 173px;
+    transition: all ease 1s;
+}
+
+.content_1_left_content_img  a{
+    color: #333;
+    font-weight: lighter;
+    /* font-weight: 400; */
+    font-size: 14px;
+    margin-top: 10px;
+    display: block;
+    
+    transition: all ease 1s;
+}
+.content_1_left_content_img:hover .content_1_left_content_txt{
+    font-weight: bolder;
+
+  
+    
+}
+.content_1_left_content_img:hover .c1_l_img_div div{
+display: block;
+transition: all ease 1s;
+/* opacity: 1; */
+}
+.content_1_left_content_img:hover .c1_l_img_div img{
+    /* transition: all .5s linear 0s; */
+    transform: scale(1.1);
+    transition: all ease 1s;
+
+}
+.icon-bofang{
+    font-size: 30px !important;
+    color: #fff !important;
+    margin-top:7px;
+    margin-left: 10px;
+    display: inline-block;
+    
+}
+.c1_l_img_div div{
+    width: 50px;
+    height:  50px;
+    border-radius: 50%;
+    background: #000;
+    opacity: 0.5;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: calc(-50px/2);
+    margin-left: calc(-50px/2);
+    display: none;
+    transition: all ease 1s;
+
+}
+.content_1_right{
+    width: 330px;
+
+}
+
+.content_1_right_top{  
+    width: 330px;
+    display: flex;
+    flex-wrap: wrap-reverse;
+    margin-top: 20px;
+}
+.content_1_right a{
+    display: block;
+    color: #333;
+    /* font-weight: ligh; */
+    /* font-style: 12px; */
+}
+.right_top_txt{
+    width: 105px;
+    height: 42px;
+    border-radius: 40px;
+    margin-bottom: 15px;
+    border:1px solid #ededed;
+    text-align: center;
+    line-height: 42px;
+    transition: all 0.2s; 
+    font-size: 14px;
+}
+.right_top_txt:hover{
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
+}
+
+
+/* 第一行右边底下 */
+.content_1_right_bottom{  
+    width: 330px;
+    margin-top: 10px;
+}
+
+
+.bottom_bg_div{
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgb(234, 78, 27);
+    box-shadow: 1 3px 4px 1 rgba(0,0,0,.1);
+    
+
+}
+.bottom_bg_div{
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    position: relative;
+}
+.right_bottom_bottom ul{
+    display: flex;
+    flex-wrap: wrap-reverse;
+    margin-top: 0px;
+    /* margin-left: 0px; */
+    padding:0px;
+}
+.right_bottom_bottom ul li{
+    width: 25%;
+    margin: 10px 0px;
+    position: relative;
+    box-sizing: border-box;
+    
+}
+.bottom_bg_div i{
+    /* text-align: center; */
+    /* line-height: 26px; */
+    padding-top: 10px;
+    
+    padding-left: 13px;
+    display: block;
+    font-weight: bolder;
+
+}
+.bottom_shadow{
+background: #000;
+opacity: .5;
+width: 50px;
+height: 50px;
+border-radius: 50%;
+top:0px;
+/* position; */
+position: absolute;
+display: none;
+
+}
+.bottom_shadow+p{
+    color: #333;
+    font-size: 14px;
+    margin-top: 10px;
+}
+
+.icon-xianxingbolang{
+    font-size: 26px !important;
+    color: #FFF
+
+}
+.right_bottom_bottom ul li:hover .bottom_shadow{
+    display: block;
+    /* opacity: none; */
+}
+
+
+
+
+/* 中间第二行 */
+
+
+.content_2{
+    width: 100%;
+    height: 300px;
+    display: flex;
+
+}
+.c2_img{
+display: flex;
+overflow: hidden;
+width: 1200px;
+height: 300px;
+margin:0 auto;
+}
+.c2_img img{
+margin-left: 40px;
+position: relative;
+right: 600px;
+}
+.c2_click_l,.c2_click_r{
+    height: 64px;
+    width: 64px;
+    display: inline-block;
+}
+
+.c2_click_l{left: 70px;
+    top: 20px;
+    position: absolute;
+
+}
+.c2_click_l a,.c2_click_r a{
+    font-size: 100px;
+    color:#ccc;
+    font-weight: lighter;
+    position: absolute;
+    top: 780px;
+}
+.c2_click_r{
+    top: 20px;
+    right: 70px;
+    position: absolute;
+}
+
+.content_3{
+    width: 100%;
+    margin-top: 60px;
+}
+.c3_content{
+    width: 1200px;
+    margin:0 auto;
+    /* display: flex; */
+}
+.c3_r{
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background: #fff;
+    position: relative;;
+    top:-110px;
+    right: -150px;
+    
+}
+.h2_mode+div{
+    display: flex;
+}
+.c3_txt{
+    margin-top: 40px;
+}
+.content_4{}
+.content_5{}
+.content_6{}
+.content_7{}

历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/css/menu.css

@@ -0,0 +1,138 @@
+/* 头部菜单css */
+body,p,h1,h2,h3,h4{
+    margin:0;
+    padding:0;
+}
+a{
+    text-decoration: none;
+    font-family: PingFangSC-Medium,poppin,Tahoma,Arial,sans-serif;
+}
+li{
+    list-style: none;
+}
+
+
+/* 头部宽度 */
+.menus{
+    width: 100%;
+}
+.menus_top{
+    width: 100%;
+    /* margin-top: 27px; */
+    height: 95px;
+
+}
+.menus_content{
+    width: 1200px;
+    height: 95px;
+    display: flex;
+    margin: 0 auto;
+    align-items: center;
+}
+
+/* logo */
+.logo_box{}
+.logo_box img{
+    width: 123;
+    height: 41px;
+}
+/* 头上部菜单 */
+.menus_box{}
+.menus_box ul{
+    display: flex;
+}
+.menus_box ul li{
+    padding: 2px 17px 7px;
+    list-style: none;
+    
+}
+.change_block{
+   color:  #858585;
+}
+.change_block:hover{
+    color:  #000;
+ }
+ .block{
+     color: #000;
+     margin:0px 20px;
+ }
+
+
+
+/* 搜索 */
+
+.search_box{}
+.search_box [placeholder="请输入歌名、歌词、歌手或专辑"]{
+    border-radius: 8px;
+    width: 320px;
+    height: 34px;
+    box-sizing: border-box;
+    border: 1px solid #e4e4e4;
+    padding-left: 15px;
+    font-size: 15px;
+}
+.login_box{
+    display: flex;
+    width: 106px;
+    height: 35px;
+    align-items: center;
+    margin-left: 50px;
+}
+.login_box a{
+    color: #333;
+    font-size: 14px;
+}
+.login_box a:hover{
+    color: #e13228;
+}
+.login_box li{
+   
+    color: #d8d8d8;
+    margin: 0px 20px;
+ 
+   
+    height: 15px;
+}
+.login_box li a{
+    
+}
+
+
+
+
+/* 头部下部分 */
+
+.menus_bottom{
+    width: 100%;
+    /* height: ; */
+    background: #fafafa;
+
+}
+.menus_bottom_content{
+    width: 100%;
+   
+
+}
+.menus_bottom_content ul{
+    display: flex;  
+     height: 38px;
+    margin:0 auto;
+    width: 910px;
+}
+.menus_bottom_content ul li{
+    width: 130px;
+
+}
+.menus_bottom_content ul li a{
+    font-size: 16px;
+    color: #333;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+    line-height: 38px;
+    font-weight: 400;
+}
+.menus_bottom_content ul li a:hover{
+    color:#e13228;
+}
+.red{
+    color: #e13228 !important;
+}

历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/index.html

@@ -0,0 +1,427 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>千千音乐</title>
+
+
+    <!-- 顶部菜单css -->
+    <link rel="stylesheet" type="text/css" href="./css/menu.css">
+    <!-- 中间滚动内容css -->
+    <link rel="stylesheet" type="text/css" href="./css/content.css">
+    <!-- 底部css -->
+    <link rel="stylesheet" type="text/css" href="./css/bottom.css">
+    <!-- 阿里巴巴图标 -->
+    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2003214_w8dyx5dqp4.css">
+    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2003214_qdqhbpyjlm.css">
+
+</head>
+
+<body>
+    <!-- 顶部菜单 -->
+    <div class="menus">
+        <!-- 头部上部分 -->
+        <div class="menus_top">
+            <div class="menus_content">
+                <div class="logo_box">
+                    <img src="./images/logo.png" alt="">
+                </div>
+                <!-- 顶部上部分菜单 -->
+                <div class="menus_box">
+                    <ul>
+                        <li><a href="#" class="block">发现音乐</a></li>
+                        <li><a href="#" class="change_block">随心听</a></li>
+                        <li><a href="#" class="change_block">客户端</a></li>
+                        <li><a href="#" class="change_block">VIP</a></li>
+                        <li><a href="#" class="change_block">音乐人</a></li>
+                        <li><a href="#" class="change_block">演出</a></li>
+                    </ul>
+                </div>
+                <!-- 搜索框 -->
+                <div class="search_box">
+                    <input placeholder="请输入歌名、歌词、歌手或专辑">
+                </div>
+                <!-- 登录 -->
+                <div class="login_box">
+                    <a href="#">登录</a>
+                    <li>|</li>
+                    <a href="#">注册</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- 头部下部分  -->
+        <div class="menus_bottom">
+            <div class="menus_bottom_content">
+                <ul>
+                    <li><a href="#" class="red">推荐</a></li>
+                    <li><a href="#">歌单</a></li>
+                    <li><a href="#">歌手</a></li>
+                    <li><a href="#">榜单</a></li>
+                    <li><a href="#">分类</a></li>
+                    <li><a href="#">MV</a></li>
+                    <li><a href="#">U榜</a></li>
+
+
+                </ul>
+            </div>
+        </div>
+    </div>
+    <!-- 中间滚动内容 -->
+    <div class="content">
+        <!-- 第一行内容 -->
+        <div class="content_1">
+            <!-- 第一行内容左边 -->
+            <div class="content_1_left">
+                <!-- 标题 -->
+                <div class="tiltle_div">
+                    <div class="h2_mode">
+                        <h3>热门歌单</h3>
+                        <p>更多</p>
+                    </div>
+                    <img src="./images/内容1.PNG">
+                </div>
+                <!-- 下面的图片外框 -->
+                <div class="content_1_left_content">
+                    <!-- 图片文字模板 -->
+                    <div class="content_1_left_content_img">
+                        <div class="c1_l_img_div">
+                            <a href="#">
+                                <img src="./images/1-L-(1).jpg">
+                                <div><i class="iconfont icon-bofang"></i></div>
+                            </a>
+                        </div>
+
+
+                        <a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
+
+
+                    </div>
+                    <!-- 图片文字模板 -->
+                    <div class="content_1_left_content_img">
+                        <div class="c1_l_img_div">
+                            <a href="#">
+                                <img src="./images/1-L-(2).jpg">
+                                <div><i class="iconfont icon-bofang"></i></div>
+                            </a>
+                        </div>
+
+
+                        <a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
+
+
+                    </div>
+                    <!-- 图片文字模板 -->
+                    <div class="content_1_left_content_img">
+                        <div class="c1_l_img_div">
+                            <a href="#">
+                                <img src="./images/1-L-(3).jpg">
+                                <div><i class="iconfont icon-bofang"></i></div>
+                            </a>
+                        </div>
+
+
+                        <a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
+
+
+                    </div>
+                    <!-- 图片文字模板 -->
+                    <div class="content_1_left_content_img">
+                        <div class="c1_l_img_div">
+                            <a href="#">
+                                <img src="./images/1-L-(4).jpg">
+                                <div><i class="iconfont icon-bofang"></i></div>
+                            </a>
+                        </div>
+
+
+                        <a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
+
+
+                    </div>
+                    <!-- 图片文字模板 -->
+                    <div class="content_1_left_content_img">
+                        <div class="c1_l_img_div">
+                            <a href="#">
+                                <img src="./images/1-L-(5).jpg">
+                                <div><i class="iconfont icon-bofang"></i></div>
+                            </a>
+                        </div>
+
+
+                        <a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
+
+
+                    </div>
+                    <!-- 图片文字模板 -->
+                    <div class="content_1_left_content_img">
+                        <div class="c1_l_img_div">
+                            <a href="#">
+                                <img src="./images/1-L-(1).jpg">
+                                <div><i class="iconfont icon-bofang"></i></div>
+                            </a>
+                        </div>
+
+
+                        <a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
+
+
+                    </div>
+                </div>
+            </div>
+            <!-- 第一行内容右边 -->
+            <div class="content_1_right">
+                <div class="h2_mode">
+                    <h3>热门歌单</h3>
+                    <p>更多</p>
+                </div>
+                <!-- 第一行右边上面 -->
+                <div class="content_1_right_top">
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                    <a href="#">
+                        <div class="right_top_txt">情歌</div>
+                    </a>
+                </div>
+                <!-- 第一行右边下面 -->
+                <div class="content_1_right_bottom">
+                    <div class="h2_mode">
+                        <h3>推荐电台</h3>
+                        <p>更多</p>
+                    </div>
+                    <div class="right_bottom_bottom">
+                        <ul>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="bottom_bg_div">
+                                        <i class="iconfont icon-xianxingbolang"></i>
+                                    </div>
+                                    <div class="bottom_shadow">
+                                        <i class="iconfont icon-bofang"></i>
+                                    </div>
+                                    <!-- 文字 -->
+
+                                    <p>
+                                        随便听听
+                                    </p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+
+            </div>
+
+        </div>
+        <!-- 第二行内容 -->
+        <div class="content_2">
+            <div class="c2_img">
+                <img src="./images/c2- (1).jpg" alt="">
+                <img src="./images/c2- (2).jpg" alt="">
+                <img src="./images/c2- (3).jpg" alt="">
+            </div>
+            <div class="c2_click_l">
+                <a href="">&lt;</a>
+            </div>
+            <div class="c2_click_r">
+                <a href="">&gt;</a>
+            </div>
+
+
+
+        </div>
+        <!-- 第三行内容 -->
+        <div class="content_3">
+            <div class="c3_content">
+                <div class="h2_mode">
+                    <h3>推荐电台</h3>
+                    <p>更多</p>
+                </div>
+                <div>
+                    <!-- 图片文字模板 -->
+                <div class="content_1_left_content_img">
+                    <div class="c1_l_img_div">
+                        <a href="#">
+                            <img src="./images/1-L-(3).jpg">
+                            <div><i class="iconfont icon-bofang"></i></div>
+                        </a>
+                    </div>
+
+                    <div class="c3_r">
+
+                    </div>
+                    <a class="content_1_left_content_txt c3_txt">歌单-防弹少年团BTS</a>
+
+
+                </div>
+                
+            </div>
+            <div class="c2_click_l c3">
+                <a href="">&lt;</a>
+            </div>
+            <div class="c2_click_r c3">
+                <a href="">&gt;</a>
+            </div>
+            
+        </div>
+        <!-- 第四行内容 -->
+        <div class="content_4">
+        </div>
+        <!-- 第五行内容 -->
+        <div class="content_5">
+        </div>
+        <!-- 第六行内容 -->
+        <div class="content_6">
+        </div>
+        <!-- 第七行内容 -->
+        <div class="content_7">
+        </div>
+
+
+    </div>
+    <!-- 底部 -->
+    <div class="bottom">
+
+    </div>
+</body>
+
+</html>

历届学生/韩想/项目开发/练习项目/仿千千音乐/赵俊凯/ceshi.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body,a,p,ul,li,h1,h2,h3,h4,h5,h6,input {
+            margin: 0;
+            padding: 0;
+        }
+
+        input {
+            outline: none;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        a {
+            text-decoration: none;
+        }
+        .content{
+            width: 1200px;
+            margin: 0 auto;
+        }
+        .pic{
+            overflow: hidden;
+            display: flex;
+            width: 500px;
+            height: 300px;
+        }
+        .pic:hover .p1{
+            margin-left: 0px;
+        }
+        .pic img{
+            width: 500px;
+            height: 300px;
+        }
+        .p1{
+            margin-left: -500px;
+            transition: all ease 1s;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="content">
+        <div class="pic">
+            <img class="p1" src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159616349419ff303c494d664b08f00abdc25f1c95.jpg@s_2,w_750,h_300" alt="">
+            <img class="p2" src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15958676995b775f90d72d1a575245f78d6395a9e9.jpg@s_2,w_750,h_300" alt="">
+        </div>
+    </div>
+
+</body>
+
+</html>

历届学生/韩想/项目开发/练习项目/仿千千音乐/赵俊凯/css/clear.css

@@ -0,0 +1,13 @@
+body,a,p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+input {
+    outline: none;
+}
+li{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/仿千千音乐/赵俊凯/css/index.css

@@ -0,0 +1,792 @@
+body{
+    color: white;
+}
+.header{
+    width: 100%;
+}
+.header_top{
+    height: 95px;
+}
+.menu li{float: left;}
+.menu+ul li{float: right; color: #333;}
+.header_top>a{
+    height: 52px;
+    margin-top: 27px;
+} 
+.header_top>a img{
+    width: 123px;
+    height: 41px;
+}
+.menu{
+    margin-left: 74px;
+}
+.menu li:hover a{
+    color: #000;
+}
+.menu li{
+    height: 95px;
+    line-height: 95px;
+    padding: 0px 17px;
+}
+.menu li a{
+    font-size: 16px;
+    color: #858585;
+}
+.activation a{
+    color: #000 !important;
+    font-weight: 400;
+}.menu input{
+    width: 320px;
+    height: 34px;
+    border: 1px solid #e4e4e4;
+    padding: 0 10px;
+    font-size: 15px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    background: url(../img/sosuo.png) no-repeat;
+    background-size: 22px;
+    background-position: 285px;
+}
+.login li{
+    height: 95px;
+    line-height: 95px;
+}
+.login {
+    margin-right: 41px;
+}
+.login li:nth-child(2) {
+    width: 1px;
+    height: 17px;
+    background: #d8d8d8;
+    margin: 0 20px;
+    margin-top: 40px;
+}
+.header_form{
+    overflow: hidden;
+    height: 38px;
+    line-height: 38px;
+    background-color: #fafafa;
+}
+.header_form .width_1200{
+    text-align: center;
+}
+.header_form a{
+    padding: 8px 2.5%;
+    font-size: 16px;
+    color: #333;
+}
+.header_form a:hover{
+    color: #e13228;
+}
+.recommend{
+    color: #e13228 !important;
+}
+.width_1200 div:nth-child(1){
+    overflow: hidden;
+}
+.Popularsong{
+    width: 790px;
+    overflow: hidden;
+    padding-top: 23px;
+}
+.tatal{
+    overflow: hidden;
+    height: 38px;
+    margin-bottom: 25px;
+}
+.tatal .left h2 {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: 400;
+}
+.tatal .left span {
+    font-size: 14px;
+    color: #999;
+}
+.tatal img {
+    height: 20px;
+    margin-top: 16px;
+    width: 39px;
+    height: 15px;
+}
+.piclist li{
+    width: 175px;
+    height: 204px;
+    margin-right: 30px;
+    float: left;
+    margin-bottom: 26px;
+}
+.piclist li a{
+    display: block;
+    margin-top: 10px;
+}
+.pic_top{
+    width: 175px;
+    height: 175px;
+    position: relative;
+}
+.pic_top img{
+    width: 100%;
+    height: 100%;
+    transition: all ease 0.6s;
+}
+.play{
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    background: #00000096;
+    line-height: 50px;
+    top: 50%;
+    left: 50%;
+    margin-top: calc(-38px / 2);
+    margin-left: calc(-38px / 2);
+    transition: all ease 0.6s;
+    opacity: 0;
+}
+.icon-play {
+    color: #fff;
+    text-align: center;
+    margin-left: 18px;
+}
+.piclist li a{
+    color: #333;
+    font-size: 14px;
+    transition: all ease 0.6s;
+}
+.piclist li:last-child{
+    margin-right: 0 !important;
+}
+.piclist li:hover .play{
+    opacity: 1 !important;
+}
+.piclist li:hover img{
+    transform: scale(1.05);
+}
+.piclist li:hover a{
+    font-weight: 600;
+}
+.piclist li:nth-child(4){
+    margin-right: 0px;
+}
+.fltg{
+    width: 360px;
+    margin-left: 50px;
+}
+.fltg_top{
+    padding-top: 23px;
+}
+.fltg_top ul{
+    display: flex;
+    flex-wrap: wrap;
+}
+.fltg_top ul li{
+    width: 105px;
+    height: 42px;
+    text-align: center;
+    line-height: 42px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    
+}
+.fltg_top ul li a{
+    font-size: 14px;
+    font-weight: 400;
+    color: #000;
+}
+.fltg_top ul li:nth-child(3n){
+    margin-right: 0px;
+}
+.fltg_top ul li:hover{
+    border: 1px solid #ededed;
+    border-radius: 40px;
+    box-shadow: 0px 2px 1px #ededed;
+    /* transition: all ease 0.6s; */
+    box-sizing: border-box;
+}
+.fltg_down{
+    width: 390px;
+    margin-bottom: 50px;
+}
+.fltg_down ul{
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -17px;
+    margin-right: 17px;
+}
+.fltg_down ul li{
+    margin-bottom: 20px;
+    margin-right: 10px;
+    position: relative;
+}
+.fltg_down ul li>div{
+    border-radius: 50px;
+}
+.fltg_down ul li .play1{
+    width: 50px !important;
+    height: 50px !important;
+    border-radius: 50px !important;
+    background: #00000096 !important;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    opacity: 0;
+}
+.fltg_down ul li:hover .play1{
+    opacity: 1;
+}
+.fltg_down ul li:nth-child(4n){
+    margin-right: 0px;
+}
+.fltg_down ul li.icon-play{
+    width: 30px;
+    height: 30px;
+    color: white;
+}
+.fltg_down ul li:nth-child(1) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #ea4e1b;
+}
+.fltg_down ul li:nth-child(2) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #ea4e1b;
+}
+.fltg_down ul li:nth-child(3) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #d31154;
+}
+.fltg_down ul li:nth-child(4) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #d73535;
+}
+.fltg_down ul li:nth-child(5) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #ff9200;
+}
+.fltg_down ul li:nth-child(6) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #697ac7;
+}
+.fltg_down ul li:nth-child(7) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #4bcbe8;
+}
+.fltg_down ul li:nth-child(8) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #6baaeb;
+}
+.fltg_down ul li>div>i{
+    line-height: 50px;
+    margin-left: 16px;
+}
+.fltg_down ul li>p{
+    text-align: center;
+    color: #333;
+    font-size: 14px;
+    font-weight: 400;
+}
+.lunbo{
+    margin: 0 auto;
+    position: relative;
+    margin-bottom: 50px;
+}
+.lunbo_zhong img{
+    width: 1200px;
+    height: 300px;
+    margin-right: 30px;
+}
+.lunbo_zhong{
+    display: flex;
+    overflow: hidden;
+    justify-content: space-around;
+}
+.lunbo_zuo{
+    height: 50px;
+    position: absolute;
+    top: 50%;
+    left: -65px;
+    margin-top: -25px;
+    opacity: 0;
+
+}
+.lunbo_you{
+    height: 50px;
+    position: absolute;
+    height: 50px;
+    position: absolute;
+    top: 50%;
+    right: -65px;
+    margin-top: -25px;
+    opacity: 0;
+}
+.lunbo:hover .lunbo_zuo{
+    opacity: 1;
+}
+.lunbo:hover .lunbo_you{
+    opacity: 1;
+}
+.lunbo_zuo img{
+    width: 50px;
+    height: 50px;
+}
+.lunbo_you img{
+    width: 50px;
+    height: 50px;
+}
+.xgsf ul{
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+}
+.xgsf ul li img{
+    width: 173px;
+    height: 173px;
+}
+.xgsf ul li p{
+    text-align: center;
+}
+.xgsf ul li .p1{
+    margin-top: 10px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+}
+.xgsf ul li .p2{
+    font-size: 14px;
+    font-weight: 400;
+    color: #999;
+}
+.xgsf li:hover .play{
+    opacity: 1 !important;
+}
+.xgsf li:hover img{
+    transform: scale(1.05);
+}
+.xgsf li:hover .p1{
+    font-weight: 600;
+}
+.xgsf li:hover .p2{
+    color: #333;
+} 
+.by{
+    width: 19px;
+    height: 37px;
+    border-radius: 50px 0 0 50px;
+    position: absolute;
+    top: 50%;
+    right: 0px;
+    margin-top: calc(-25px / 2);
+    background: white;
+}   
+.xgsf{
+    position: relative;
+    margin-bottom: 50px;
+}
+.xgsf:hover .jt_you img{
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.xgsf:hover .jt_zuo img{
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.jt_zuo{
+    position: absolute;
+    left: -68px;
+    top: 109px;
+}
+.jt_zuo img{
+    opacity: 0;
+}
+.jt_you{
+   position: absolute;
+   right: -68px;
+    top: 109px;
+}
+.jt_you img{
+    opacity: 0;
+}
+.phb{
+    margin-bottom: 50px;
+}
+.phb_ul {
+    display: flex;
+    justify-content: space-between;
+}
+.dddd {
+    overflow: hidden;
+}
+.ph_zi{
+    padding: 10px 20px 10px 10px;
+    box-sizing: border-box;
+    text-align: right;
+}
+.ph_zi:hover a{
+    font-weight: 700;
+}
+.ph_zi a{
+    color: #999;
+    font-size: 14px;
+    font-weight: 400;
+}
+.phb_ul li:nth-child(1){
+    width: 380px;
+    border: 1px solid rgba(91,148,0,.3);
+    height: 544px;
+}
+.phb_ul li:nth-child(2){
+    width: 380px;
+    border: 1px solid rgba(219,88,0,.1);
+    height: 544px;
+}
+.phb_ul li:nth-child(3){
+    width: 380px;
+    border: 1px solid rgba(33,191,166,.1);
+    height: 544px;
+}
+.phb_ul li:nth-child(1) .ph_title{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    height:66px;
+    align-items: center;
+    background-color: rgba(91,148,0,.1);
+}
+.phb_ul li:nth-child(2) .ph_title{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    height:66px;
+    align-items: center;
+    background-color: rgba(219,88,0,.1);
+}
+.phb_ul li:nth-child(3) .ph_title{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    height:66px;
+    align-items: center;
+    background-color: rgba(33,191,166,.1);
+}
+.phb_ul li:nth-child(1) .ph_title span{
+    font-size: 22px;
+    font-weight: 700;
+    color: #5b9400;
+}
+.phb_ul li:nth-child(2) .ph_title span{
+    font-size: 22px;
+    font-weight: 700;
+    color: #db5800;
+}
+.phb_ul li:nth-child(3) .ph_title span{
+    font-size: 22px;
+    font-weight: 700;
+    color: #21bfa6;
+}
+.ph_title img{
+    width: 30px;
+    height: 30px;
+}
+.phb_ul li .ph_list{
+    display: flex;
+    justify-content: space-between;
+    padding-left: 20px;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    align-items: center;
+}
+.ph_list:hover {
+    background: #8d8d8d;
+}
+.ph_list:hover .list_r {
+    display: block;
+}
+.list_l {
+    display: flex;
+}
+.list_l .num {
+    font-size: 18px;
+    color: #5b9400;
+    margin-right: 14px;
+    line-height: 50px;
+}
+.list_l img {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+}
+.list_l p {
+    font-size: 14px;
+    color: #333;
+}
+.list_l p+span {
+    font-size: 14px;
+    color: #999;
+}
+.list_r {
+    display: none;
+}
+.list_r i{
+    font-size: 20px;
+}
+.rmgs{
+    margin-bottom: 50px;
+}
+.rmgs ul{
+    width: 1200px;
+    display: flex;
+    padding: 0px 24px;
+    box-sizing: border-box;
+    justify-content: space-between;
+}
+.rmgs ul li img{
+    width: 125px;
+    height: 125px;
+    border-radius: 125px;
+    transition: all ease 0.6s;
+}
+.rmgs ul li p{
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+    text-align: center;
+    margin-top: 10px;
+    transition: all ease 0.6s;
+}
+.rmgs ul li:hover img{
+    transform: scale(1.05);
+}
+.rmgs ul li:hover p{
+    font-weight: 600;
+}
+.jxmv{
+    margin-bottom: 50px;
+}
+.jxmv ul{
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+}
+.jxmv ul li .pic_top{
+    width: 275px;
+    height: 155px;
+    position: relative;
+}
+.jxmv ul li .pic_top img{
+    width: 275px;
+    height: 155px;
+}
+.jxmv ul li p{
+    text-align: center;
+}
+.jxmv ul li .p1{
+    margin-top: 10px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+}
+.jxmv ul li .p2{
+    font-size: 14px;
+    font-weight: 400;
+    color: #999;
+}
+.jxmv li:hover .play{
+    opacity: 1 !important;
+}
+.jxmv li:hover img{
+    transform: scale(1.05);
+}
+.jxmv li:hover .p1{
+    font-weight: 600;
+}
+.jxmv li:hover .p2{
+    color: #333;
+} 
+.by{
+    width: 19px;
+    height: 37px;
+    border-radius: 50px 0 0 50px;
+    position: absolute;
+    top: 50%;
+    right: 0px;
+    margin-top: calc(-25px / 2);
+    background: white;
+}   
+.jxmv{
+    position: relative;
+    margin-bottom: 50px;
+}
+.jxmv:hover .jt_you img{
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.jxmv:hover .jt_zuo img{
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.jt_zuo{
+    position: absolute;
+    left: -68px;
+    top: 109px;
+}
+.jt_zuo img{
+    opacity: 0;
+}
+.jt_you{
+   position: absolute;
+   right: -68px;
+    top: 109px;
+}
+.jt_you img{
+    opacity: 0;
+}
+.rmhd{
+    margin-bottom: 50px;
+}
+.rmhd ul{
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+}
+.rmhd ul li{
+    overflow: hidden;
+}
+.rmhd ul li img{
+    width: 378px;
+    height: 152px;
+    transition: all ease 0.6s;
+}
+.rmhd ul li p{
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+    margin-top: 10px;
+    text-align: center;
+    transition: all ease 0.6s;
+}
+.rmhd ul li:hover img{
+    transform: scale(1.05);
+}
+
+.rmhd ul li:hover p{
+    font-weight: 600;
+}
+.footer{
+    width: 100%;
+    background-color: #333;
+}
+.ft_content{
+    width: 1200px;
+    margin: 0 auto;
+    padding-top: 60px;
+    box-sizing: border-box;
+}
+.footer_conten{
+    display: flex;
+    justify-content: space-between;
+
+}
+.ft_pic{
+    height: 190px;
+    width: 365px;
+    display: flex;
+    justify-content: space-between;
+}
+.ft_pic li{
+    height: 190px;
+    width: 365px;
+    margin-top: 50px
+}
+.ft_pic li p {
+    margin-top: 22px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #939393;
+    text-align: left;
+}
+.ft_pic li img{
+    width: 36px;
+    height: 36px;
+}
+.ft_content .ft1{
+    font-size: 18px;
+    font-weight: 400;
+    color: #fff;
+    text-align: left;
+}
+.ft_pic li:hover p{
+    font-weight: 700;
+}
+.ft_yj{
+    display: flex;
+    flex-wrap: wrap;
+    width: 365px;
+    box-sizing: border-box;
+    margin-top: 54px;
+}
+.ft_yj li:hover a{
+    font-weight: 700;
+}
+.ft_yj li{
+    width: 113px;
+    margin-bottom: 36px;
+}
+.ft_yj li a{
+    font-size: 14px;
+    font-weight: 400;
+    color: #939393;
+    margin-bottom: 15px;
+}
+.gzyy{
+    display: flex;
+    flex-wrap: wrap-reverse;
+    width: 365px;
+    margin-top: 54px;
+    box-sizing: border-box;
+}
+.gzyy li a{
+    font-size: 14px;
+    font-weight: 400;
+    color: #939393;
+}
+.gzyy li{
+    width: 182px;
+}
+.gzyy li img{
+    width: 31px;
+    height: 31px;
+    vertical-align: middle;
+}
+.gzyy li span{
+    font-size: 14px;
+    margin-left: 10px;
+}
+.gzyy li:last-child{
+    margin-bottom: 23px;
+}
+.ft_content p{
+    font-size: 14px;
+    font-weight: 400;
+    color: #999;
+    text-align: center;
+    padding-bottom: 10px;
+}

历届学生/韩想/项目开发/练习项目/仿千千音乐/赵俊凯/css/public.css

@@ -0,0 +1,16 @@
+.left{
+float: left;
+}
+
+.right{
+    float: right;
+}
+
+.width_1200{
+   width: 1200px;
+   margin: 0 auto; 
+}
+
+.center{
+    text-align: center;
+}

历届学生/韩想/项目开发/练习项目/仿千千音乐/赵俊凯/index.html

@@ -0,0 +1,836 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>千千音乐</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1978518_gu0lldutcrt.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="">
+    <link rel="stylesheet" href="">
+</head>
+
+<body>
+    <div class="header">
+        <div class="header_top width_1200">
+            <a class="left" href="http://music.taihe.com/"><img
+                    src="http://static1.qianqian.com/web/s/images/logo_2x.5109f00405b21eca.png" alt="" srcset=""></a>
+            <ul class="left menu">
+                <li class="activation"><a href="">发现音乐</a></li>
+                <li><a href="">随心听</a></li>
+                <li><a href="">客户端</a></li>
+                <li><a href="">VIP</a></li>
+                <li><a href="">音乐人</a></li>
+                <li><a href="">演出</a></li>
+                <li>
+                    <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
+                </li>
+            </ul>
+            <ul class="right login">
+                <li>登录</li>
+                <li></li>
+                <li>注册</li>
+            </ul>
+        </div>
+        <div class="header_form">
+            <div class="width_1200">
+                <a class="recommend" href="">推荐</a>
+                <a href="">歌单</a>
+                <a href="">歌手</a>
+                <a href="">榜单</a>
+                <a href="">分类</a>
+                <a href="">MV</a>
+                <a href="">U榜</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="content">
+        <div class="width_1200">
+            <div>
+                <div class="Popularsong left">
+                    <div class="tatal">
+                        <div class="left">
+                            <h2>热门歌单</h2>
+                            <span>更多</span>
+                        </div>
+                        <img class="right" src="./img/kuohao (2).png" alt="">
+                    </div>
+                    <ul class="piclist">
+                        <li>
+                            <div class="pic_top">
+                                <img src="http://musicugc.cdn.qianqian.com/ugcdiy/pic/58adc19c9ecc88077504e852ed33a22d.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <a href="">防弹少年团BTS</a>
+                        </li>
+                        <li>
+                            <div class="pic_top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/c65ab27edcf5a2f190a7d651b2f034d5.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <a href="">节奏震撼 | 鼓SOLO特辑</a>
+                        </li>
+                        <li>
+                            <div class="pic_top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/173a790b745641a7156cb5d12ec8a512.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <a href="">vlogger入门指南-BGM篇</a>
+                        </li>
+                        <li>
+                            <div class="pic_top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/55a2dbfa1a37d37396a5ca23e96ad4ae.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <a href="">女团舞曲精选 | 会跳舞的青春有你</a>
+                        </li>
+                        <li>
+                            <div class="pic_top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/9cdbc888cd898c4752d5864223b42743.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <a href="">干啥啥不行，长胖第一名</a>
+                        </li>
+                        <li>
+                            <div class="pic_top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/97bd7811d0e84cf614f86d509edead3c.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <a href="">深夜我没有睡着， 我只是藏进了歌里</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="fltg left">
+                    <div class="fltg_top">
+                        <div class="tatal">
+                            <div class="left">
+                                <h2>分类听歌</h2>
+                                <span>更多</span>
+                            </div>
+                        </div>
+                        <ul>
+                            <li><a href="">情歌</a></li>
+                            <li><a href="">红歌</a></li>
+                            <li><a href="">劲爆</a></li>
+                            <li><a href="">天籁</a></li>
+                            <li><a href="">经典老歌</a></li>
+                            <li><a href="">欧美</a></li>
+                            <li><a href="">网络歌曲</a></li>
+                            <li><a href="">民歌</a></li>
+                            <li><a href="">80后</a></li>
+                            <li><a href="">儿歌</a></li>
+                            <li><a href="">伤感</a></li>
+                            <li><a href="">安静</a></li>
+                        </ul>
+                    </div>
+                    <div class="fltg_down">
+                        <div class="tatal">
+                            <div class="left">
+                                <h2>推荐电台</h2>
+                                <span>更多</span>
+                            </div>
+                        </div>
+                        <ul>
+                            <li>
+                                <div><i class="iconfont icon-music"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>随便听听</p>
+                            </li>
+                            <li>
+                                <div><i class="iconfont icon-w_sofa"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>在家</p>
+                            </li>
+                            <li>
+                                <div><i class="iconfont icon-desk-lamp"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>工作</p>
+                            </li>
+                            <li>
+                                <div><i class="iconfont icon-icon-test"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>上网</p>
+                            </li>
+                            <li>
+                                <div><i class="iconfont icon-shops"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>店铺</p>
+                            </li>
+                            <li>
+                                <div><i class="iconfont icon-sport"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>运动</p>
+                            </li>
+                            <li>
+                                <div><i class="iconfont icon-icon_relax"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>轻松</p>
+                            </li>
+                            <li>
+                                <div><i class="iconfont icon-index-sweet-service"></i></div>
+                                <div class="play1">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <p>甜蜜</p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="lunbo">
+                <div class="lunbo_zhong">
+                    <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159616349419ff303c494d664b08f00abdc25f1c95.jpg@s_2,w_750,h_300"
+                        alt="">
+                    <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15958676995b775f90d72d1a575245f78d6395a9e9.jpg@s_2,w_750,h_300"
+                        alt="">
+                    <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159617722011d469e5fd6b50d99dabca0e988cb099.jpg@s_2,w_750,h_300"
+                        alt="">
+                </div>
+                <img class="lunbo_zuo" src="./img/zuo.png" alt="">
+                <img class="lunbo_you" src="./img/you.png" alt="">
+            </div>
+            <div class="xgsf">
+                <div class="tatal">
+                    <div class="left">
+                        <h2>新歌首发</h2>
+                        <span>更多</span>
+                    </div>
+                </div>
+                <ul>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_158882138088c065051930226a4cd6eb3e4010fffa.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <div class="by">
+
+                                </div>
+                            </div>
+                            <p class="p1">千千音乐新歌速递</p>
+                            <p class="p2">新歌抢鲜听</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159617560535ef71d3ffde206dcea1250dba94c277.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <div class="by">
+
+                                </div>
+                            </div>
+                            <p class="p1">世上梗最多的歌儿</p>
+                            <p class="p2">大张伟</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596169261cf95c6f739642b7aee2001878ccfcf56.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <div class="by">
+
+                                </div>
+                            </div>
+                            <p class="p1">春夏秋冬春 ——</p>
+                            <p class="p2">Willen Pauwels</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15961661770d94ecc996bcd903ff8e741055e7e082.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <div class="by">
+
+                                </div>
+                            </div>
+                            <p class="p1">六月初七月底</p>
+                            <p class="p2">牟敏雪MichelleBla1r</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596163613387f0f86f8a49204db5b126cc6e275be.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <div class="by">
+
+                                </div>
+                            </div>
+                            <p class="p1">Summer Special Vol.1</p>
+                            <p class="p2">卫一名</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15961634243a1c285c991bb7601b1188472ce19ab2.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                                <div class="by">
+
+                                </div>
+                            </div>
+                            <p class="p1">沙漠之下</p>
+                            <p class="p2">沙漠五子D5</p>
+                        </a>
+                    </li>
+                </ul>
+                <div class="jt_zuo"><img src="./img/zuo.png" alt=""></div>
+                <div class="jt_you"><img src="./img/you.png" alt=""></div>
+            </div>
+            <div class="phb">
+                <div class="tatal">
+                    <div class="left">
+                        <h2>排行榜</h2>
+                        <span>更多</span>
+                    </div>
+                </div>
+                <ul class="phb_ul">
+                    <li>
+                        <div class="ph_title">
+                            <span>新歌榜</span>
+                            <img src="./img/xg.png" alt="">
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">02</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/d24656e3b055acb05fe096f781920016/675907119/675907119.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>拥抱春天</p>
+                                    <span>A公馆</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">03</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/bae766e5c670ca417cc433156efcb528/675012927/675012927.png@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>山河无恙在我胸</p>
+                                    <span>佟丽娅/蔡徐坤</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">04</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">05</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">06</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_zi">
+                            <a href="">查看完整榜单></a>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="ph_title">
+                            <span>热曲榜</span>
+                            <img src="./img/re.png" alt="">
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_zi">
+                            <a href="">查看完整榜单></a>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="ph_title">
+                            <span>网络歌曲榜</span>
+                            <img src="./img/wl.png" alt="">
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <i class="iconfont icon-play3"></i>
+                                <i class="iconfont icon-tubiaozhizuomoban-"></i>
+                                <i class="iconfont icon-LC_icon_download_line_2"></i>
+                            </div>
+                        </div>
+                        <div class="ph_zi">
+                            <a href="">查看完整榜单></a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="rmgs">
+                <div class="tatal">
+                    <div class="left">
+                        <h2>热门歌手</h2>
+                        <span>更多</span>
+                    </div>
+                </div>
+                <ul>
+                    <li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
+                            alt="">
+                        <p>薛之谦</p>
+                    </li>
+                    <li><img src="http://qukufile2.qianqian.com/data2/pic/0d8e3007d1cb42db293a80f12e9c4771/612860331/612860331.JPG@s_2,w_250,h_250"
+                            alt="">
+                        <p>许嵩</p>
+                    </li>
+                    <li><img src="http://qukufile2.qianqian.com/data2/pic/4e2f99725085e29afbe3004b34e3b3ea/566870515/566870515.jpg@s_2,w_250,h_250"
+                            alt="">
+                        <p>龙梅子</p>
+                    </li>
+                    <li><img src="http://qukufile2.qianqian.com/data2/pic/246708025/246708025.jpg@s_2,w_250,h_250"
+                            alt="">
+                        <p>林俊杰</p>
+                    </li>
+                    <li><img src="http://qukufile2.qianqian.com/data2/pic/25e813749b39ddd01d6121e59860ba66/578954994/578954994.jpg@s_2,w_250,h_250"
+                            alt="">
+                        <p>金南玲</p>
+                    </li>
+                    <li><img src="http://qukufile2.qianqian.com/data2/pic/25e813749b39ddd01d6121e59860ba66/578954994/578954994.jpg@s_2,w_250,h_250"
+                            alt="">
+                        <p>宋小睿</p>
+                    </li>
+                </ul>
+            </div>
+            <div class="jxmv">
+                <div class="tatal">
+                    <div class="left">
+                        <h2>精选MV</h2>
+                        <span>更多</span>
+                    </div>
+                </div>
+                <ul>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15864064945aab63569ca627f7a30cc8fd7036aac9.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <p class="p1">Home</p>
+                            <p class="p2">蔡徐坤</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_158640658121f09621d0d4bc176372a7bc789b2b76.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <p class="p1">盒子（BOX）</p>
+                            <p class="p2">张杰妮Jani Z.</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1585630881489717a96acd0654f364660d7c56baae.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <p class="p1">GetAway</p>
+                            <p class="p2">崔迪</p>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="">
+                            <div class="pic_top">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15849370839e949ad4cd13d2a822516186f866bd4c.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-play"></i>
+                                </div>
+                            </div>
+                            <p class="p1">说说而已</p>
+                            <p class="p2">Hickey喜祺</p>
+                        </a>
+                    </li>
+
+                </ul>
+                <div class="jt_zuo"><img src="./img/zuo.png" alt=""></div>
+                <div class="jt_you"><img src="./img/you.png" alt=""></div>
+            </div>
+            <div class="rmhd">
+                <div class="tatal">
+                    <div class="left">
+                        <h2>热门活动</h2>
+                        <span>更多</span>
+                    </div>
+                </div>
+                <ul>
+                    <li><a href=""><img
+                                src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480660627d94bd0ab1c474c860a059c52b38f1fc.jpg@s_2,w_760,h_304"
+                                alt="">
+                            <p>少年红星音乐计划</p>
+                        </a></li>
+                    <li><a href=""><img
+                                src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480662673c21cb33585df55ea59d202a537c0fc8.jpg@s_2,w_760,h_304"
+                                alt="">
+                            <p>千千Nu创音乐榜</p>
+                        </a></li>
+                    <li><a href=""><img
+                                src="http://business0.qianqian.com/qianqian/pic/bos_client_15692293177ac453eb9b3cc8847302aaae82069b94.jpg@s_2,w_760,h_304"
+                                alt="">
+                            <p>云南·抚仙湖麦田音乐节赠票活动</p>
+                        </a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="footer">
+        <div class="ft_content">
+            <ul class="footer_conten">
+                <li>
+                    <p class="ft1">下载客户端</p>
+                    <ul class="ft_pic">
+                        <li><a href=""><img src="./img/wd.png" alt="">
+                                <p>PC版</p>
+                            </a></li>
+                        <li><a href=""><img src="./img/dn.png" alt="">
+                                <p>MAC版</p>
+                            </a></li>
+                        <li><a href=""><img src="./img/az (1).png" alt="">
+                                <p>安卓版</p>
+                            </a></li>
+                        <li><a href=""><img src="./img/pg.png" alt="">
+                                <p>iPhone版</p>
+                            </a></li>
+                    </ul>
+                </li>
+                <li>
+                    <p class="ft1">关于千千音乐</p>
+                    <ul class="ft_yj">
+                        <li><a href="">意见反馈</a></li>
+                        <li><a href="">联系我们</a></li>
+                        <li><a href="">帮助中心</a></li>
+                        <li><a href="">资源开放平台</a></li>
+                        <li><a href="">太和音乐人</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <p class="ft1">关注音乐</p>
+                    <ul class="gzyy">
+                        <li><a href=""><img src="./img/wb (1).png" alt=""> <span>关注微博</span></a></li>
+                        <li><a href=""><img src="./img/wx.png" alt=""> <span>微信公众号</span></a></li>
+                        <li><a href=""><img src="./img/sxt.png" alt=""> <span>音乐随心听</span></a></li>
+                    </ul>
+                </li>
+            </ul>
+            <p>
+                @2020 Qianqian 粤网文[2018]0902-359号
+            </p>
+            <p>粤公网安备 44030502002309号 增值电信业务经营许可证：粵B2-20180819</p>
+            <p>违法和不良信息举报电话: 010-84369708 转8012 &nbsp;举报邮箱: jubao@taihe.com &nbsp;反馈中心</p>
+        </div>
+    </div>
+</body>
+
+</html>

历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/css/clear.css

@@ -0,0 +1,16 @@
+/* 专门用来重置浏览器默认样式的 */
+body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+
+input {
+    outline: none;
+}
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/css/index.css

@@ -0,0 +1,934 @@
+.header {
+        margin: 0;
+}
+.logo {
+    padding-top: 27px;
+    width: 123px;
+}
+
+.HeadMenu {
+    height: 95px;
+}
+.menu {
+    margin-left: 74px;
+}
+.menu li,
+.login li {
+    float: left;
+    height: 95px;
+    line-height: 95px;
+}
+.menu li {
+    padding: 0 17px; 
+}
+.menu li a {
+    color: #858585;
+    font-size: 16px;
+}
+.menu li:hover a{
+    color: black;
+}
+.menu input {
+    width: 320px;
+    height: 34px;
+    border: 1px solid #e4e4e4;
+    border-radius: 8px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    background: url("../img/search.png") no-repeat;
+    background-size: 22px;
+    background-position: 285px;
+}
+
+.active {
+    color:#000 !important;
+    font-weight: 400;
+}
+.login {
+    margin-right: 41px;
+}
+.login li:nth-child(2) {
+    width: 1px;
+    height: 17px;
+    background: #d8d8d8;
+    margin: 0 20px;
+    margin-top: 40px;
+}
+.login li:hover a{
+    color: red;
+}
+.login a {
+    color: #333;
+}
+.HeadType {
+    overflow: hidden;
+    height: 38px;
+    background-color: #fafafa;
+    line-height: 38px;
+}
+.HeadType ul li {
+    float: left;
+}
+.HeadType a {
+    padding: 8px 2.5%;
+    font-size: 16px;
+    color: #333;
+    
+}
+.menu_active {
+    color: #e13228 !important;
+}
+.HeadType a:hover{
+    color: red;
+}
+.PopularSongist {
+    width: 790px;
+    overflow: hidden;
+    padding-top: 23px;
+    margin-right: 45px;
+}
+.PopularSongist_title span {
+    font-size: 14px;
+    color: #999;
+}
+.PopularSongist_title h2 {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: unset;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+}
+.list li{
+    width: 175px;
+    height: 204px;
+    float: left;
+    margin-right: 30px;
+    margin-bottom: 26px;
+}
+.list li:nth-child(4){
+    margin-right: 0 !important;
+}
+.list li a{
+    display: block;
+    margin-top: 10px;
+}
+.list li:hover .play{
+    opacity: 1 !important;
+}
+.list li:hover img{
+    transform: scale(1.05);
+}
+.top {
+    width: 175px;
+    height: 175px;
+    position: relative;
+    overflow: hidden;
+}
+.top img{
+    width: 100%;
+    height: 100%;
+    transition: all ease 0.6s;
+}
+.fx{
+    font-size: 40px !important;
+    transition: all ease 0.6s;
+}
+.fx:hover{  
+    transform: scale(1.4);  
+} 
+.play {
+    position: absolute;
+    width: 38px;
+    height: 38px;
+    border-radius: 100%;
+    /* background: #00000096; */
+    line-height: 38px;
+    top: 50%;
+    left: 50%;
+    margin-top: calc(-38px / 2);
+    margin-left: calc(-38px / 2);
+    transition: all ease 0.6s;
+    opacity: 0;
+}
+.info{
+    font-weight: 400;
+    color: #333;
+}
+.info:hover {
+    font-weight: bold;
+        color: #333;
+}
+.icon-play {
+    color: #fff;
+    text-align: center;
+    margin-left: 13px;
+}
+.title {
+    height: 38px;
+    line-height: 38px;
+    margin-bottom: 25px;
+}
+ .title img {
+    height: 20px;
+    margin-top: 16px;
+    margin-left: 600px;
+
+} 
+.title .left h2 {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: unset;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+}
+.title .left span {
+    font-size: 14px;
+    color: #999;
+}
+.content-right {
+    padding-top: 23px;
+    width: 350px;
+}
+.gedan {
+    display: flex;
+    flex-wrap: wrap;
+}
+.gedan li {
+    width: 105px;
+    text-align: center;
+    line-height: 42px;
+    height: 42px;
+    border: 1px solid #ededed;
+    border-radius: 40px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+    box-sizing: border-box;
+
+}
+.gedan li:nth-child(3n){
+    margin-right: 0 !important;
+}
+.gedan li:hover{
+    box-shadow: 2px 4px 2px #333;
+}
+.tjdt{
+    width: 390px;
+    margin-bottom: 50px;
+}
+.tjdt ul{
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -17px;
+    margin-right: 17px;
+}
+.tjdt ul li{
+    margin-bottom: 20px;
+    margin-right: 10px;
+    position: relative;
+}
+.tjdt ul li>div{
+    border-radius: 50px;
+}
+.tjdt ul li .play1{
+    width: 50px !important;
+    height: 50px !important;
+    border-radius: 50px !important;
+    /* background: #00000096 !important; */
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    opacity: 0;
+    
+}
+.tjdt ul li:hover .play1{
+    opacity: 0.9;
+}
+.tjdt ul li:nth-child(4n){
+    margin-right: 0px;
+}
+.tjdt ul li.icon-play{
+    width: 30px;
+    height: 30px;
+    color: white;
+}
+.tjdt ul li:nth-child(1) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #ea4e1b;
+}
+.tjdt ul li:nth-child(2) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #ea4e1b;
+}
+.tjdt ul li:nth-child(3) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #d31154;
+}
+.tjdt ul li:nth-child(4) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #d73535;
+}
+.tjdt ul li:nth-child(5) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #ff9200;
+}
+.tjdt ul li:nth-child(6) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #697ac7;
+}
+.tjdt ul li:nth-child(7) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #4bcbe8;
+}
+.tjdt ul li:nth-child(8) div{
+    width: 50px;
+    height: 50px;
+    margin: 0px 20px 10px 20px;
+    background: #6baaeb;
+}
+.tjdt ul li>div>i{
+    line-height: 50px;
+    margin-left: 4px;
+}
+.tjdt ul li>p{
+    text-align: center;
+    color: #333;
+    font-size: 14px;
+    font-weight: 400;
+}
+.abc{
+    overflow: hidden;
+}
+.list-r:hover {
+    background: #8d8d8d;
+}
+
+.list-l{
+    display: flex;
+}
+.list-l .num{
+    font-size: 18px;
+    color: #5b9400;
+    margin-right: 14px;
+} 
+.list-l img{
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+}
+.list-l p{
+    font-size: 14px;
+    color: #333;
+}
+.list-l p+span{
+    font-size: 14px;
+    color: #999;
+}
+.list-r{
+    display: none;
+}
+.list-r img{
+    width: 25px;
+    height: 25px;
+}
+.lunbo{
+    margin: 0 auto;
+    position: relative;
+    margin-bottom: 50px;
+    width: 1200px;
+}
+.lunbo_mid img{
+    width: 1200px;
+    height: 300px;
+    margin-right: 30px;
+}
+.lunbo_mid{
+    display: flex;
+    overflow: hidden;
+    justify-content: space-around;
+}
+.lunbo_left{
+    height: 50px;
+    position: absolute;
+    top: 50%;
+    left: -65px;
+    margin-top: -25px;
+    opacity: 0;
+
+}
+.lunbo_right{
+    height: 50px;
+    position: absolute;
+    height: 50px;
+    position: absolute;
+    top: 50%;
+    right: -65px;
+    margin-top: -25px;
+    opacity: 0;
+}
+.lunbo:hover .lunbo_left{
+    opacity: 1;
+}
+.lunbo:hover .lunbo_right{
+    opacity: 1;
+}
+.lunbo_left img{
+    width: 27px;
+    height: 50px;
+}
+.lunbo_right img{
+    width: 27px;
+    height: 50px;
+}
+.Newge_title{
+    margin-bottom: 25px;
+}
+.Newge_title span {
+    font-size: 14px;
+    color: #999;
+}
+.Newge_title h2 {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: unset;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+}
+.Newge {
+    margin: 0 auto;
+    margin-bottom: 50px;
+}
+.Newge_content img{
+    width: 173px;
+    height: 173px;
+}
+.Newge_content{
+    position: relative;
+}
+.Newge_content ul{
+    display: flex;
+    justify-content: space-between;
+}
+.Newge_content ul li a{
+    display: block;
+    position: relative;
+}
+.Newge_content p{
+    text-align: center;
+}
+.Newge_content ul li p:nth-child(2){
+    margin-top: 10px;
+    font-weight: 400;
+    font-size: 16px;
+}
+.Newge_content ul li p:nth-child(3){
+    color: #999;
+    font-weight: 400;
+    font-size: 14px;
+}
+.Newge_content ul li:hover .play{
+    opacity: 1 !important;
+}
+.Newge_content ul li:hover img{
+    transform: scale(1.05);
+}
+.Newge_content ul li:hover p:nth-child(2){
+    color: #333;
+    font-weight: 700;
+}
+.Newge_content ul li:hover p:nth-child(3){
+    color: #333;
+}
+.Newge:hover .you {
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.Newge:hover .zuo {
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.zuo{
+    position: absolute;
+    left: -68px;
+    top: 62px;
+    width: 27px !important;
+    height: 50px !important;
+    opacity: 0;
+}
+.you{
+    position: absolute;
+    right: -68px;
+    top: 62px;
+    width: 27px !important;
+    height: 50px !important;
+    opacity: 0;
+}
+.phb{
+    margin-bottom: 50px;
+}
+.phb_ul {
+    display: flex;
+    justify-content: space-between;
+}
+.dddd {
+    overflow: hidden;
+}
+.ph_zi{
+    padding: 10px 20px 10px 10px;
+    box-sizing: border-box;
+    text-align: right;
+}
+.ph_zi:hover a{
+    font-weight: 700;
+}
+.ph_zi a{
+    color: #999;
+    font-size: 14px;
+    font-weight: 400;
+}
+.phb_ul li:nth-child(1){
+    width: 380px;
+    border: 1px solid rgba(91,148,0,.3);
+    height: 544px;
+}
+.phb_ul li:nth-child(2){
+    width: 380px;
+    border: 1px solid rgba(219,88,0,.1);
+    height: 544px;
+}
+.phb_ul li:nth-child(3){
+    width: 380px;
+    border: 1px solid rgba(33,191,166,.1);
+    height: 544px;
+}
+.phb_ul li:nth-child(1) .ph_title{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    height:66px;
+    align-items: center;
+    background-color: rgba(91,148,0,.1);
+}
+.phb_ul li:nth-child(2) .ph_title{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    height:66px;
+    align-items: center;
+    background-color: rgba(219,88,0,.1);
+}
+.phb_ul li:nth-child(3) .ph_title{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    height:66px;
+    align-items: center;
+    background-color: rgba(33,191,166,.1);
+}
+.phb_ul li:nth-child(1) .ph_title span{
+    font-size: 22px;
+    font-weight: 700;
+    color: #5b9400;
+}
+.phb_ul li:nth-child(2) .ph_title span{
+    font-size: 22px;
+    font-weight: 700;
+    color: #db5800;
+}
+.phb_ul li:nth-child(3) .ph_title span{
+    font-size: 22px;
+    font-weight: 700;
+    color: #21bfa6;
+}
+.ph_title img{
+    width: 30px;
+    height: 30px;
+}
+.phb_ul li .ph_list{
+    display: flex;
+    justify-content: space-between;
+    padding-left: 20px;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    align-items: center;
+}
+.ph_list:hover {
+    background: #ededed;
+}
+.ph_list:hover .list_r {
+    display: block;
+}
+.list_l {
+    display: flex;
+}
+.list_l .num {
+    font-size: 18px;
+    color: #5b9400;
+    margin-right: 14px;
+    line-height: 50px;
+}
+.list_l img {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+}
+.list_l p {
+    font-size: 14px;
+    color: #333;
+}
+.list_l p+span:hover{
+    font-weight: 700;
+}
+.list_l p:hover{
+    font-weight: 700;
+}
+.list_l p+span {
+    font-size: 14px;
+    color: #999;
+}
+.list_r {
+    display: none;
+}
+.list_r i{
+    font-size: 20px;
+}
+.list_r a i:hover{
+    font-weight: 700;
+    color: #999;
+}
+.title{
+    display: flex;
+}
+.singer_title p {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: unset;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+}
+.singer_title span {
+    font-size: 14px;
+    color: #999;
+}
+.singer{
+    margin-bottom: 50px;
+}
+.singer ul{
+    width: 1200px;
+    display: flex;
+    padding: 0px 24px;
+    box-sizing: border-box;
+    justify-content: space-between;
+}
+.singer ul li img{
+    width: 125px;
+    height: 125px;
+    border-radius: 125px;
+    transition: all ease 0.6s;
+}
+.singer ul li p{
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+    text-align: center;
+    margin-top: 10px;
+    transition: all ease 0.6s;
+}
+.singer ul li:hover img{
+    transform: scale(1.05);
+}
+.singer ul li:hover p{
+    font-weight: 600;
+}
+.singer_title{
+    margin-bottom: 33px;
+}
+.MV_title{
+    margin-bottom: 25px;
+}
+.MV_title span {
+    font-size: 14px;
+    color: #999;
+}
+.MV_title h2 {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: unset;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+}
+.MV {
+    margin: 0 auto;
+    margin-bottom: 50px;
+}
+.MV_content img{
+    width: 276px;
+    height: 155px;
+}
+.MV_content{
+    position: relative;
+}
+.MV_content ul{
+    display: flex;
+    justify-content: space-between;
+}
+.MV_content ul li a{
+    display: block;
+    position: relative;
+}
+.MV_content p{
+    text-align: center;
+}
+.MV_content ul li p:nth-child(2){
+    margin-top: 10px;
+    font-weight: 400;
+    font-size: 16px;
+}
+.MV_content ul li p:nth-child(3){
+    color: #999;
+    font-weight: 400;
+    font-size: 14px;
+}
+.MV_content ul li:hover .play{
+    opacity: 1 !important;
+}
+.MV_content ul li:hover img{
+    transform: scale(1.05);
+}
+.MV_content ul li:hover p:nth-child(2){
+    color: #333;
+    font-weight: 700;
+}
+.MV_content ul li:hover p:nth-child(3){
+    color: #333;
+}
+.MV:hover .you {
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.MV:hover .zuo {
+    opacity: 1;
+    transition: all ease 0.6s;
+}
+.zuo{
+    position: absolute;
+    left: -68px;
+    top: 62px;
+    width: 27px !important;
+    height: 50px !important;
+    opacity: 0;
+}
+.you{
+    position: absolute;
+    right: -68px;
+    top: 62px;
+    width: 27px !important;
+    height: 50px !important;
+    opacity: 0;
+}
+
+.singer_title p {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: unset;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+}
+.singer_title span {
+    font-size: 14px;
+    color: #999;
+}
+.singer{
+    margin-bottom: 50px;
+}
+.singer ul{
+    width: 1200px;
+    display: flex;
+    padding: 0px 24px;
+    box-sizing: border-box;
+    justify-content: space-between;
+}
+.act ul li img{
+    width: 378px;
+    height: 151px;
+
+}
+.act ul li p{
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+    text-align: center;
+    margin-top: 10px;
+    transition: all ease 0.6s;
+}
+.act ul li:hover img{
+    transform: scale(1.05);
+}
+.act ul li:hover p{
+    font-weight: 600;
+}
+.act_title{
+    margin-bottom: 33px;
+}
+.act_title p {
+    display: inline-block;
+    margin-right: 15px;
+    font-size: 24px;
+    color: #333;
+    font-weight: unset;
+    font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
+}
+.act_title span {
+    font-size: 14px;
+    color: #999;
+}
+.act_content ul{
+    display: flex;
+    justify-content: space-between;
+}
+.footer{
+    width: 100%;
+    background-color: #333;
+}
+.footer_content{
+    width: 1200px;
+    margin: 0 auto;
+    padding-top: 60px;
+    box-sizing: border-box;
+}
+.footer_content1{
+    display: flex;
+    justify-content: space-between;
+
+}
+.biaoti_pic{
+    height: 190px;
+    width: 365px;
+    display: flex;
+    justify-content: space-between;
+}
+.biaoti_pic li{
+    height: 190px;
+    width: 365px;
+    margin-top: 50px
+}
+.biaoti_pic li p {
+    margin-top: 22px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #939393;
+    text-align: left;
+}
+.biaoti_pic li img{
+    width: 36px;
+    height: 36px;
+}
+.footer_content .biaoti{
+    font-size: 18px;
+    font-weight: 400;
+    color: #fff;
+    text-align: left;
+}
+.biaoti_pic li:hover p{
+    font-weight: 700;
+}
+.advice{
+    display: flex;
+    flex-wrap: wrap;
+    width: 365px;
+    box-sizing: border-box;
+    margin-top: 54px;
+}
+.advice li:hover a{
+    font-weight: 700;
+}
+.advice li{
+    width: 113px;
+    margin-bottom: 36px;
+}
+.advice li a{
+    font-size: 14px;
+    font-weight: 400;
+    color: #939393;
+    margin-bottom: 15px;
+}
+.gzyy{
+    display: flex;
+    flex-wrap: wrap-reverse;
+    width: 365px;
+    margin-top: 54px;
+    box-sizing: border-box;
+}
+.gzyy li a{
+    font-size: 14px;
+    font-weight: 400;
+    color: #939393;
+}
+.gzyy li{
+    width: 182px;
+}
+.gzyy li img{
+    width: 31px;
+    height: 31px;
+    vertical-align: middle;
+}
+.gzyy li span{
+    font-size: 14px;
+    margin-left: 10px;
+}
+.gzyy li:last-child{
+    margin-bottom: 23px;
+}
+.footer_content p{
+    font-size: 14px;
+    font-weight: 400;
+    color: #999;
+    text-align: center;
+    padding-bottom: 10px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/css/public.css

@@ -0,0 +1,21 @@
+/* 存放公共css的 */
+.theme_red {
+    color: blue;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.w-1200 {
+   width: 1200px;
+   margin: 0 auto; 
+}
+
+.center {
+    text-align: center;
+}

历届学生/韩想/项目开发/练习项目/仿千千音乐/韩想/index.html

@@ -0,0 +1,825 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>仿千千音乐</title>
+    <link rel="stylesheet" href="./css/clear.css">
+    <!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_x5dhp3hc7ls.css"> -->
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_j10xqzlfzqf.css">
+
+
+</head>
+
+<body>
+
+    <div class="header">
+        <div class="HeadMenu">
+            <div class="w-1200">
+
+                <a class="left" href="http://music.taihe.com/">
+                    <img class="logo" src="http://static1.qianqian.com/web/s/images/logo_2x.5109f00405b21eca.png"
+                        alt="">
+                </a>
+                <ul class="menu left">
+                    <li><a class="active" href="">发现音乐</a></li>
+                    <li><a href="">随心听</a></li>
+                    <li><a href="">客户端</a></li>
+                    <li><a href="">VIP</a></li>
+                    <li><a href="">音乐人</a></li>
+                    <li><a href="">演出</a></li>
+                    <li>
+                        <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
+                    </li>
+                </ul>
+
+                <ul class="login right">
+                    <li>
+                        <a href="">登录</a>
+                    </li>
+                    <li>
+                    </li>
+                    <li>
+                        <a href="">注册</a>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="HeadType">
+            <div class="w-1200 center">
+                <a class="menu_active" href="">推荐</a>
+                <a href="">歌单</a>
+                <a href="">歌手</a>
+                <a href="">榜单</a>
+                <a href="">分类</a>
+                <a href="">MV</a>
+                <a href="">U榜</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="content">
+
+        <div class="w-1200">
+            <div class="abc">
+                <div class="PopularSongist left">
+                    <div class="title">
+                        <div class="left">
+                            <h2>热门歌单</h2>
+                            <span>更多</span>
+                        </div>
+                        <img class="right" src="./img/next.png" alt="">
+                    </div>
+
+                    <ul class="list">
+                        <li>
+                            <div class="top">
+                                <img src="http://musicugc.cdn.qianqian.com/ugcdiy/pic/58adc19c9ecc88077504e852ed33a22d.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </div>
+                            <a class="info">防弹少年团BTS</a>
+                        </li>
+                        <li>
+                            <div class="top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/c65ab27edcf5a2f190a7d651b2f034d5.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </div>
+                            <a class="info">节奏震撼 | 鼓SOLO特辑</a>
+                        </li>
+                        <li>
+                            <div class="top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/173a790b745641a7156cb5d12ec8a512.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </div>
+                            <a class="info">vlogger入门指南-BGM篇</a>
+                        </li>
+                        <li>
+                            <div class="top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/55a2dbfa1a37d37396a5ca23e96ad4ae.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </div>
+                            <a class="info">女团舞曲精选 | 会跳舞的青春有你</a>
+                        </li>
+                        <li>
+                            <div class="top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/9cdbc888cd898c4752d5864223b42743.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </div>
+                            <a class="info">干啥啥不行，长胖第一名</a>
+                        </li>
+                        <li>
+                            <div class="top">
+                                <img src="http://musicugc.qianqian.com/ugcdiy/pic/97bd7811d0e84cf614f86d509edead3c.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </div>
+                            <a class="info">深夜我没有睡着， 我只是藏进了歌里</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="content-right left">
+                    <div class="fltg">
+                        <div class="title">
+                            <div class="left">
+                                <h2>分类听歌</h2>
+                                <span>更多</span>
+                            </div>
+                        </div>
+
+                        <ul class="gedan">
+                            <li>情歌</li>
+                            <li>红歌</li>
+                            <li>劲爆</li>
+                            <li>天籁</li>
+                            <li>经典老歌</li>
+                            <li>欧美</li>
+                            <li>网络歌曲</li>
+                            <li>民歌</li>
+                            <li>80后</li>
+                            <li>儿歌</li>
+                            <li>伤感</li>
+                            <li>安静</li>
+                        </ul>
+
+                        <div class="tjdt">
+                            <div class="title">
+                                <div class="left">
+                                    <h2>推荐电台</h2>
+                                    <span>更多</span>
+                                </div>
+                            </div>
+                            <ul>
+                                <li>
+                                    <div><i class="iconfont icon-music"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>随便听听</p>
+                                </li>
+                                <li>
+                                    <div><i class="iconfont icon-w_sofa"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>在家</p>
+                                </li>
+                                <li>
+                                    <div><i class="iconfont icon-desk-lamp"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>工作</p>
+                                </li>
+                                <li>
+                                    <div><i class="iconfont icon-icon-test"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>上网</p>
+                                </li>
+                                <li>
+                                    <div><i class="iconfont icon-shops"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>店铺</p>
+                                </li>
+                                <li>
+                                    <div><i class="iconfont icon-sport"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>运动</p>
+                                </li>
+                                <li>
+                                    <div><i class="iconfont icon-icon_relax"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>轻松</p>
+                                </li>
+                                <li>
+                                    <div><i class="iconfont icon-index-sweet-service"></i></div>
+                                    <div class="play1">
+                                        <i class="iconfont icon-bofang fx"></i>
+                                    </div>
+                                    <p>甜蜜</p>
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+            <div class="lunbo">
+                <div class="lunbo_mid">
+                    <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15961662413d13e84c353af52fbb7e74567f0c2089.jpg@s_2,w_750,h_300"
+                        alt="">
+                    <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159616349419ff303c494d664b08f00abdc25f1c95.jpg@s_2,w_750,h_300"
+                        alt="">
+                    <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159617722011d469e5fd6b50d99dabca0e988cb099.jpg@s_2,w_750,h_300"
+                        alt="">
+                </div>
+                <div class="lunbo_left">
+                    <img src="./img/zuo.png" alt="">
+                </div>
+                <div class="lunbo_right">
+                    <img src="./img/you.png" alt="">
+                </div>
+
+            </div>
+            <div class="Newge">
+                <div class="Newge_title">
+                    <h2>新歌首发</h2>
+                    <span>更多</span>
+                </div>
+                <div class="Newge_content">
+                    <ul>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_158882138088c065051930226a4cd6eb3e4010fffa.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>千千音乐新歌速递</p>
+                            <p>新歌抢先听</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159676762847675f8e4788a5190f90d0d3936d5389.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>你说，我听着呢</p>
+                            <p>吴克群</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596768050e92437b88c82c07aafd89b19035c34e0.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>放空</p>
+                            <p>陈宏宇</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1596767940be15a45e3997ea3bfe7a2d9ad7f646d1.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>History</p>
+                            <p>荒木宏文</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_159676781754a96b3bff24498634c9c9c91206e3da.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>百家姓·三字经</p>
+                            <p>窦唯/朝简</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15967020589cc9d8edc66af8d46bcd260a5c40aa2b.jpg@s_2,w_346,h_346"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>麒霏Kathrain 同名专辑</p>
+                            <p>麒霏</p>
+                        </li>
+                    </ul>
+                    <img class="you" src="./img/you.png" alt="">
+                    <img class="zuo" src="./img/zuo.png" alt="">
+                </div>
+            </div>
+            <div class="phb">
+                <div class="title">
+                    <div class="left">
+                        <h2>排行榜</h2>
+                        <span>更多</span>
+                    </div>
+                </div>
+                <ul class="phb_ul">
+                    <li>
+                        <div class="ph_title">
+                            <span>新歌榜</span>
+                            <a href=""><img src="./img/anniu1.png" alt=""></a>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">06</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_zi">
+                            <a href="">查看完整榜单></a>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="ph_title">
+                            <span>热曲榜</span>
+                            <a href=""><img src="./img/anniu2.png" alt=""></a>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">12</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_zi">
+                            <a href="">查看完整榜单></a>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="ph_title">
+                            <span>网络歌曲榜</span>
+                            <a href=""><img src="./img/anniu3.png" alt=""></a>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_list">
+                            <div class="list_l">
+                                <span class="num">01</span>
+                                <img src="http://qukufile2.qianqian.com/data2/pic/8b1aab6be81f10639c01c1401a20463c/675021896/675021896.jpg@s_2,w_60,h_60"
+                                    alt="">
+                                <div>
+                                    <p>少年（童声版）</p>
+                                    <span>宋小睿</span>
+                                </div>
+                            </div>
+                            <div class="list_r">
+                                <a href=""><i class="iconfont icon-bofang1"></i></a>
+                                <a href=""></a><i class="iconfont icon-tianjia"></i></a>
+                                <a href=""></a><i class="iconfont icon-download"></i></a>
+                            </div>
+                        </div>
+                        <div class="ph_zi">
+                            <a href="">查看完整榜单></a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="singer">
+                <div class="singer_title">
+                    <p>热门歌手</p>
+                    <span>更多</span>
+                </div>
+                <div class="singer_content">
+
+                    <ul>
+                        <li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
+                                alt="">
+                            <p>薛之谦</p>
+                        </li>
+                        <li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
+                                alt="">
+                            <p>薛之谦</p>
+                        </li>
+                        <li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
+                                alt="">
+                            <p>薛之谦</p>
+                        </li>
+                        <li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
+                                alt="">
+                            <p>薛之谦</p>
+                        </li>
+                        <li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
+                                alt="">
+                            <p>薛之谦</p>
+                        </li>
+                        <li><img src="http://qukufile2.qianqian.com/data2/pic/140d09665d1c204efe00973c3e16282c/612757841/612757841.jpg@s_2,w_250,h_250"
+                                alt="">
+                            <p>薛之谦</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="MV">
+                <div class="MV_title">
+                    <h2>精选MV</h2>
+                    <span>更多</span>
+                </div>
+                <div class="MV_content">
+                    <ul>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15864064945aab63569ca627f7a30cc8fd7036aac9.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>Home</p>
+                            <p>蔡徐坤</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_158640658121f09621d0d4bc176372a7bc789b2b76.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>盒子（BOX）</p>
+                            <p>歌手-张杰妮Jani Z.</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_1585630881489717a96acd0654f364660d7c56baae.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>GetAway</p>
+                            <p>崔迪</p>
+                        </li>
+                        <li>
+                            <a href="">
+                                <img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15849370839e949ad4cd13d2a822516186f866bd4c.jpg@s_2,w_556,h_314"
+                                    alt="">
+                                <div class="play">
+                                    <i class="iconfont icon-bofang fx"></i>
+                                </div>
+                            </a>
+                            <p>说说而已</p>
+                            <p>Hickey喜祺</p>
+                        </li>
+
+
+                    </ul>
+                    <img class="you" src="./img/you.png" alt="">
+                    <img class="zuo" src="./img/zuo.png" alt="">
+                </div>
+            </div>
+            <div class="act">
+                <div class="act_title">
+                    <p>热门活动</p>
+                    <span>更多</span>
+                </div>
+                <div class="act_content">
+
+                    <ul>
+                        <li><img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480660627d94bd0ab1c474c860a059c52b38f1fc.jpg@s_2,w_760,h_304"
+                                alt="">
+                            <p>少年红星音乐计划</p>
+                        </li>
+                        <li><img src="http://business.cdn.qianqian.com/qianqian/pic/bos_client_15480662673c21cb33585df55ea59d202a537c0fc8.jpg@s_2,w_760,h_304"
+                                alt="">
+                            <p>千千Nu创音乐榜</p>
+                        </li>
+                        <li><img src="http://business0.qianqian.com/qianqian/pic/bos_client_15692293177ac453eb9b3cc8847302aaae82069b94.jpg@s_2,w_760,h_304"
+                                alt="">
+                            <p>云南·抚仙湖麦田音乐节赠票活动</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+        </div>
+        <div class="footer">
+            <div class="footer_content">
+                <ul class="footer_content1">
+                    <li>
+                        <p class="biaoti">下载客户端</p>
+                        <ul class="biaoti_pic">
+                            <li><a href=""><img src="./img/win.png" alt="">
+                                    <p>PC版</p>
+                                </a></li>
+                            <li><a href=""><img src="./img/pc.png" alt="">
+                                    <p>MAC版</p>
+                                </a></li>
+                            <li><a href=""><img src="./img/az.png" alt="">
+                                    <p>安卓版</p>
+                                </a></li>
+                            <li><a href=""><img src="./img/iphone.png" alt="">
+                                    <p>iPhone版</p>
+                                </a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <p class="biaoti">关于千千音乐</p>
+                        <ul class="advice">
+                            <li><a href="">意见反馈</a></li>
+                            <li><a href="">联系我们</a></li>
+                            <li><a href="">帮助中心</a></li>
+                            <li><a href="">资源开放平台</a></li>
+                            <li><a href="">太和音乐人</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <p class="biaoti">关注音乐</p>
+                        <ul class="gzyy">
+                            <li><a href=""><img src="./img/wb.png" alt=""> <span>关注微博</span></a></li>
+                            <li><a href=""><img src="./img/wx.png" alt=""> <span>微信公众号</span></a></li>
+                            <li><a href=""><img src="./img/ting.png" alt=""> <span>音乐随心听</span></a></li>
+                        </ul>
+                    </li>
+                </ul>
+                <p>
+                    @2020 Qianqian 粤网文[2018]0902-359号
+                </p>
+                <p>粤公网安备 44030502002309号 增值电信业务经营许可证：粵B2-20180819</p>
+                <p>违法和不良信息举报电话: 010-84369708 转8012 &nbsp;举报邮箱: jubao@taihe.com &nbsp;反馈中心</p>
+            </div>
+
+
+</body>
+
+</html>