devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML期末学生大作业-最新QQ音乐、网易云音乐、酷狗音乐、虾米音乐、咪咕音乐网站html+css+javascript_html,css,mysql音乐管理系统

作者：IT小白 | 2024-02-27 22:47:15

赞

踩

html,css,mysql音乐管理系统

 QQ音乐-部分网页截图-学生HTML+CSS+JS期末作业

IT-精英联盟CSDN期末作业

 QQ音乐-部分源码截图-学生HTML+CSS+JS期末作业

  1. <html lang="en">
  2.  
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
  8.     <!-- 引入标题图标文件 -->
  9.     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  10.     <!-- 引入主页 CSS 文件 -->
  11.     <link rel="stylesheet" href="css/index.css">
  12.     <!-- 引入公共样式 CSS 文件 -->
  13.     <link rel="stylesheet" href="css/common.css">
  14.     <link rel="stylesheet" href="./css/ycCSS.css">
  15. </head>
  16.  
  17. <body>
  18.     <!-- 头部区域开始 -->
  19.     <header>
  20.         <div class="container w">
  21.             <div class="t">
  22.                 <h4 class="logo"><a href="./index.html"><img src="images/logo.png" alt=""></a></h4>
  23.                 <div class="top_nav">
  24.                     <ul>
  25.                         <li><a href="./index.html" class="hover">音乐馆</a></li>
  26.                         <li><a href="./lb/lb/mymusic.html">我的音乐</a></li>
  27.                         <li class="client_hover">
  28.                             <a href="./yc/download/index.html">
  29.                                 客户端<i></i>
  30.                             </a>
  31.                             <div class="client">
  32.                                 <div class="client_cont">
  33.                                     <p><em></em> HQ高品质 全员开启</p>
  34.                                     <p><em></em> 独家音效 全面升级</p>
  35.                                     <p><em></em> 轻盈视觉 动态皮肤</p>
  36.                                     <a href="./ch/download/download.html">下载体验</a>
  37.                                 </div>
  38.                             </div>
  39.                         </li>
  40.                         <li><a href="./artists/index.html" target="_bank">开放平台</a></li>
  41.                         <li><a href="./lb/vipportal/yearvip.html">VIP</a></li>
  42.                     </ul>
  43.                 </div>
  44.                 <div class="top_search">
  45.                     <input type="text" name="" id="" placeholder="搜索音乐、MV、歌单、用户">
  46.                     <button><i class="search_button sprite"></i></button>
  47.                 </div>
  48.                 <div class="login">
  49.                     <div class="login_btn">
  50.                         <a href="javascript:;">登录</a>
  51.                     </div>
  52.                     <div class="vip_select">
  53.                         <a href="./lb/vipportal/yearvip.html">开通VIP<i></i></a>
  54.                         <ul class="vip_hover">
  55.                             <li><a href="./lb/vipportal/yearvip.html" style="border-bottom: 0;">开通绿钻豪华版</a></li>
  56.                             <li><a href="./yc/download/fufeibao.html">开通付费包</a></li>
  57.                         </ul>
  58.                     </div>
  59.                     <div class="charge_select">
  60.                         <a href="javascript:;">充值<i></i></a>
  61.                         <ul class="vip_hover cz">
  62.                             <li><a href="javascript:;" style="border-bottom: 0;">购买乐币</a></li>
  63.                             <li><a href="javascript:;">充值饭票</a></li>
  64.                         </ul>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.             <div class="b">
  69.                 <ul>
  70.                     <li><a href="./index.html" style="color: #31c27c">首页</a></li>
  71.                     <li><a href="./hyh/singer_list/singer.html">歌手</a></li>
  72.                     <li><a href="./lb/lb/album.html">新碟</a></li>
  73.                     <li><a href="./yjx/toplist/index.html">排行榜</a></li>
  74.                     <li><a href="./hyh/category/songmenu.html">分类歌单</a></li>
  75.                     <li><a href="./hyh/radio/fm.html">电台</a></li>
  76.                     <li><a href="./yc/mvlist/mvlist.html">MV</a></li>
  77.                     <li><a href="./ch/album_mall/album_mall.html">数字专辑</a></li>
  78.                     <li><a href="./yjx/piaowu/index.html">票务</a></li>
  79.                 </ul>
  80.             </div>
  81.         </div>
  82.     </header>
  83.     <!-- 头部区域结束 -->
  84.  
  85.     <!-- 主体部分开始 -->
  86.     <main>
  87.         <!-- 歌单推荐模块 -->
  88.         <div class="hot-songs" style="margin-top: 10px;">
  89.             <div class="title">
  90.                 <h3>歌 单 推 荐</h3>
  91.             </div>
  92.             <div class="hot-songs-content">
  93.                 <div class="songs_content w">
  94.                     <div class="list_item">
  95.                         <ul class="gdtj">
  96.                             <li id="gdtj">
  97.                                 <a class="gdtj_items" href="javascript:;" style="color: #31c27c">为你推荐</a>
  98.                                 <div class="list_item_img gd_hide">
  99.                                     <ul>
  100.                                         <li>
  101.                                             <a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img
  102.                                                     src="images/poster/300.jfif" alt=""><span><i
  103.                                                         class="iconfont">&#xe609;</i></span></a>
  104.                                             <h3><a
  105.                                                     href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌！轻松解压100％</a>
  106.                                             </h3>
  107.                                             <span>播放量：2.8亿</span>
  108.                                         </li>
  109.                                         <li>
  110.                                             <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
  111.                                                     src="images/poster/300_2.jfif" alt=""><span><i
  112.                                                         class="iconfont">&#xe609;</i></span></a>
  113.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a>
  114.                                             </h3>
  115.                                             <span>播放量：510.4万</span>
  116.                                         </li>
  117.                                         <li>
  118.                                             <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
  119.                                                     src="images/poster/300_3.png" alt=""><span><i
  120.                                                         class="iconfont">&#xe609;</i></span></a>
  121.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a>
  122.                                             </h3>
  123.                                             <span>播放量：1645.7万</span>
  124.                                         </li>
  125.                                         <li>
  126.                                             <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
  127.                                                     src="images/poster/300_1.jfif" alt=""><span><i
  128.                                                         class="iconfont">&#xe609;</i></span></a>
  129.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜
  130.                                                     我还是会想起你</a></h3>
  131.                                             <span>播放量：2663.8万</span>
  132.                                         </li>
  133.                                         <li style="padding:0;">
  134.                                             <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
  135.                                                     src="images/poster/300.png" alt=""><span><i
  136.                                                         class="iconfont">&#xe609;</i></span></a>
  137.                                             <h3><a
  138.                                                     href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
  139.                                             </h3>
  140.                                             <span>播放量：1756.0万</span>
  141.                                         </li>
  142.                                     </ul>
  143.                                 </div>
  144.                             </li>
  145.                             <li id="gdtj">
  146.                                 <a href="javascript:;" class="gdtj_items">情歌</a>
  147.                                 <div class="list_item_img gd_hide">
  148.                                     <ul>
  149.                                         <li>
  150.                                             <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
  151.                                                     src="https://p.qpic.cn/music_cover/yyDR0yDpzJMiauiaIribblrE0oDiae1VgkuqLzFpicvqmnw8Rzm16OFLSdQ/600?n=1"
  152.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  153.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">泰式浪漫：你想要的甜蜜幻想</a>
  154.                                             </h3>
  155.                                             <span>播放量：9.5万</span>
  156.                                         </li>
  157.                                         <li>
  158.                                             <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
  159.                                                     src="https://p.qpic.cn/music_cover/6aGRubo8UtU3O6E5dy98JoB9AQyLWOxicXAfJNhQP5kWDicQFk7bLjNA/600?n=1"
  160.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  161.                                             <h3><a
  162.                                                     href="https://y.qq.com/n/ryqq/playlist/7947618016">【真情流露】2010的声音倾吐芬芳</a>
  163.                                             </h3>
  164.                                             <span>播放量：23.9万</span>
  165.  
  166.                                         </li>
  167.                                         <li>
  168.                                             <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
  169.                                                     src="https://p.qpic.cn/music_cover/xjBX9k8QoGbAUicX1ialfQPNzIP2mImXuqoUnCghicEfEodV7Wt12qTOw/600?n=1"
  170.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  171.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">温柔华语 |
  172.                                                     把故事藏在歌中</a>
  173.                                             </h3>
  174.                                             <span>播放量：130.1万</span>
  175.  
  176.  
  177.                                         </li>
  178.                                         <li>
  179.                                             <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
  180.                                                     src="https://p.qpic.cn/music_cover/PiajxSqBRaELU4F9LZbYqibQVzsNGoa67HYUS9emLUgWU/600?n=1"
  181.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  182.                                             <h3><a
  183.                                                     href="https://y.qq.com/n/ryqq/playlist/7747451867">音乐里那些不言而喻的“我爱你”</a>
  184.                                             </h3>
  185.                                             <span>播放量：55.5万</span>
  186.                                         </li>
  187.                                         <li style="padding:0;">
  188.                                             <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
  189.                                                     src="https://p.qpic.cn/music_cover/jXFicBvicUcfIWSoCNT1OrbJQYq74ianaMpNvtVicoUsSqnPIajVvjrGdQ/600?n=1"
  190.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  191.                                             <h3><a
  192.                                                     href="https://y.qq.com/n/ryqq/playlist/7537828867">金牌作曲人于逸尧：生活中的止疼药</a>
  193.                                             </h3>
  194.                                             <span>播放量：8.6万</span>
  195.  
  196.  
  197.                                         </li>
  198.                                     </ul>
  199.                                 </div>
  200.                             </li>
  201.                             <li id="gdtj">
  202.                                 <a href="javascript:;" class="gdtj_items">网络歌曲</a>
  203.                                 <div class="list_item_img gd_hide">
  204.                                     <ul>
  205.                                         <li>
  206.                                             <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
  207.                                                     src="https://p.qpic.cn/music_cover/yyDR0yDpzJMiauiaIribblrE0oDiae1VgkuqLzFpicvqmnw8Rzm16OFLSdQ/600?n=1"
  208.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  209.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">泰式浪漫：你想要的甜蜜幻想</a>
  210.                                             </h3>
  211.                                             <span>播放量：9.5万</span>
  212.                                         </li>
  213.                                         <li>
  214.                                             <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
  215.                                                     src="https://p.qpic.cn/music_cover/6aGRubo8UtU3O6E5dy98JoB9AQyLWOxicXAfJNhQP5kWDicQFk7bLjNA/600?n=1"
  216.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  217.                                             <h3><a
  218.                                                     href="https://y.qq.com/n/ryqq/playlist/7947618016">【真情流露】2010的声音倾吐芬芳</a>
  219.                                             </h3>
  220.                                             <span>播放量：23.9万</span>
  221.  
  222.                                         </li>
  223.                                         <li>
  224.                                             <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
  225.                                                     src="https://p.qpic.cn/music_cover/xjBX9k8QoGbAUicX1ialfQPNzIP2mImXuqoUnCghicEfEodV7Wt12qTOw/600?n=1"
  226.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  227.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">温柔华语 |
  228.                                                     把故事藏在歌中</a>
  229.                                             </h3>
  230.                                             <span>播放量：130.1万</span>
  231.  
  232.  
  233.                                         </li>
  234.                                         <li>
  235.                                             <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
  236.                                                     src="images/poster/300_1.jfif" alt=""><span><i
  237.                                                         class="iconfont">&#xe609;</i></span></a>
  238.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜
  239.                                                     我还是会想起你</a></h3>
  240.                                             <span>播放量：2663.8万</span>
  241.                                         </li>
  242.                                         <li style="padding:0;">
  243.                                             <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
  244.                                                     src="images/poster/300.png" alt=""><span><i
  245.                                                         class="iconfont">&#xe609;</i></span></a>
  246.                                             <h3><a
  247.                                                     href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
  248.                                             </h3>
  249.                                             <span>播放量：1756.0万</span>
  250.                                         </li>
  251.                                     </ul>
  252.                                 </div>
  253.                             </li>
  254.                             <li id="gdtj">
  255.                                 <a href="javascript:;" class="gdtj_items">官方歌单</a>
  256.                                 <div class="list_item_img gd_hide">
  257.                                     <ul>
  258.                                         <li>
  259.                                             <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
  260.                                                     src="https://qpic.y.qq.com/music_cover/MKjEtF7diatibd6B0iaeF5Kgn7iblB0nh85QuGbeZCw9oreoxaMVru9fHw/300?n=1&n=1"
  261.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  262.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">华语流行|想度假</a>
  263.                                             </h3>
  264.                                             <span>播放量：23.5万</span>
  265.                                         </li>
  266.                                         <li>
  267.                                             <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
  268.                                                     src="https://qpic.y.qq.com/music_cover/ib2uYYJVhia5TeO7z67ehqoglWn5x5ITgEF7mAOQaOqiceHVTxp0OVPVA/300?n=1&n=1"
  269.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  270.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">华语| 厨房时间</a>
  271.                                             </h3>
  272.                                             <span>播放量：6.9万</span>
  273.  
  274.                                         </li>
  275.                                         <li>
  276.                                             <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
  277.                                                     src="https://qpic.y.qq.com/music_cover/xiabfMZAmQ0PYUzgCvOicArKKEVIiaBaNedAERxdyQ0UCRAXKavSFpIuQ/300?n=1&n=1"
  278.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  279.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">Urban厂牌合辑| HI-LITE
  280.                                                     RECORDS</a>
  281.                                             </h3>
  282.                                             <span>播放量：9.2万</span>
  283.  
  284.  
  285.                                         </li>
  286.                                         <li>
  287.                                             <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
  288.                                                     src="	https://qpic.y.qq.com/music_cover/4pmnRu5sL5QbtO8OS8NKJTN5qBpjx5XMBu6rLGuN9Nm2MwIFxTCmDg/300?n=1&n=1"
  289.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  290.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">华语 | 一起野餐吧</a>
  291.                                             </h3>
  292.                                             <span>播放量：12.9万</span>
  293.                                         </li>
  294.                                         <li style="padding:0;">
  295.                                             <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
  296.                                                     src="https://qpic.y.qq.com/music_cover/4pmnRu5sL5QbtO8OS8NKJTN5qBpjx5XM7KbPBpd3eJiaOqq2Gz733qA/300?n=1&n=1"
  297.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  298.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">轻音乐 | 心在旅行</a>
  299.                                             </h3>
  300.                                             <span>播放量：24.3万</span>
  301.                                         </li>
  302.                                     </ul>
  303.                                 </div>
  304.                             </li>
  305.                             <li id="gdtj">
  306.                                 <a href="javascript:;" class="gdtj_items">轻音乐</a>
  307.                                 <div class="list_item_img gd_hide">
  308.                                     <ul>
  309.                                         <li>
  310.                                             <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
  311.                                                     src="https://p.qpic.cn/music_cover/QibaicFJrvJkoyYmFbM1Ajc2QVUibAUvaYm0WDGnDcUCcQX6owTfuaOtg/600?n=1"
  312.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  313.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">日落时分的电台情歌</a>
  314.                                             </h3>
  315.                                             <span>播放量：104.7万</span>
  316.                                         </li>
  317.                                         <li>
  318.                                             <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
  319.                                                     src="https://p.qpic.cn/music_cover/JfHZkmO0M8cnRibGia1xn1yopQkj94rDljNxkRkeXia9kBfmmEQvMZZWA/600?n=1"
  320.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  321.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">淡淡花香 清新华语女声</a>
  322.                                             </h3>
  323.                                             <span>播放量：66.9万</span>
  324.  
  325.                                         </li>
  326.                                         <li>
  327.                                             <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
  328.                                                     src="https://p.qpic.cn/music_cover/p9lQOkP6ibSVfFMarxW0okFpU2rSRasWwcRx7Q9bwqB1dTHkohOhfDA/600?n=1"
  329.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  330.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">浪漫情歌 ·
  331.                                                     我们一起唱更有爱</a>
  332.                                             </h3>
  333.                                             <span>播放量：112.0万</span>
  334.  
  335.  
  336.                                         </li>
  337.                                         <li>
  338.                                             <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
  339.                                                     src="https://p.qpic.cn/music_cover/8jHwtlKXNKQsQUiaX0cViax8LUUc0u90xZIcswSgzMabNGGGiaLicLgC6w/600?n=1"
  340.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  341.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">情歌对唱 |
  342.                                                     有一种美好只有我们知道</a></h3>
  343.                                             <span>播放量：187.7万</span>
  344.                                         </li>
  345.                                         <li style="padding:0;">
  346.                                             <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
  347.                                                     src="https://p.qpic.cn/music_cover/RPHZt7ryKnOGVbZjREibhNUG35DF6E6gxYxYsegL6sxsEKH7xdPkibBQ/600?n=1"
  348.                                                     alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  349.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">历久情深，枕着音乐入梦</a>
  350.                                             </h3>
  351.                                             <span>播放量：70.0万</span>
  352.                                         </li>
  353.                                     </ul>
  354.                                 </div>
  355.                             </li>
  356.                             <li id="gdtj">
  357.                                 <a href="javascript:;" class="gdtj_items">九月推荐</a>
  358.                                 <div class="list_item_img gd_hide">
  359.                                     <ul>
  360.                                         <li>
  361.                                             <a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img
  362.                                                     src="images/poster/300.jfif" alt=""><span><i
  363.                                                         class="iconfont">&#xe609;</i></span></a>
  364.                                             <h3><a
  365.                                                     href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌！轻松解压100％</a>
  366.                                             </h3>
  367.                                             <span>播放量：2.8亿</span>
  368.                                         </li>
  369.                                         <li>
  370.                                             <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
  371.                                                     src="images/poster/300_2.jfif" alt=""><span><i
  372.                                                         class="iconfont">&#xe609;</i></span></a>
  373.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a>
  374.                                             </h3>
  375.                                             <span>播放量：510.4万</span>
  376.                                         </li>
  377.                                         <li>
  378.                                             <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
  379.                                                     src="images/poster/300_3.png" alt=""><span><i
  380.                                                         class="iconfont">&#xe609;</i></span></a>
  381.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a>
  382.                                             </h3>
  383.                                             <span>播放量：1645.7万</span>
  384.                                         </li>
  385.                                         <li>
  386.                                             <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
  387.                                                     src="images/poster/300_1.jfif" alt=""><span><i
  388.                                                         class="iconfont">&#xe609;</i></span></a>
  389.                                             <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜
  390.                                                     我还是会想起你</a></h3>
  391.                                             <span>播放量：2663.8万</span>
  392.                                         </li>
  393.                                         <li style="padding:0;">
  394.                                             <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
  395.                                                     src="images/poster/300.png" alt=""><span><i
  396.                                                         class="iconfont">&#xe609;</i></span></a>
  397.                                             <h3><a
  398.                                                     href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
  399.                                             </h3>
  400.                                             <span>播放量：1756.0万</span>
  401.                                         </li>
  402.                                     </ul>
  403.                                 </div>
  404.                             </li>
  405.                         </ul>
  406.                     </div>
  407.                     <div class="list_item_img wntj_hide">
  408.                         <ul>
  409.                             <li>
  410.                                 <a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img src="images/poster/300.jfif"
  411.                                         alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  412.                                 <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌！轻松解压100％</a></h3>
  413.                                 <span>播放量：2.8亿</span>
  414.                             </li>
  415.                             <li>
  416.                                 <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
  417.                                         src="images/poster/300_2.jfif" alt=""><span><i
  418.                                             class="iconfont">&#xe609;</i></span></a>
  419.                                 <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a></h3>
  420.                                 <span>播放量：510.4万</span>
  421.                             </li>
  422.                             <li>
  423.                                 <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img src="images/poster/300_3.png"
  424.                                         alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  425.                                 <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a></h3>
  426.                                 <span>播放量：1645.7万</span>
  427.                             </li>
  428.                             <li>
  429.                                 <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
  430.                                         src="images/poster/300_1.jfif" alt=""><span><i
  431.                                             class="iconfont">&#xe609;</i></span></a>
  432.                                 <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜 我还是会想起你</a></h3>
  433.                                 <span>播放量：2663.8万</span>
  434.                             </li>
  435.                             <li style="padding:0;">
  436.                                 <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img src="images/poster/300.png"
  437.                                         alt=""><span><i class="iconfont">&#xe609;</i></span></a>
  438.                                 <h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a></h3>
  439.                                 <span>播放量：1756.0万</span>
  440.                             </li>
  441.                         </ul>
  442.                     </div>
  443.                     <div class="circle">
  444.                         <ul>
  445.                             <li><a href="javascript:;" style="background: #afafaf;"></a></li>
  446.                             <li><a href="javascript:;"></a></li>
  447.                             <li><a href="javascript:;"></a></li>
  448.                         </ul>
  449.                     </div>
  450.                 </div>
  451.  
  452.             </div>
  453.             <a href="javascript:;" class="left_btn">
  454.                 <i class="iconfont">&#xe67c;</i>
  455.             </a>
  456.             <a href="javascript:;" class="right_btn">
  457.                 <i class="iconfont">&#xe678;</i>
  458.             </a>
  459.         </div>

网易云音乐-部分网页截图-学生HTML+CSS+JS期末作业 

网易云音乐-部分源码截图-学生HTML+CSS+JS期末作业 

  1. 	
  2. <!-- 头部开始 -->
  3. <header class="h-top">
  4.  
  5. 	<div class="t-top clearFix">
  6.  
  7. 		<div class="t-wrap">
  8. 			
  9. 			<!-- logo开始 -->
  10. 			<h1 class="logo"><a href="index.html" class="fl">网易云音乐</a></h1>  <!-- href:超链接 -->
  11. 			<!-- logo结束 -->
  12.  
  13. 			<!-- 导航栏标签开始 -->
  14. 			<nav class="top-nav fl">
  15. 				<a href="#" class="active"><span>发现音乐</span><i class="cor"></i></a>
  16. 				<a href="#"><span>我的音乐</span><i class="cor"></i></a>      
  17. 				<a href="#"><span>朋友</span><i class="cor"></i></a>
  18. 				<a href="#"><span>商城</span></a><i class="cor"></i></span>
  19. 				<a href="#"><span>音乐人</span></a><i class="cor"></i></span>
  20. 				<a href="#" class="last"><span>下载客户端</span><i class="hot"></i></a>	
  21. 			</nav>
  22. 			<!-- 导航栏标签结束 -->
  23.  
  24. 			<!-- 头部登录开始 -->
  25. 			<div class="landing fr">
  26. 				<a href="#" class="link fr">登陆</a>
  27. 				<div class="down-tab">
  28. 					<ul class="d-list">
  29. 						<li><a href="#"><i class="d-icon d-icon1"></i>手机号登录</a></li>
  30. 						<li><a href="#"><i class="d-icon d-icon2"></i>微信登录</a></li>
  31. 						<li><a href="#"><i class="d-icon d-icon3"></i>QQ号登录</a></li>
  32. 						<li><a href="#"><i class="d-icon d-icon4"></i>新浪微博登录</a></li>
  33. 						<li><a href="#"><i class="d-icon d-icon5"></i>网易邮箱账号登录</a></li>
  34. 					</ul>
  35. 				</div>
  36. 			</div>
  37. 			<!-- 头部登录结束 -->
  38.  
  39. 			<!-- 搜素框开始 -->
  40. 			<form class="search fr">
  41. 				<input type="text" class="" value="单曲/歌手/专辑/歌单/MV/用户"/>
  42. 			</form>
  43. 			<!-- 搜素框结束 -->
  44.  
  45. 		</div>
  46.  
  47. 	</div>
  48.  
  49. 	<!-- 二级导航栏 -->
  50. 	<div class="n-nav clearFix">
  51. 		<div class="n-wrap">
  52. 			<nav class="nav fl">
  53. 				<a href="index.html" class="n-active"><span>推荐</span></a>
  54. 				<a href="ranking.html"><span>排行榜</span></a>
  55. 				<a href="sheet.html"><span>歌单</span></a>
  56. 				<a href="radio.html"><span>主播电台</span></a>
  57. 				<a href="#"><span>歌手</span></a>
  58. 				<a href="#"><span>新碟上架</span></a>
  59. 			</nav>
  60. 		</div>
  61. 	</div>
  62. 	<!-- 二级导航栏 -->
  63.  
  64. </header>
  65.  
  66. <!-- 头部结束 -->
  67.  
  68. <div class="banner">
  69. 	
  70. 	<!-- 轮播图开始 -->
  71. 	<ul class="i-banner clearFix">
  72. 		
  73. 		<!-- 轮播图基本组件 -->
  74. 		<li class="i-bg">
  75. 			<div class="b-wrap">
  76. 				<a href="#">
  77. 					<img src="img/banner/1.jpg"/>
  78. 				</a>
  79. 				<a href="#" class="btnL"></a>
  80. 				<a href="#" class="btnR"></a>
  81. 				<div class="dot">
  82. 					<a href="#" class="i-active"></a>
  83. 					<a href="#"></a>
  84. 					<a href="#"></a>
  85. 					<a href="#"></a>
  86. 					<a href="#"></a>
  87. 				</div>
  88. 				<div class="download">
  89. 					<a href="#" class="btn">下载客户端</a>
  90. 					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
  91. 				</div>
  92. 			</div>
  93. 		</li>
  94. 		<!-- 轮播图基本组件 -->
  95.  
  96. 		<li class="i-bg2">
  97. 			<div class="b-wrap">
  98. 				<a href="#">
  99. 					<img src="img/banner/2.jpg"/>
  100. 				</a>
  101. 				<a href="#" class="btnL"></a>
  102. 				<a href="#" class="btnR"></a>
  103. 				<div class="dot">
  104. 					<a href="#"></a>
  105. 					<a href="#" class="i-active"></a>
  106. 					<a href="#"></a>
  107. 					<a href="#"></a>
  108. 					<a href="#"></a>
  109. 				</div>
  110. 				<div class="download">
  111. 					<a href="#" class="btn">下载客户端</a>
  112. 					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
  113. 				</div>
  114. 			</div>
  115. 		</li>
  116.  
  117. 		<li class="i-bg3">
  118. 			<div class="b-wrap">
  119. 				<a href="#">
  120. 					<img src="img/banner/3.jpg"/>
  121. 				</a>
  122. 				<a href="#" class="btnL"></a>
  123. 				<a href="#" class="btnR"></a>
  124. 				<div class="dot">
  125. 					<a href="#"></a>
  126. 					<a href="#"></a>
  127. 					<a href="#" class="i-active"></a>
  128. 					<a href="#"></a>
  129. 					<a href="#"></a>
  130. 				</div>
  131. 				<div class="download">
  132. 					<a href="#" class="btn">下载客户端</a>
  133. 					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
  134. 				</div>
  135. 			</div>
  136. 		</li>
  137.  
  138. 		<li class="i-bg4">
  139. 			<div class="b-wrap">
  140. 				<a href="#">
  141. 					<img src="img/banner/4.jpg"/>
  142. 				</a>
  143. 				<a href="#" class="btnL"></a>
  144. 				<a href="#" class="btnR"></a>
  145. 				<div class="dot">
  146. 					<a href="#"></a>
  147. 					<a href="#"></a>
  148. 					<a href="#"></a>
  149. 					<a href="#" class="i-active"></a>
  150. 					<a href="#"></a>
  151. 				</div>
  152. 				<div class="download">
  153. 					<a href="#" class="btn">下载客户端</a>
  154. 					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
  155. 				</div>
  156. 			</div>
  157. 		</li>
  158.  
  159. 		<li class="i-bg5">
  160. 			<div class="b-wrap">
  161. 				<a href="#">
  162. 					<img src="img/banner/5.jpg"/>
  163. 				</a>
  164. 				<a href="#" class="btnL"></a>
  165. 				<a href="#" class="btnR"></a>
  166. 				<div class="dot">
  167. 					<a href="#"></a>
  168. 					<a href="#"></a>
  169. 					<a href="#"></a>
  170. 					<a href="#"></a>
  171. 					<a href="#" class="i-active"></a>
  172. 				</div>
  173. 				<div class="download">
  174. 					<a href="#" class="btn">下载客户端</a>
  175. 					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
  176. 				</div>
  177. 			</div>
  178. 		</li>
  179.  
  180. 	</ul>
  181. 	<!-- 轮播图结束 -->
  182. </div>
  183.  
  184.  
  185. <main class="main">
  186. 	<div class="m-wrap">
  187. 		<div class="m-left">
  188. 			<section>
  189.  
  190. 				<!-- 热门推荐标题开始 -->
  191. 				<header class="h-title">
  192. 					<h2><a href="#">热门推荐</a></h2>
  193. 					<nav class="h-list">
  194. 						<a href="#">华语</a>
  195. 						<span class="line">|</span>
  196. 						<a href="#">流行</a>
  197. 						<span class="line">|</span>
  198. 						<a href="#">摇滚</a>
  199. 						<span class="line">|</span>
  200. 						<a href="#">民谣</a>
  201. 						<span class="line">|</span>
  202. 						<a href="#">电子</a>
  203. 					</nav>
  204. 					<span class="more"><a href="#">更多</a><i>&nbsp;</i></span>
  205. 				</header>
  206. 				<!-- 热门推荐标题结束 -->
  207.  
  208. 				<ul class="h-music clearFix">
  209.  
  210. 					<!-- 专辑封面组件 -->
  211. 					<li>
  212. 						<div class="h-img">
  213. 							<a href="#">
  214. 								<img src="img/hotrecom/01.jpg"/>
  215. 								<span class="bg"></span>
  216. 								<span class="icon"></span>
  217. 								<span class="txt">74万</span>
  218. 							</a>
  219. 							<a href="#" class="play" title="播放"></a>
  220. 						</div>
  221. 						<p><a href="#">听过他们写的歌，却不曾闻其名</a></p>
  222. 					</li>
  223. 					<!-- 专辑封面组件 -->
  224.  
  225. 					<li>
  226. 						<div class="h-img">
  227. 							<a href="#">
  228. 								<img src="img/hotrecom/02.jpg"/>
  229. 								<span class="bg"></span>
  230. 								<span class="icon"></span>
  231. 								<span class="txt">22万</span>
  232. 							</a>
  233. 							<a href="#" class="play" title="播放"></a>
  234. 						</div>
  235. 						<p><a href="#">◎小众无前奏 || 一秒陷入韩式温柔</a></p>
  236. 					</li>
  237.  
  238. 					<li>
  239. 						<div class="h-img">
  240. 							<a href="#">
  241. 								<img src="img/hotrecom/03.jpg"/>
  242. 								<span class="bg"></span>
  243. 								<span class="icon"></span>
  244. 								<span class="txt">55万</span>
  245. 							</a>
  246. 							<a href="#" class="play" title="播放"></a>
  247. 						</div>
  248. 						<p><a href="#">「攻声集」群攻并起逐天下</a></p>
  249. 					</li>
  250.  
  251. 					<li>
  252. 						<div class="h-img">
  253. 							<a href="#">
  254. 								<img src="img/hotrecom/04.jpg"/>
  255. 								<span class="bg"></span>
  256. 								<span class="icon"></span>
  257. 								<span class="txt">12万</span>
  258. 							</a>
  259. 							<a href="#" class="play" title="播放"></a>
  260. 						</div>
  261. 						<p><span class="djvideo"></span><a href="#"> 001 公子夏天</a></p>
  262. 					</li>
  263.  
  264. 					<li>
  265. 						<div class="h-img">
  266. 							<a href="#">
  267. 								<img src="img/hotrecom/05.jpg"/>
  268. 								<span class="bg"></span>
  269. 								<span class="icon"></span>
  270. 								<span class="txt">102万</span>
  271. 							</a>
  272. 							<a href="#" class="play" title="播放"></a>
  273. 						</div>
  274. 						<p><a href="#">［真实感］绝佳的英伦摇滚现场</a></p>
  275. 					</li>
  276.  
  277. 					<li>
  278. 						<div class="h-img">
  279. 							<a href="#">
  280. 								<img src="img/hotrecom/06.jpg"/>
  281. 								<span class="bg"></span>
  282. 								<span class="icon"></span>
  283. 								<span class="txt">74737</span>
  284. 							</a>
  285. 							<a href="#" class="play" title="播放"></a>
  286. 						</div>
  287. 						<p><span class="djvideo"></span><a href="#"> 一天中的静止时光</a></p>
  288. 					</li>
  289.  
  290. 					<li>
  291. 						<div class="h-img">
  292. 							<a href="#">
  293. 								<img src="img/hotrecom/07.jpg"/>
  294. 								<span class="bg"></span>
  295. 								<span class="icon"></span>
  296. 								<span class="txt">61万</span>
  297. 							</a>
  298. 							<a href="#" class="play" title="播放"></a>
  299. 						</div>
  300. 						<p><a href="#">『東方雅乐｜和风意境純音赏』</a></p>
  301. 					</li>
  302.  
  303. 					<li>
  304. 						<div class="h-img">
  305. 							<a href="#">
  306. 								<img src="img/hotrecom/08.jpg"/>
  307. 								<span class="bg"></span>
  308. 								<span class="icon"></span>
  309. 								<span class="txt">12691</span>
  310. 							</a>
  311. 							<a href="#" class="play" title="播放"></a>
  312. 						</div>
  313. 						<p><span class="djvideo"></span><a href="#"> 汉宣帝：从犯人到皇帝</a></p>
  314. 					</li>
  315. 				</ul>
  316. 			</section>
  317.  
  318. 			<!-- 这是一个无聊的广告开始 -->
  319. 			<div id="m-banner">
  320. 				<a href="#">
  321. 					<img src="img/m-banner.jpg"/>
  322. 				</a>
  323. 			</div>
  324. 			<!-- 这是一个无聊的广告结束 -->
  325.  
  326. 			<section>
  327.  
  328. 				<!-- 新碟上架开始 -->
  329. 				<header class="h-title">
  330. 					<h2><a href="#">新碟上架</a></h2>
  331. 					<span class="more"><a href="#">更多</a><i>&nbsp;</i></span>
  332. 				</header>
  333. 				<!-- 新碟上架结束 -->
  334.  
  335. 				<div class="disk clearFix">
  336. 					<a href="#" class="tit titL">&nbsp;</a>
  337. 					<div class="dd-list">
  338. 						<ul class="clearFix">
  339.  
  340. 							<!-- 新碟上架组件开始 -->
  341. 							<li class="d-disk">
  342. 								<div class="dd-img">
  343. 									<img src="img/disk/01.jpg"/>
  344. 									<a href="#" class="p-disk"></a>
  345. 									<a href="#" class="diskplay"></a>
  346. 								</div>
  347. 								<p><a href="#">AVĪCI (01)</a></p>
  348. 								<p class="singer"><a href="#">Avicii</a></p>						
  349. 							</li>
  350. 							<!-- 新碟上架组件结束 -->
  351.  
  352. 							<li class="d-disk">
  353. 								<div class="dd-img">
  354. 									<img src="img/disk/02.jpg"/>
  355. 									<a href="#" class="p-disk"></a>
  356. 									<a href="#" class="diskplay"></a>
  357. 								</div>
  358. 								<p><a href="#">海胆&谁来剪月光</a></p>
  359. 								<p class="singer"><a href="#">陈奕迅</a></p>						
  360. 							</li>
  361. 							<li class="d-disk">
  362. 								<div class="dd-img">
  363. 									<img src="img/disk/03.jpg"/>
  364. 									<a href="#" class="p-disk"></a>
  365. 									<a href="#" class="diskplay"></a>
  366. 								</div>
  367. 								<p><a href="#">박진영의 파티피플</a></p>
  368. 								<p class="singer"><a href="#">V.A.</a></p>						
  369. 							</li>
  370. 							<li class="d-disk">
  371. 								<div class="dd-img">
  372. 									<img src="img/disk/04.jpg"/>
  373. 									<a href="#" class="p-disk"></a>
  374. 									<a href="#" class="diskplay"></a>
  375. 								</div>
  376. 								<p><a href="#">OK?</a></p>
  377. 								<p class="singer"><a href="#">Nissy(西島隆弘)</a></p>						
  378. 							</li>
  379. 							<li class="d-disk">
  380. 								<div class="dd-img">
  381. 									<img src="img/disk/05.jpg"/>
  382. 									<a href="#" class="p-disk"></a>
  383. 									<a href="#" class="diskplay"></a>
  384. 								</div>
  385. 								<p><a href="#">Rainbow</a></p>
  386. 								<p class="singer"><a href="#">Kesha</a></p>						
  387. 							</li>
  388. 						</ul>
  389. 					</div>
  390. 					<a href="#" class="tit titR">&nbsp;</a>
  391. 				</div>
  392. 			</section>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>酷狗音乐-就是歌多</title>
  9.     <link rel="stylesheet" href="./css/index.css">
  10.     <link rel="stylesheet" href="./css/swiper.min.css">
  11.  
  12.     <script src="./js/jquery-3.5.1.min.js"></script>
  13.     <script src="./js/swiper.min.js"></script>
  14. </head>
  15.  
  16. <body>
  17.     <!-- 顶部搜索栏 -->
  18.     <div class="search">
  19.         <div class="container clearfix">
  20.             <a href="./index.html"><img src="./img/index/logo.png"></a>
  21.             <div class="in-search">
  22.                 <span></span>
  23.                 <input type="text" placeholder="安全着陆 个人简历">
  24.                 <a href="#"><span class="iconfont">&#xe501;</span></a>
  25.             </div>
  26.             <ul class="search-right">
  27.                 <li><a href="./call-center.html" target="_blank">客服中心</a></li>
  28.                 <li><a href="./Join-us.html" target="_blank">招贤纳士</a></li>
  29.                 <li><a href="#">会员中心</a></li>
  30.                 <li class="xian"></li>
  31.             </ul>
  32.             <a href="#">
  33.                 <div class="enter"><span>登录</span></div>
  34.             </a>
  35.         </div>
  36.     </div>
  37.    
  38.     <!-- 导航栏 -->
  39.     <div class="navigation">
  40.         <div class="container clearfix">
  41.             <div class="nav-left clearfix">
  42.                 <a href="#"><span class="page">首页</span></a>
  43.                 <a href="./crunchies.html"><span>榜单</span></a>
  44.                 <a href="#"><span>下载客户端</span></a>
  45.                 <div class="more">
  46.                     <a class="this-more">更多
  47.                         <img src="./img/index/xsj.png" class="more-xsj">
  48.                         <img src="./img/index/ssj.png" class="more-ssj">
  49.                     </a>
  50.                     <ul style="z-index: 999;">
  51.                         <li><a href="#">电台</a></li>
  52.                         <li><a href="#">MV</a></li>
  53.                         <li><a href="#">歌单</a></li>
  54.                         <li><a href="#">歌手</a></li>
  55.                         <li><a href="#">专辑</a></li>
  56.                     </ul>
  57.                 </div>
  58.             </div>
  59.             <div class="nav-right clearfix">
  60.                 <a href="#"><span class="iconfont">&#xe607;</span>音乐直播</a>
  61.                 <a href="#"><span class="iconfont">&#xe656;</span>酷狗LIVE</a>
  62.                 <a href="#"><span class="iconfont">&#xe60e;</span>音乐人</a>
  63.                 <a href="./audio-radio.html" target="_blank"><span class="iconfont">&#xe615;</span>成为主播</a>
  64.                 <a href="#"><span class="iconfont">&#xe640;</span>商城</a>
  65.             </div>
  66.         </div>
  67.     </div>
  68.  
  69.     <!-- 轮播图 -->
  70.     <div class="rotation" id="lunbotu">
  71.       <div class="swiper mySwiper">
  72.         <div class="swiper-wrapper">
  73.           <div class="swiper-slide"><img src="./img/index/rotation1.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  74.           <div class="swiper-slide"><img src="./img/index/rotation2.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  75.           <div class="swiper-slide"><img src="./img/index/rotation3.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  76.           <div class="swiper-slide"><img src="./img/index/rotation4.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  77.           <div class="swiper-slide"><img src="./img/index/rotation5.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  78.           <div class="swiper-slide"><img src="./img/index/rotation6.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  79.           <div class="swiper-slide"><img src="./img/index/rotation7.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  80.           <div class="swiper-slide"><img src="./img/index/rotation8.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  81.           <div class="swiper-slide"><img src="./img/index/rotation9.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  82.         </div>
  83.         <div class="swiper-button-next"></div>
  84.         <div class="swiper-button-prev"></div>
  85.         <div class="swiper-pagination"></div>
  86.       </div>
  87.       <div class="container bom clearfix">
  88.         <div class="download">
  89.             <div class="download-word clearfix">
  90.                 <a href="#">
  91.                     <i class="iconfont">&#xe604;</i>
  92.                     <span>下载PC版</span>
  93.                 </a>
  94.                 <span class="xian">|</span>
  95.                 <a href="#">
  96.                     <i class="iconfont">&#xe63b;</i>
  97.                     <span>下载iPhone版</span>
  98.                 </a>
  99.                 <span class="xian">|</span>
  100.                 <a href="#">
  101.                     <i class="iconfont">&#xe60d;</i>
  102.                     <span>下载Android版</span>
  103.                 </a>
  104.             </div>
  105.         </div>
  106.       </div>
  107.     </div>
  108.     <script>
  109.       var swiper = new Swiper(".mySwiper", {
  110.         slidesPerView: 1,
  111.         spaceBetween: 30,
  112.         loop: true,
  113.         pagination: {
  114.           el: ".swiper-pagination",
  115.           clickable: true,
  116.         },
  117.         navigation: {
  118.           nextEl: ".swiper-button-next",
  119.           prevEl: ".swiper-button-prev",
  120.         },
  121.       });
  122.     </script>
  123.     <!-- 精选歌单 -->
  124.     <div class="song-one-medal">
  125.         <div class="container clearfix">
  126.             <div class="song-one-medal-left clearfix">
  127.                 <div class="song-one">
  128.                     <span><i>精选</i>歌单</span>
  129.                     <a href="#">更多</a>
  130.                 </div>
  131.                 <div class="song-one-under">
  132.                     <a href="#" class="first-one">
  133.                         <img src="./upload/song-one1.jpg">
  134.                         <p><span>14.1万</span><i class="iconfont">&#xe60e;</i></p>
  135.                         <div>
  136.                             <del class="under-word">AWAL厂牌回归！独立与主流的流行碰撞</del>
  137.                             <del class="under-word">欧美Ku乐</del>
  138.                             <i class="iconfont transmit">&#xe6ac;</i>
  139.                         </div>
  140.                     </a>
  141.                     <a href="#" class="other">
  142.                         <img src="./upload/song-one2.jpg">
  143.                         <p><span>38740.7万</span><i class="iconfont">&#xe60e;</i></p>
  144.                         <div>
  145.                             <del class="under-word">每周推荐歌曲</del>
  146.                             <del class="under-word">酷狗号歌单君</del>
  147.                             <i class="iconfont transmit">&#xe6ac;</i>
  148.                         </div>
  149.                     </a>
  150.                     <a href="#" class="other">
  151.                         <img src="./upload/song-one3.jpg">
  152.                         <p><span>138.4万</span><i class="iconfont">&#xe60e;</i></p>
  153.                         <div>
  154.                             <del class="under-word">原来你一直在...</del>
  155.                             <del class="under-word">简单爱</del>
  156.                             <i class="iconfont transmit">&#xe6ac;</i>
  157.                         </div>
  158.                     </a>
  159.                     <a href="#" class="other">
  160.                         <img src="./upload/song-one4.jpg">
  161.                         <p><span>36.4万</span><i class="iconfont">&#xe60e;</i></p>
  162.                         <div>
  163.                             <del class="under-word">拯救坏情绪：...</del>
  164.                             <del class="under-word">大饼干</del>
  165.                             <i class="iconfont transmit">&#xe6ac;</i>
  166.                         </div>
  167.                     </a>
  168.                     <a href="#" class="other">
  169.                         <img src="./upload/song-one5.jpg">
  170.                         <p><span>8.3万</span><i class="iconfont">&#xe60e;</i></p>
  171.                         <div>
  172.                             <del class="under-word">欧美乐鉴 | 六...</del>
  173.                             <del class="under-word">欧美Ku乐</del>
  174.                             <i class="iconfont transmit">&#xe6ac;</i>
  175.                         </div>
  176.                     </a>
  177.                 </div>
  178.             </div>
  179.             <div class="song-one-medal-right clearfix">
  180.                 <div class="medal">
  181.                     <span><i>热门</i>榜单</span>
  182.                     <a href="./crunchies.html">更多</a>
  183.                 </div>
  184.                 <div class="medal-under">
  185.                     <a href="#" class="more">
  186.                         <img src="./img/index/soaring.jpg">
  187.                         <i class="iconfont">&#xe6ac;</i>
  188.                         <h3>酷狗飙升榜</h3>
  189.                         <p>1 . 蔡依林 - 倒带</p>
  190.                         <p>2 . 莫籽 - 世间美好与你环...</p>
  191.                         <span>></span>
  192.                     </a>
  193.                     <a href="#" class="more">
  194.                         <img src="./img/index/top500.jpg">
  195.                         <i class="iconfont">&#xe6ac;</i>
  196.                         <h3>酷狗TOP500</h3>
  197.                         <p>1 . 阿冗 - 你的答案</p>
  198.                         <p>2 . 阿悠悠 - 一生与你插肩...</p>
  199.                         <span>></span>
  200.                     </a>
  201.                     <a href="#" class="more">
  202.                         <img src="./img/index/red songs.jpg">
  203.                         <i class="iconfont">&#xe6ac;</i>
  204.                         <h3>网络红歌榜</h3>
  205.                         <p>1 . 杭娇 - 听心</p>
  206.                         <p>2 . 虎二 - 你一定要幸福</p>
  207.                         <span>></span>
  208.                     </a>
  209.                 </div>
  210.             </div>
  211.         </div>
  212.     </div>
  213.  
  214.     <!-- 广告 -->
  215.     <div class="advert1">
  216.         <div class="container clearfix">
  217.             <a href="#"><img src="./img/index/ad3.jpg"></a>
  218.         </div>
  219.     </div>
  220.  
  221.     <!-- 新歌首发 -->
  222.     <div class="new-song">
  223.         <div class="container clearfix">
  224.             <div class="new-song-left clearfix">
  225.                 <div class="new-song-one">
  226.                     <span><i>新歌</i>首发</span>
  227.                     <a href="#">华语</a>
  228.                     <a href="#">欧美</a>
  229.                     <a href="#">韩国</a>
  230.                     <a href="#">日本</a>
  231.                     <a href="#" class="all">
  232.                         <i class="iconfont">&#xe62e;</i>全部播放
  233.                     </a>
  234.                 </div>
  235.                 <div class="new-song-one-under">
  236.                     <div>
  237.                         <a href="#">
  238.                             <p>
  239.                                 小阿七 - 不谓侠
  240.                                 <i class="iconfont exclusive">&#xe60a;</i>
  241.                                 <span>04:28</span>
  242.                                 <i class="iconfont hide1">&#xe62e;</i>
  243.                                 <i class="iconfont hide2">&#xe651;</i>
  244.                             </p>
  245.                         </a>
  246.                         <a href="#">
  247.                             <p>
  248.                                 周深 - 放鹤图【鹤唳华亭电视剧萧定权人物曲】
  249.                                 <i class="iconfont exclusive">&#xe60a;</i>
  250.                                 <span>06:26</span>
  251.                                 <i class="iconfont hide1">&#xe62e;</i>
  252.                                 <i class="iconfont hide2">&#xe651;</i>
  253.                             </p>
  254.                         </a>
  255.                         <a href="#">
  256.                             <p>
  257.                                 庄心妍 - 缺憾美
  258.                                 <i class="iconfont exclusive">&#xe60a;</i>
  259.                                 <span>03:20</span>
  260.                                 <i class="iconfont hide1">&#xe62e;</i>
  261.                                 <i class="iconfont hide2">&#xe651;</i>
  262.                             </p>
  263.                         </a>
  264.                         <a href="#">
  265.                             <p>
  266.                                 封茗囧菌 - 占有欲
  267.                                 <i class="iconfont exclusive">&#xe60a;</i>
  268.                                 <span>03:23</span>
  269.                                 <i class="iconfont hide1">&#xe62e;</i>
  270.                                 <i class="iconfont hide2">&#xe651;</i>
  271.                             </p>
  272.                         </a>
  273.                         <a href="#">
  274.                             <p>
  275.                                 秦俊杰 - 直到世界尽头 (Live)
  276.                                 <i class="iconfont exclusive">&#xe60a;</i>
  277.                                 <span>05:04</span>
  278.                                 <i class="iconfont hide1">&#xe62e;</i>
  279.                                 <i class="iconfont hide2">&#xe651;</i>
  280.                             </p>
  281.                         </a>
  282.                         <a href="#">
  283.                             <p>
  284.                                 吉克隽逸 - 稀有人生 (Live)
  285.                                 <i class="iconfont exclusive">&#xe60a;</i>
  286.                                 <span>02:52</span>
  287.                                 <i class="iconfont hide1">&#xe62e;</i>
  288.                                 <i class="iconfont hide2">&#xe651;</i>
  289.                             </p>
  290.                         </a>
  291.                         <a href="#">
  292.                             <p>
  293.                                 那英、肖战 - 跟着感觉走 (Live)
  294.                                 <i class="iconfont exclusive">&#xe60a;</i>
  295.                                 <span>04:15</span>
  296.                                 <i class="iconfont hide1">&#xe62e;</i>
  297.                                 <i class="iconfont hide2">&#xe651;</i>
  298.                             </p>
  299.                         </a>
  300.                         <a href="#">
  301.                             <p>
  302.                                 呵呵大师 - 失落沙洲 (Live)
  303.                                 <i class="iconfont exclusive">&#xe60a;</i>
  304.                                 <span>04:34</span>
  305.                                 <i class="iconfont hide1">&#xe62e;</i>
  306.                                 <i class="iconfont hide2">&#xe651;</i>
  307.                             </p>
  308.                         </a>
  309.                     </div>
  310.                     <div class="song-page-number">
  311.                         <a href="#">&lt;</a>
  312.                         <span>&nbsp;1/3&nbsp;</span>
  313.                         <a href="#">&gt;</a>
  314.                     </div>
  315.                 </div>
  316.             </div>
  317.             <div class="new-song-right clearfix">
  318.                 <div class="MV">
  319.                     <span><i>推荐</i>MV</span>
  320.                     <a href="#">更多</a>
  321.                 </div>
  322.                 <div class="MV-under">
  323.                     <a href="#" class="img-first">
  324.                         <div>
  325.                             <p>厌氧</p>
  326.                             <del>二珂</del>
  327.                         </div>
  328.                         <i class="iconfont transmit1">&#xe6ac;</i>
  329.                     </a>
  330.                     <a href="#" class="img-other">
  331.                         <img src="./upload/new-song-right2.jpg">
  332.                         <h5>不亏不欠</h5>
  333.                         <span>袁娅维</span>
  334.                         <div></div>
  335.                         <i class="iconfont transmit2">&#xe6ac;</i>
  336.                     </a>
  337.                     
  338.                     <a href="#" class="img-other">
  339.                         <img src="./upload/new-song-right3.jpg">
  340.                         <h5>比远方更远</h5>
  341.                         <span>李晓杰</span>
  342.                         <div> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
  343.                         <i class="iconfont transmit2">&#xe6ac;</i>
  344.                     </a>
  345.                 </div>
  346.             </div>
  347.         </div>
  348.     </div>
  349. </body>
  350.  
  351. </html>

虾米音乐-部分网页截图-学生HTML+CSS+JS期末作业 

  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="./code/base.css">
  10.     <link rel="stylesheet" href="./code/xiami.css">
  11.     <link rel="stylesheet" href="./code/YiRen.css">
  12. </head>
  13.  
  14. <body>
  15.  
  16.     <!-- 顶部导航栏 -->
  17.     <div class="header container clearfix">
  18.         <div class="XM_logo fl">
  19.             <img src="./img/XM_logo.png" alt="">
  20.         </div>
  21.         <div class="Hnav fl">
  22.             <a href="" class="hnav1">发现</a>
  23.             <a href="">我的音乐</a>
  24.             <a href="">音乐人</a>
  25.             <a href="">客户端下载</a>
  26.             <a href="">会员中心</a>
  27.         </div>
  28.  
  29.         <input type="text" placeholder="exo">
  30.         <span class="icon_search"></span>
  31.         <div class="login fl"> <a href="">登录/注册</a></div>
  32.  
  33.     </div>
  34.     <!-- 顶部导航栏end -->
  35.  
  36.     <!-- 轮播大图 -->
  37.     <div class="container LBpic  clearfix">
  38.         <div class="LB_left fl"><a href=""><img src="./img/party5.jpg" alt=""></a></div>
  39.         <div class="LB_center fl"><a href=""><img src="./img/party.jpg" alt=""></a></div>
  40.         <div class="LB_right fl">
  41.             <div><a href=""><img src="./img/party3.jpg" alt=""></a></div>
  42.         </div>
  43.     </div>
  44.     <!-- 轮播大图 end -->
  45.  
  46.     <!-- 正版心 -->
  47.     <div class="container clearfix">
  48.         <!-- 左侧定位！！！！ -->
  49.         <div class="L-fixed fl">
  50.             <ul>
  51.                 <li class="li1">推荐</li>
  52.                 <li><a href="./PaiHangBang.html" target="_blank">排行榜</a></li>
  53.                 <li><a href="">歌单</a></li>
  54.                 <li><a href="./YiRen.html" target="_blank">艺人</a></li>
  55.                 <li><a href="">曲风流派</a></li>
  56.                 <li><a href="">专辑</a></li>
  57.                 <li><a href="">MV</a></li>
  58.                 <li><a href="">厂牌</a></li>
  59.             </ul>
  60.             <div class="download clearfix">
  61.                 <div class="fl">
  62.                     <h3>扫描二维码下载</h3>
  63.                     <p>即可体验<br>我们无与伦比的<br>客户端体验</p>
  64.  
  65.                 </div>
  66.                 <img src="./img/Eweima.png" alt="">
  67.             </div>
  68.             <div class="icon clearfix">
  69.                 <div class="fl">
  70.                     <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
  71.                         </a></div> ios
  72.                 </div>
  73.                 <div class="fl">
  74.                     <div class="Ohidden "><a href=""> <img src="./img/android.jpg" alt="">
  75.                         </a></div> android
  76.                 </div>
  77.                 <div class="fl">
  78.                     <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
  79.                         </a></div> ios
  80.                 </div>
  81.                 <div class="fl">
  82.                     <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
  83.                         </a></div> ios
  84.                 </div>
  85.                 <div class="fl">
  86.                     <div class="Ohidden "><a href=""> <img src="./img/android.jpg" alt="">
  87.                         </a></div> android
  88.                 </div>
  89.                 <div class="fl">
  90.                     <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
  91.                         </a></div> ios
  92.                 </div>
  93.  
  94.             </div>
  95.         </div>
  96.         <!-- 左侧定位！！！！end -->
  97.         <!-- 左侧定位！！！end -->
  98.  
  99.         <!-- 右边版心 s -->
  100.         <div class="contain-right">
  101.             <!-- 每日30首 -->
  102.             <div class="radio-container">
  103.                 <div><img src="./img/partySub1.png" alt="">每日30首</div>
  104.                 <div><img src="./img/partySub2.png" alt="">猜你喜欢</div>
  105.                 <div><img src="./img/partySub3.png" alt="">听见不同</div>
  106.                 <div><img src="./img/partySub4.png" alt="">私人电台</div>
  107.             </div>
  108.             <!-- 推荐歌单 -->
  109.             <div class="block-title clearfix">
  110.                 <div class="rec-song fl">推荐歌单</div>
  111.                 <div class="clearfix fr">
  112.                     全部
  113.                     <span class="icon fl"> > </span>
  114.                 </div>
  115.             </div>
  116.             <div class="recommend clearfix">
  117.                 <div class="cover fl"><img src="./img/Rec1.jpeg" alt=""></div>
  118.                 <div class="type-song"><img src="./img/Rec2.jpg" alt=""><span>26.6万</span>
  119.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  120.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  121.                 </div>
  122.                 <div class="type-song"><img src="./img/Rec3.gif" alt=""><span>26.6万</span>
  123.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  124.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  125.                 </div>
  126.                 <div class="type-song"><img src="./img/Rec4.jpg" alt=""><span>26.6万</span>
  127.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  128.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  129.                 </div>
  130.                 <div class="type-song"><img src="./img/Rec5.jpg" alt=""><span>26.6万</span>
  131.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  132.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  133.                 </div>
  134.                 <div class="type-song"><img src="./img/Rec6.jpg" alt=""><span>26.6万</span>
  135.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  136.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  137.                 </div>
  138.                 <div class="type-song"><img src="./img/Rec4.jpg" alt=""><span>26.6万</span>
  139.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  140.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  141.                 </div>
  142.                 <div class="type-song"><img src="./img/Rec2.jpg" alt=""><span>26.6万</span>
  143.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  144.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  145.                 </div>
  146.                 <div class="type-song"><img src="./img/Rec5.jpg" alt=""><span>26.6万</span>
  147.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  148.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
  149.                 </div>
  150.             </div>
  151.             <!-- 推荐歌单 end -->
  152.  
  153.             <!-- AI日推 -->
  154.             <div class="block-title clearfix">
  155.                 <div class="rec-song fl">AI日推</div>
  156.                 <div class="clearfix fr">
  157.                     全部
  158.                     <span class="icon fl"> > </span>
  159.                 </div>
  160.             </div>
  161.             <div class="clearfix">
  162.                 <div class="daliy_rec fl"><img src="./img/AI1.jpg" alt="">
  163.                     <p>梦幻氛围|Dream Vibe.</p>
  164.                 </div>
  165.                 <div class="daliy_rec fl"><img src="./img/AI2.jpg" alt="">
  166.                     <p>放松系|武侯咖啡馆 伸个懒腰</p>
  167.                 </div>
  168.                 <div class="daliy_rec fl"><img src="./img/AI3.jpg" alt="">
  169.                     <p>治愈系|温柔乐章 拥你在怀</p>
  170.                 </div>
  171.                 <div class="daliy_rec fl"><img src="./img/AI4.jpg" alt="">
  172.                     <p>放松系|武侯咖啡馆 伸个懒腰</p>
  173.                 </div>
  174.                 <div class="daliy_rec fl"><img src="./img/AI5.jpg" alt="">
  175.                     <p>梦幻氛围|Dream Vibe.</p>
  176.                 </div>
  177.             </div>
  178.             <!-- AI日推 end -->
  179.  
  180.             <!-- 中间大播放器 -->
  181.             <div class="radio-c">
  182.                 <div class="block-title clearfix">
  183.                     <p>新歌</p>
  184.                     <span class="sp1">推荐</span>
  185.                     <span>华语</span>
  186.                     <span>欧美</span>
  187.                     <span>日本</span>
  188.                     <span>韩国</span>
  189.                 </div>
  190.                 <div class="Mayday"></div>
  191.                 <div class="play-list">
  192.                     <div class="Plist-tit clearfix">
  193.  
  194.                         <span><img src="./img/bofangqi-bofang.png" alt=""></span>
  195.                         播放全部
  196.                     </div>
  197.                     <!-- 歌列表  -->
  198.                     <div class="dli clearfix">
  199.                         <div class="clearfix"><span>01</span>
  200.                             <div>晕船记</div>
  201.                             <div>陈婧霏</div>
  202.                             <div class="long-time">04:06</div>
  203.                         </div>
  204.                         <div class="clearfix"><span>02</span>
  205.                             <div>因为你 所以我</div>
  206.                             <div>五月天</div>
  207.                             <div class="long-time">04:06</div>
  208.                         </div>
  209.                         <div class="clearfix"><span>03</span>
  210.                             <div>夜游神</div>
  211.                             <div>九连真人</div>
  212.                             <div class="long-time">04:06</div>
  213.                         </div>
  214.                         <div class="clearfix"><span>04</span>
  215.                             <div>xiu</div>
  216.                             <div>Yu Su</div>
  217.                             <div class="long-time">04:06</div>
  218.                         </div>
  219.                         <div class="clearfix"><span>05</span>
  220.                             <div>它没有一个具体的理想</div>
  221.                             <div>何大河</div>
  222.                             <div class="long-time">04:06</div>
  223.                         </div>
  224.                     </div>
  225.  
  226.                 </div>
  227.             </div>
  228.             <!-- 中间大播放器 end-->
  229.  
  230.             <!-- 新碟速递 -->
  231.             <div class="block-title clearfix">
  232.                 <div class="rec-song fl">新碟速递</div>
  233.                 <div class="clearfix fr">
  234.                     全部
  235.                     <span class="icon fl"> > </span>
  236.                 </div>
  237.             </div>
  238.             <div class="recommend clearfix apa-list">
  239.                 <div class="type-song"><img src="./img/XD1.jpg" alt=""><span>26.6万</span>
  240.                     <p><a href="">陈婧霏</a></p>
  241.                     <h3><a href="">陈婧霏</a></h3><a href="" class="star"><span></span></a>
  242.                 </div>
  243.                 <div class="type-song"><img src="./img/XD2.jpg" alt=""><span>26.6万</span>
  244.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  245.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  246.                 </div>
  247.                 <div class="type-song"><img src="./img/XD3.jpg" alt=""><span>26.6万</span>
  248.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  249.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  250.                 </div>
  251.                 <div class="type-song"><img src="./img/XD4.jpeg" alt=""><span>26.6万</span>
  252.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  253.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  254.                 </div>
  255.                 <div class="type-song"><img src="./img/XD5.jpeg" alt=""><span>26.6万</span>
  256.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  257.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  258.                 </div>
  259.                 <div class="type-song"><img src="./img/XD6.jpg" alt=""><span>26.6万</span>
  260.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  261.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  262.                 </div>
  263.                 <div class="type-song"><img src="./img/XD7.jpg" alt=""><span>26.6万</span>
  264.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  265.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  266.                 </div>
  267.                 <div class="type-song"><img src="./img/XD8.jpg" alt=""><span>26.6万</span>
  268.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  269.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  270.                 </div>
  271.                 <div class="type-song"><img src="./img/XD9.jpg" alt=""><span>26.6万</span>
  272.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  273.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  274.                 </div>
  275.                 <div class="type-song"><img src="./img/XD10.jpg" alt=""><span>26.6万</span>
  276.                     <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
  277.                     <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
  278.                 </div>
  279.             </div>
  280.             <!-- 新碟速递 -->
  281.  
  282.         </div>
  283.         <!-- 右边版心 end -->
  284.  
  285.  
  286.         <!-- 底部 -->
  287.  
  288.  
  289.         <!-- 底部 -->
  290.     </div>
  291.     <!-- 正版心 end -->
  292.     <div class="footer clearfix">
  293.         <div class="Big-info clearfix fl">
  294.             <div class="info">
  295.                 <div class="info-left fl">
  296.                     <span>关于虾米</span>
  297.                     <span>入驻虾米</span>
  298.                     <span>资料补全</span>
  299.                     <span>桌面端</span>
  300.                     <span>合作伙伴</span>
  301.                 </div>
  302.                 <div class="info-right fl ">
  303.                     <div class="clearfix"><a href="">关于我们</a><a href="">虾米招聘</a><a href="">联系我们</a><a
  304.                             href="">隐私权政策</a><a href="">联系客服</a><a href="">意见反馈</a><a href="">回旧版</a></div>
  305.                     <div class="clearfix"><a href="">音乐人</a><a href="">音乐专栏</a></div>
  306.                     <div class="clearfix"><a href="">添加资料</a><a href="">大家想要的专辑</a><a href="">音频上传</a><a
  307.                             href="">MV上传</a></div>
  308.                     <div class="clearfix"><a href="">pc电脑</a><a href="">苹果电脑</a></div>
  309.                     <div class="clearfix small-pic">
  310.                         <div><img src="./img/AI2.jpg" alt=""></div>
  311.                         <div><img src="./img/XD2.jpg" alt=""></div>
  312.                         <div><img src="./img/AI1.jpg" alt=""></div>
  313.                         <div><img src="./img/AI4.jpg" alt=""></div>
  314.                         <div><img src="./img/AI2.jpg" alt=""></div>
  315.                         <div><img src="./img/party1.jpg" alt=""></div>
  316.                         <div><img src="./img/AI5.jpg" alt=""></div>
  317.                         <div><img src="./img/party3.jpg" alt=""></div>
  318.                         <div><img src="./img/party4.jpg" alt=""></div>
  319.                         <div><img src="./img/party5.jpg" alt=""></div>
  320.                         <div><img src="./img/party4.jpg" alt=""></div>
  321.                         <div><img src="./img/AI1.jpg" alt=""></div>
  322.                         <div><img src="./img/AI2.jpg" alt=""></div>
  323.                         <div><img src="./img/AI1.jpg" alt=""></div>
  324.                         <div><img src="./img/AI3.jpg" alt=""></div>
  325.                         <div><img src="./img/AI1.jpg" alt=""></div>
  326.                         <div><img src="./img/AI2.jpg" alt=""></div>
  327.                         <div><img src="./img/AI1.jpg" alt=""></div>
  328.                         <div><img src="./img/AI2.jpg" alt=""></div>
  329.                         <div><img src="./img/AI1.jpg" alt=""></div>
  330.                     </div>
  331.                 </div>
  332.             </div>
  333.  
  334.         </div>
  335.         <div class="focus-us fl">
  336.             <div>关注我们</div>
  337.             <div>
  338.                 <span><img src="./img/weibo.png" alt=""></span>
  339.                 <span><img src="./img/weixin.png" alt=""></span>
  340.                 <span><img src="./img/zhihu.png" alt=""></span>
  341.             </div>
  342.         </div>
  343.         <div class="Erweima fr">
  344.             <p>虾米音乐APP</p>
  345.             <div><img src="./img/Eweima.png" alt=""></div>
  346.         </div>
  347.         <div class="line"></div>
  348.         <!-- footer 最下面 -->
  349.         <ul>
  350.             <li><a href="">淘宝网</a></li>
  351.             <li>|</li>
  352.             <li><a href="">天猫</a></li>
  353.             <li>|</li>
  354.             <li><a href="">支付宝</a></li>
  355.             <li>|</li>
  356.             <li><a href="">飞猪</a></li>
  357.             <li>|</li>
  358.             <li><a href="">聚划算</a></li>
  359.             <li>|</li>
  360.             <li><a href="">阿里云</a></li>
  361.             <li>|</li>
  362.             <li><a href="">阿里妈妈</a></li>
  363.             <li>|</li>
  364.             <li><a href="">1688</a></li>
  365.             <li>|</li>
  366.             <li><a href="">AliOS</a></li>
  367.             <li>|</li>
  368.             <li><a href="">阿里通信</a></li>
  369.             <li>|</li>
  370.             <li><a href="">万网</a></li>
  371.             <li>|</li>
  372.             <li><a href="">阿里游戏</a></li>
  373.             <li>|</li>
  374.             <li><a href="">大麦网</a></li>
  375.             <li>|</li>
  376.             <li><a href="">一淘</a></li>
  377.             <li>|</li>
  378.             <li><a href="">狂野飙车9</a></li>
  379.             <li>|</li>
  380.             <li><a href="">UCCricket</a></li>
  381.             <li>|</li>
  382.             <li><a href="">阿里安全</a></li>
  383.  
  384.  
  385.         </ul>
  386.         <div class="subfont">
  387.             <p> © 2007 - 2021 杭州阿里巴巴音乐科技有限公司 版权所有 阿里巴巴旗下公司</p>
  388.             <ul class="subul clearfix">
  389.                 <li><a href="">营业执照</a></li>
  390.                 <li>|</li>
  391.                 <li><a href="">网络文化经营许可证 :浙网文(2019)4999-453号</a></li>
  392.                 <li>|</li>
  393.                 <li><a href="">增值电信业务经营许可证 :浙B2-20110188 </a></li>
  394.                 <li>|</li>
  395.                 <li><a href="">浙ICP备18050417号-2</a></li>
  396.                 <li>|</li>
  397.                 <li><a href="">浙公网安备 33011002012729号</a></li>
  398.             </ul>
  399.         </div>
  400.     </div>
  401.  
  402.  
  403. </body>
  404.  
  405.  
  406. </html>

咪咕音乐部分网页截图-HTML学生期末作业 

咪咕音乐部分网页源码-HTML学生期末作业 

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  2. <head>
  3. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  4. 	<title>咪咕音乐网_和你在一起</title>
  5. 	<link rel="stylesheet" type="text/css" href="style/style.css"/>
  6. 	<script src="js/jquery-1.11.1.min.js"></script>
  7. 	<script src="js/jquery.SuperSlide.2.1.1.js"></script>
  8. 	<script src="js/index.js"></script>
  9. </head>
  10. <body>
  11. 	<!--头部开始-->
  12. 	<div class="header">
  13. 		
  14. 		<div class="header_1_wrap">
  15. 			
  16. 			<div class="header_1">
  17. 				
  18. 				<div class="header_1_l">
  19. 					<a href="#">中国移动旗下音乐门户</a>
  20. 					<span>|</span>
  21. 					<a href="#">集团产品</a>
  22. 					<span>|</span>
  23. 					<a href="#">设为首页</a>
  24. 					<span>|</span>
  25. 					<a href="#">加入收藏</a>	
  26. 				</div>
  27. 				
  28. 				<div class="header_1_r">
  29. 					<em class="user-ico"></em>
  30. 					<a href="">登录</a>
  31. 					<span>|</span>
  32. 					<a href="">注册</a>
  33. 					<em class="member-ico"></em>
  34. 					<a href="">会员</a>
  35. 				</div>
  36. 			</div>
  37. 			
  38. 		</div>
  39. 		
  40. 		<div class="header_2_wrap">
  41. 			<div class="header_2">
  42. 				<div class="logo"></div>	
  43. 				<div class="search">
  44. 					<form action="">
  45. 						<input type="text" />
  46. 						<input type="submit" class="submit" name="submit" value=""/>
  47. 					</form>
  48. 				</div>
  49. 				<div class="header_2_r">
  50. 					<a href="" class="tehui"></a>
  51. 					<a href="" class="yku"></a>
  52. 				</div>
  53. 			</div>
  54. 		</div>
  55. 		
  56.  
  57. 		<div class="header_3_wrap">
  58. 			<div class="header_3">
  59. 				
  60. 				<div class="nav">
  61. 					<a href="" class="nav_red">首页</a>
  62. 					<a href="" class="cl_ul">彩铃</a>
  63. 					<a href="" class="lk_ul">乐库</a>
  64. 					<a href="">排行榜</a>
  65. 					<a href="">电台</a>
  66. 					<a href="" class="sp_ul">视频</a>
  67. 					<a href="">专题</a>
  68. 					<a href="">社区</a>
  69. 					<a href="">大剧院</a>
  70. 				</div>
  71. 				
  72. 				<div class="header_3_r">
  73. 					<span class="yc"></span>
  74. 					<a href="">原创</a>
  75. 					<span class="khd"></span>
  76. 					<a href="">客户端</a>
  77. 					<span class="kfhz"></span>
  78. 					<a href="">开放合作</a>
  79. 					
  80. 					<div class="header_3_r_xcp">
  81. 						<span class="xcp"></span>
  82. 						<a href="">新产品</a>
  83. 						<ul>
  84. 							<li><a href="">咪咕环境音乐</a></li>
  85. 							<li><a href="">咪咕家庭音乐</a></li>
  86. 							<li><a href="">企业彩铃</a></li>
  87. 						</ul>
  88. 					</div>
  89. 					
  90. 				</div>			
  91. 			</div>
  92. 		</div>
  93. 		
  94. 		
  95. 		<div class="header_4">
  96. 			<ul class="cl_ul">
  97. 				<li><a href="">彩铃推荐</a></li>
  98. 				<li><a href="">个性彩铃</a></li>
  99. 				<li><a href="">彩铃DIY</a></li>
  100. 			</ul>
  101. 			<ul class="lk_ul">
  102. 				<li><a href="">分类</a></li>
  103. 				<li><a href="">专辑</a></li>
  104. 				<li><a href="">歌手</a></li>
  105. 				<li><a href="">精选集</a></li>
  106. 			</ul>	
  107. 			<ul class="sp_ul">
  108. 				<li><a href="">MV</a></li>
  109. 				<li><a href="">咪咕现场</a></li>
  110. 			</ul>				
  111. 		</div>
  112. 		
  113. 	</div>		
  114. 	<!--头部结束-->
  115. 	
  116. 	
  117. 	<!--横幅开始-->
  118. 	<div class="banner">
  119. 		<div class="banner_slide">
  120. 			<div class="hd">
  121. 				<ul>
  122. 					<li></li>
  123. 					<li></li>
  124. 					<li></li>
  125. 					<li></li>
  126. 					<li></li>
  127. 					<li></li>
  128. 					<li></li>
  129. 					<li></li>
  130. 				</ul>
  131. 			</div>
  132. 			<div class="bd">
  133. 				<ul>
  134. 					<li><a href="#" target="_blank"><img src="images/slide1.jpg" /></a>
  135. 						<p>【首发】邓紫棋新专辑灰色摇滚单曲《一路逆风》</p>
  136. 					</li>
  137. 					<li><a href="#" target="_blank"><img src="images/slide2.jpg" /></a>
  138. 						<p>【首发】鹿晗反规则鹿式慢情歌《诺言》清新来袭</p>
  139. 					</li>
  140. 					<li><a href="#" target="_blank"><img src="images/slide3.jpg" /></a>
  141. 						<p>精选集：像向日葵一样活着</p>
  142. 					</li>
  143. 					<li><a href="#" target="_blank"><img src="images/slide4.jpg" /></a>
  144. 						<p>乐人志第28期  黄韵玲：吟唱初心的真貌 </p>
  145. 					</li>
  146. 					<li><a href="#" target="_blank"><img src="images/slide5.jpg" /></a>
  147. 						<p>精选集：民谣还你难得的安宁</p>
  148. 					</li>
  149. 					<li><a href="#" target="_blank"><img src="images/slide6.jpg" /></a>
  150. 						<p>音为青春·中国大学音乐超级联赛</p>
  151. 					</li>
  152. 					<li><a href="#" target="_blank"><img src="images/slide7.jpg" /></a>
  153. 						<p>精选集：那些我们迷恋的女声</p>
  154. 					</li>
  155. 					<li><a href="#" target="_blank"><img src="images/slide8.jpg" /></a>
  156. 						<p>专题：韩流第一天团PK大战</p>
  157. 					</li>				
  158. 				</ul>
  159. 			</div>
  160. 			<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
  161. 			<a class="prev" href="javascript:void(0)"></a>
  162. 			<a class="next" href="javascript:void(0)"></a>			
  163. 		</div>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/156328
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号