HTML期末学生大作业-最新QQ音乐、网易云音乐、酷狗音乐、虾米音乐、咪咕音乐网站html+css+javascript_html,css,mysql音乐管理系统-程序员宅基地
技术标签： HTML期末作业虾米音乐 HTML期末作业咪咕音乐 大学HTML+CSS+JavaScript期末作业 HTML期末作业网易云音乐 期末作业QQ音乐HTML HTML期末作业酷狗音乐
QQ音乐-部分网页截图-学生HTML+CSS+JS期末作业
QQ音乐-部分源码截图-学生HTML+CSS+JS期末作业
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
<!-- 引入标题图标文件 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入主页 CSS 文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 引入公共样式 CSS 文件 -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="./css/ycCSS.css">
</head>
<body>
<!-- 头部区域开始 -->
<header>
<div class="container w">
<div class="t">
<h4 class="logo"><a href="./index.html"><img src="images/logo.png" alt=""></a></h4>
<div class="top_nav">
<ul>
<li><a href="./index.html" class="hover">音乐馆</a></li>
<li><a href="./lb/lb/mymusic.html">我的音乐</a></li>
<li class="client_hover">
<a href="./yc/download/index.html">
客户端<i></i>
</a>
<div class="client">
<div class="client_cont">
<p><em></em> HQ高品质 全员开启</p>
<p><em></em> 独家音效 全面升级</p>
<p><em></em> 轻盈视觉 动态皮肤</p>
<a href="./ch/download/download.html">下载体验</a>
</div>
</div>
</li>
<li><a href="./artists/index.html" target="_bank">开放平台</a></li>
<li><a href="./lb/vipportal/yearvip.html">VIP</a></li>
</ul>
</div>
<div class="top_search">
<input type="text" name="" id="" placeholder="搜索音乐、MV、歌单、用户">
<button><i class="search_button sprite"></i></button>
</div>
<div class="login">
<div class="login_btn">
<a href="javascript:;">登录</a>
</div>
<div class="vip_select">
<a href="./lb/vipportal/yearvip.html">开通VIP<i></i></a>
<ul class="vip_hover">
<li><a href="./lb/vipportal/yearvip.html" style="border-bottom: 0;">开通绿钻豪华版</a></li>
<li><a href="./yc/download/fufeibao.html">开通付费包</a></li>
</ul>
</div>
<div class="charge_select">
<a href="javascript:;">充值<i></i></a>
<ul class="vip_hover cz">
<li><a href="javascript:;" style="border-bottom: 0;">购买乐币</a></li>
<li><a href="javascript:;">充值饭票</a></li>
</ul>
</div>
</div>
</div>
<div class="b">
<ul>
<li><a href="./index.html" style="color: #31c27c">首页</a></li>
<li><a href="./hyh/singer_list/singer.html">歌手</a></li>
<li><a href="./lb/lb/album.html">新碟</a></li>
<li><a href="./yjx/toplist/index.html">排行榜</a></li>
<li><a href="./hyh/category/songmenu.html">分类歌单</a></li>
<li><a href="./hyh/radio/fm.html">电台</a></li>
<li><a href="./yc/mvlist/mvlist.html">MV</a></li>
<li><a href="./ch/album_mall/album_mall.html">数字专辑</a></li>
<li><a href="./yjx/piaowu/index.html">票务</a></li>
</ul>
</div>
</div>
</header>
<!-- 头部区域结束 -->
<!-- 主体部分开始 -->
<main>
<!-- 歌单推荐模块 -->
<div class="hot-songs" style="margin-top: 10px;">
<div class="title">
<h3>歌 单 推 荐</h3>
</div>
<div class="hot-songs-content">
<div class="songs_content w">
<div class="list_item">
<ul class="gdtj">
<li id="gdtj">
<a class="gdtj_items" href="javascript:;" style="color: #31c27c">为你推荐</a>
<div class="list_item_img gd_hide">
<ul>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img
src="images/poster/300.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌！轻松解压100％</a>
</h3>
<span>播放量：2.8亿</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
src="images/poster/300_2.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a>
</h3>
<span>播放量：510.4万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
src="images/poster/300_3.png" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a>
</h3>
<span>播放量：1645.7万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
src="images/poster/300_1.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜
我还是会想起你</a></h3>
<span>播放量：2663.8万</span>
</li>
<li style="padding:0;">
<a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
src="images/poster/300.png" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
</h3>
<span>播放量：1756.0万</span>
</li>
</ul>
</div>
</li>
<li id="gdtj">
<a href="javascript:;" class="gdtj_items">情歌</a>
<div class="list_item_img gd_hide">
<ul>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
src="https://p.qpic.cn/music_cover/yyDR0yDpzJMiauiaIribblrE0oDiae1VgkuqLzFpicvqmnw8Rzm16OFLSdQ/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">泰式浪漫：你想要的甜蜜幻想</a>
</h3>
<span>播放量：9.5万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
src="https://p.qpic.cn/music_cover/6aGRubo8UtU3O6E5dy98JoB9AQyLWOxicXAfJNhQP5kWDicQFk7bLjNA/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7947618016">【真情流露】2010的声音倾吐芬芳</a>
</h3>
<span>播放量：23.9万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
src="https://p.qpic.cn/music_cover/xjBX9k8QoGbAUicX1ialfQPNzIP2mImXuqoUnCghicEfEodV7Wt12qTOw/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">温柔华语 |
把故事藏在歌中</a>
</h3>
<span>播放量：130.1万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
src="https://p.qpic.cn/music_cover/PiajxSqBRaELU4F9LZbYqibQVzsNGoa67HYUS9emLUgWU/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7747451867">音乐里那些不言而喻的“我爱你”</a>
</h3>
<span>播放量：55.5万</span>
</li>
<li style="padding:0;">
<a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
src="https://p.qpic.cn/music_cover/jXFicBvicUcfIWSoCNT1OrbJQYq74ianaMpNvtVicoUsSqnPIajVvjrGdQ/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7537828867">金牌作曲人于逸尧：生活中的止疼药</a>
</h3>
<span>播放量：8.6万</span>
</li>
</ul>
</div>
</li>
<li id="gdtj">
<a href="javascript:;" class="gdtj_items">网络歌曲</a>
<div class="list_item_img gd_hide">
<ul>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
src="https://p.qpic.cn/music_cover/yyDR0yDpzJMiauiaIribblrE0oDiae1VgkuqLzFpicvqmnw8Rzm16OFLSdQ/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">泰式浪漫：你想要的甜蜜幻想</a>
</h3>
<span>播放量：9.5万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
src="https://p.qpic.cn/music_cover/6aGRubo8UtU3O6E5dy98JoB9AQyLWOxicXAfJNhQP5kWDicQFk7bLjNA/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7947618016">【真情流露】2010的声音倾吐芬芳</a>
</h3>
<span>播放量：23.9万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
src="https://p.qpic.cn/music_cover/xjBX9k8QoGbAUicX1ialfQPNzIP2mImXuqoUnCghicEfEodV7Wt12qTOw/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">温柔华语 |
把故事藏在歌中</a>
</h3>
<span>播放量：130.1万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
src="images/poster/300_1.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜
我还是会想起你</a></h3>
<span>播放量：2663.8万</span>
</li>
<li style="padding:0;">
<a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
src="images/poster/300.png" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
</h3>
<span>播放量：1756.0万</span>
</li>
</ul>
</div>
</li>
<li id="gdtj">
<a href="javascript:;" class="gdtj_items">官方歌单</a>
<div class="list_item_img gd_hide">
<ul>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
src="https://qpic.y.qq.com/music_cover/MKjEtF7diatibd6B0iaeF5Kgn7iblB0nh85QuGbeZCw9oreoxaMVru9fHw/300?n=1&n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">华语流行|想度假</a>
</h3>
<span>播放量：23.5万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
src="https://qpic.y.qq.com/music_cover/ib2uYYJVhia5TeO7z67ehqoglWn5x5ITgEF7mAOQaOqiceHVTxp0OVPVA/300?n=1&n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">华语| 厨房时间</a>
</h3>
<span>播放量：6.9万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
src="https://qpic.y.qq.com/music_cover/xiabfMZAmQ0PYUzgCvOicArKKEVIiaBaNedAERxdyQ0UCRAXKavSFpIuQ/300?n=1&n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">Urban厂牌合辑| HI-LITE
RECORDS</a>
</h3>
<span>播放量：9.2万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
src=" https://qpic.y.qq.com/music_cover/4pmnRu5sL5QbtO8OS8NKJTN5qBpjx5XMBu6rLGuN9Nm2MwIFxTCmDg/300?n=1&n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">华语 | 一起野餐吧</a>
</h3>
<span>播放量：12.9万</span>
</li>
<li style="padding:0;">
<a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
src="https://qpic.y.qq.com/music_cover/4pmnRu5sL5QbtO8OS8NKJTN5qBpjx5XM7KbPBpd3eJiaOqq2Gz733qA/300?n=1&n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">轻音乐 | 心在旅行</a>
</h3>
<span>播放量：24.3万</span>
</li>
</ul>
</div>
</li>
<li id="gdtj">
<a href="javascript:;" class="gdtj_items">轻音乐</a>
<div class="list_item_img gd_hide">
<ul>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
src="https://p.qpic.cn/music_cover/QibaicFJrvJkoyYmFbM1Ajc2QVUibAUvaYm0WDGnDcUCcQX6owTfuaOtg/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">日落时分的电台情歌</a>
</h3>
<span>播放量：104.7万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
src="https://p.qpic.cn/music_cover/JfHZkmO0M8cnRibGia1xn1yopQkj94rDljNxkRkeXia9kBfmmEQvMZZWA/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">淡淡花香 清新华语女声</a>
</h3>
<span>播放量：66.9万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
src="https://p.qpic.cn/music_cover/p9lQOkP6ibSVfFMarxW0okFpU2rSRasWwcRx7Q9bwqB1dTHkohOhfDA/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">浪漫情歌 ·
我们一起唱更有爱</a>
</h3>
<span>播放量：112.0万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
src="https://p.qpic.cn/music_cover/8jHwtlKXNKQsQUiaX0cViax8LUUc0u90xZIcswSgzMabNGGGiaLicLgC6w/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">情歌对唱 |
有一种美好只有我们知道</a></h3>
<span>播放量：187.7万</span>
</li>
<li style="padding:0;">
<a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
src="https://p.qpic.cn/music_cover/RPHZt7ryKnOGVbZjREibhNUG35DF6E6gxYxYsegL6sxsEKH7xdPkibBQ/600?n=1"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">历久情深，枕着音乐入梦</a>
</h3>
<span>播放量：70.0万</span>
</li>
</ul>
</div>
</li>
<li id="gdtj">
<a href="javascript:;" class="gdtj_items">九月推荐</a>
<div class="list_item_img gd_hide">
<ul>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img
src="images/poster/300.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌！轻松解压100％</a>
</h3>
<span>播放量：2.8亿</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
src="images/poster/300_2.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a>
</h3>
<span>播放量：510.4万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
src="images/poster/300_3.png" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a>
</h3>
<span>播放量：1645.7万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
src="images/poster/300_1.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜
我还是会想起你</a></h3>
<span>播放量：2663.8万</span>
</li>
<li style="padding:0;">
<a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
src="images/poster/300.png" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a
href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
</h3>
<span>播放量：1756.0万</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="list_item_img wntj_hide">
<ul>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img src="images/poster/300.jfif"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌！轻松解压100％</a></h3>
<span>播放量：2.8亿</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
src="images/poster/300_2.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a></h3>
<span>播放量：510.4万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img src="images/poster/300_3.png"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a></h3>
<span>播放量：1645.7万</span>
</li>
<li>
<a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
src="images/poster/300_1.jfif" alt=""><span><i
class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段：深夜 我还是会想起你</a></h3>
<span>播放量：2663.8万</span>
</li>
<li style="padding:0;">
<a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img src="images/poster/300.png"
alt=""><span><i class="iconfont"></i></span></a>
<h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a></h3>
<span>播放量：1756.0万</span>
</li>
</ul>
</div>
<div class="circle">
<ul>
<li><a href="javascript:;" style="background: #afafaf;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
</ul>
</div>
</div>
</div>
<a href="javascript:;" class="left_btn">
<i class="iconfont"></i>
</a>
<a href="javascript:;" class="right_btn">
<i class="iconfont"></i>
</a>
</div>网易云音乐-部分网页截图-学生HTML+CSS+JS期末作业
网易云音乐-部分源码截图-学生HTML+CSS+JS期末作业
<!-- 头部开始 -->
<header class="h-top">
<div class="t-top clearFix">
<div class="t-wrap">
<!-- logo开始 -->
<h1 class="logo"><a href="index.html" class="fl">网易云音乐</a></h1> <!-- href:超链接 -->
<!-- logo结束 -->
<!-- 导航栏标签开始 -->
<nav class="top-nav fl">
<a href="#" class="active"><span>发现音乐</span><i class="cor"></i></a>
<a href="#"><span>我的音乐</span><i class="cor"></i></a>
<a href="#"><span>朋友</span><i class="cor"></i></a>
<a href="#"><span>商城</span></a><i class="cor"></i></span>
<a href="#"><span>音乐人</span></a><i class="cor"></i></span>
<a href="#" class="last"><span>下载客户端</span><i class="hot"></i></a>
</nav>
<!-- 导航栏标签结束 -->
<!-- 头部登录开始 -->
<div class="landing fr">
<a href="#" class="link fr">登陆</a>
<div class="down-tab">
<ul class="d-list">
<li><a href="#"><i class="d-icon d-icon1"></i>手机号登录</a></li>
<li><a href="#"><i class="d-icon d-icon2"></i>微信登录</a></li>
<li><a href="#"><i class="d-icon d-icon3"></i>QQ号登录</a></li>
<li><a href="#"><i class="d-icon d-icon4"></i>新浪微博登录</a></li>
<li><a href="#"><i class="d-icon d-icon5"></i>网易邮箱账号登录</a></li>
</ul>
</div>
</div>
<!-- 头部登录结束 -->
<!-- 搜素框开始 -->
<form class="search fr">
<input type="text" class="" value="单曲/歌手/专辑/歌单/MV/用户"/>
</form>
<!-- 搜素框结束 -->
</div>
</div>
<!-- 二级导航栏 -->
<div class="n-nav clearFix">
<div class="n-wrap">
<nav class="nav fl">
<a href="index.html" class="n-active"><span>推荐</span></a>
<a href="ranking.html"><span>排行榜</span></a>
<a href="sheet.html"><span>歌单</span></a>
<a href="radio.html"><span>主播电台</span></a>
<a href="#"><span>歌手</span></a>
<a href="#"><span>新碟上架</span></a>
</nav>
</div>
</div>
<!-- 二级导航栏 -->
</header>
<!-- 头部结束 -->
<div class="banner">
<!-- 轮播图开始 -->
<ul class="i-banner clearFix">
<!-- 轮播图基本组件 -->
<li class="i-bg">
<div class="b-wrap">
<a href="#">
<img src="img/banner/1.jpg"/>
</a>
<a href="#" class="btnL"></a>
<a href="#" class="btnR"></a>
<div class="dot">
<a href="#" class="i-active"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="download">
<a href="#" class="btn">下载客户端</a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</li>
<!-- 轮播图基本组件 -->
<li class="i-bg2">
<div class="b-wrap">
<a href="#">
<img src="img/banner/2.jpg"/>
</a>
<a href="#" class="btnL"></a>
<a href="#" class="btnR"></a>
<div class="dot">
<a href="#"></a>
<a href="#" class="i-active"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="download">
<a href="#" class="btn">下载客户端</a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</li>
<li class="i-bg3">
<div class="b-wrap">
<a href="#">
<img src="img/banner/3.jpg"/>
</a>
<a href="#" class="btnL"></a>
<a href="#" class="btnR"></a>
<div class="dot">
<a href="#"></a>
<a href="#"></a>
<a href="#" class="i-active"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="download">
<a href="#" class="btn">下载客户端</a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</li>
<li class="i-bg4">
<div class="b-wrap">
<a href="#">
<img src="img/banner/4.jpg"/>
</a>
<a href="#" class="btnL"></a>
<a href="#" class="btnR"></a>
<div class="dot">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#" class="i-active"></a>
<a href="#"></a>
</div>
<div class="download">
<a href="#" class="btn">下载客户端</a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</li>
<li class="i-bg5">
<div class="b-wrap">
<a href="#">
<img src="img/banner/5.jpg"/>
</a>
<a href="#" class="btnL"></a>
<a href="#" class="btnR"></a>
<div class="dot">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#" class="i-active"></a>
</div>
<div class="download">
<a href="#" class="btn">下载客户端</a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</li>
</ul>
<!-- 轮播图结束 -->
</div>
<main class="main">
<div class="m-wrap">
<div class="m-left">
<section>
<!-- 热门推荐标题开始 -->
<header class="h-title">
<h2><a href="#">热门推荐</a></h2>
<nav class="h-list">
<a href="#">华语</a>
<span class="line">|</span>
<a href="#">流行</a>
<span class="line">|</span>
<a href="#">摇滚</a>
<span class="line">|</span>
<a href="#">民谣</a>
<span class="line">|</span>
<a href="#">电子</a>
</nav>
<span class="more"><a href="#">更多</a><i> </i></span>
</header>
<!-- 热门推荐标题结束 -->
<ul class="h-music clearFix">
<!-- 专辑封面组件 -->
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/01.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">74万</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><a href="#">听过他们写的歌，却不曾闻其名</a></p>
</li>
<!-- 专辑封面组件 -->
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/02.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">22万</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><a href="#">◎小众无前奏 || 一秒陷入韩式温柔</a></p>
</li>
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/03.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">55万</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><a href="#">「攻声集」群攻并起逐天下</a></p>
</li>
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/04.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">12万</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><span class="djvideo"></span><a href="#"> 001 公子夏天</a></p>
</li>
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/05.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">102万</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><a href="#">［真实感］绝佳的英伦摇滚现场</a></p>
</li>
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/06.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">74737</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><span class="djvideo"></span><a href="#"> 一天中的静止时光</a></p>
</li>
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/07.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">61万</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><a href="#">『東方雅乐｜和风意境純音赏』</a></p>
</li>
<li>
<div class="h-img">
<a href="#">
<img src="img/hotrecom/08.jpg"/>
<span class="bg"></span>
<span class="icon"></span>
<span class="txt">12691</span>
</a>
<a href="#" class="play" title="播放"></a>
</div>
<p><span class="djvideo"></span><a href="#"> 汉宣帝：从犯人到皇帝</a></p>
</li>
</ul>
</section>
<!-- 这是一个无聊的广告开始 -->
<div id="m-banner">
<a href="#">
<img src="img/m-banner.jpg"/>
</a>
</div>
<!-- 这是一个无聊的广告结束 -->
<section>
<!-- 新碟上架开始 -->
<header class="h-title">
<h2><a href="#">新碟上架</a></h2>
<span class="more"><a href="#">更多</a><i> </i></span>
</header>
<!-- 新碟上架结束 -->
<div class="disk clearFix">
<a href="#" class="tit titL"> </a>
<div class="dd-list">
<ul class="clearFix">
<!-- 新碟上架组件开始 -->
<li class="d-disk">
<div class="dd-img">
<img src="img/disk/01.jpg"/>
<a href="#" class="p-disk"></a>
<a href="#" class="diskplay"></a>
</div>
<p><a href="#">AVĪCI (01)</a></p>
<p class="singer"><a href="#">Avicii</a></p>
</li>
<!-- 新碟上架组件结束 -->
<li class="d-disk">
<div class="dd-img">
<img src="img/disk/02.jpg"/>
<a href="#" class="p-disk"></a>
<a href="#" class="diskplay"></a>
</div>
<p><a href="#">海胆&谁来剪月光</a></p>
<p class="singer"><a href="#">陈奕迅</a></p>
</li>
<li class="d-disk">
<div class="dd-img">
<img src="img/disk/03.jpg"/>
<a href="#" class="p-disk"></a>
<a href="#" class="diskplay"></a>
</div>
<p><a href="#">박진영의 파티피플</a></p>
<p class="singer"><a href="#">V.A.</a></p>
</li>
<li class="d-disk">
<div class="dd-img">
<img src="img/disk/04.jpg"/>
<a href="#" class="p-disk"></a>
<a href="#" class="diskplay"></a>
</div>
<p><a href="#">OK?</a></p>
<p class="singer"><a href="#">Nissy(西島隆弘)</a></p>
</li>
<li class="d-disk">
<div class="dd-img">
<img src="img/disk/05.jpg"/>
<a href="#" class="p-disk"></a>
<a href="#" class="diskplay"></a>
</div>
<p><a href="#">Rainbow</a></p>
<p class="singer"><a href="#">Kesha</a></p>
</li>
</ul>
</div>
<a href="#" class="tit titR"> </a>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>酷狗音乐-就是歌多</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/swiper.min.js"></script>
</head>
<body>
<!-- 顶部搜索栏 -->
<div class="search">
<div class="container clearfix">
<a href="./index.html"><img src="./img/index/logo.png"></a>
<div class="in-search">
<span></span>
<input type="text" placeholder="安全着陆 个人简历">
<a href="#"><span class="iconfont"></span></a>
</div>
<ul class="search-right">
<li><a href="./call-center.html" target="_blank">客服中心</a></li>
<li><a href="./Join-us.html" target="_blank">招贤纳士</a></li>
<li><a href="#">会员中心</a></li>
<li class="xian"></li>
</ul>
<a href="#">
<div class="enter"><span>登录</span></div>
</a>
</div>
</div>
<!-- 导航栏 -->
<div class="navigation">
<div class="container clearfix">
<div class="nav-left clearfix">
<a href="#"><span class="page">首页</span></a>
<a href="./crunchies.html"><span>榜单</span></a>
<a href="#"><span>下载客户端</span></a>
<div class="more">
<a class="this-more">更多
<img src="./img/index/xsj.png" class="more-xsj">
<img src="./img/index/ssj.png" class="more-ssj">
</a>
<ul style="z-index: 999;">
<li><a href="#">电台</a></li>
<li><a href="#">MV</a></li>
<li><a href="#">歌单</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">专辑</a></li>
</ul>
</div>
</div>
<div class="nav-right clearfix">
<a href="#"><span class="iconfont"></span>音乐直播</a>
<a href="#"><span class="iconfont"></span>酷狗LIVE</a>
<a href="#"><span class="iconfont"></span>音乐人</a>
<a href="./audio-radio.html" target="_blank"><span class="iconfont"></span>成为主播</a>
<a href="#"><span class="iconfont"></span>商城</a>
</div>
</div>
</div>
<!-- 轮播图 -->
<div class="rotation" id="lunbotu">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/index/rotation1.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation2.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation3.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation4.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation5.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation6.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation7.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation8.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<div class="swiper-slide"><img src="./img/index/rotation9.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div class="container bom clearfix">
<div class="download">
<div class="download-word clearfix">
<a href="#">
<i class="iconfont"></i>
<span>下载PC版</span>
</a>
<span class="xian">|</span>
<a href="#">
<i class="iconfont"></i>
<span>下载iPhone版</span>
</a>
<span class="xian">|</span>
<a href="#">
<i class="iconfont"></i>
<span>下载Android版</span>
</a>
</div>
</div>
</div>
</div>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
<!-- 精选歌单 -->
<div class="song-one-medal">
<div class="container clearfix">
<div class="song-one-medal-left clearfix">
<div class="song-one">
<span><i>精选</i>歌单</span>
<a href="#">更多</a>
</div>
<div class="song-one-under">
<a href="#" class="first-one">
<img src="./upload/song-one1.jpg">
<p><span>14.1万</span><i class="iconfont"></i></p>
<div>
<del class="under-word">AWAL厂牌回归！独立与主流的流行碰撞</del>
<del class="under-word">欧美Ku乐</del>
<i class="iconfont transmit"></i>
</div>
</a>
<a href="#" class="other">
<img src="./upload/song-one2.jpg">
<p><span>38740.7万</span><i class="iconfont"></i></p>
<div>
<del class="under-word">每周推荐歌曲</del>
<del class="under-word">酷狗号歌单君</del>
<i class="iconfont transmit"></i>
</div>
</a>
<a href="#" class="other">
<img src="./upload/song-one3.jpg">
<p><span>138.4万</span><i class="iconfont"></i></p>
<div>
<del class="under-word">原来你一直在...</del>
<del class="under-word">简单爱</del>
<i class="iconfont transmit"></i>
</div>
</a>
<a href="#" class="other">
<img src="./upload/song-one4.jpg">
<p><span>36.4万</span><i class="iconfont"></i></p>
<div>
<del class="under-word">拯救坏情绪：...</del>
<del class="under-word">大饼干</del>
<i class="iconfont transmit"></i>
</div>
</a>
<a href="#" class="other">
<img src="./upload/song-one5.jpg">
<p><span>8.3万</span><i class="iconfont"></i></p>
<div>
<del class="under-word">欧美乐鉴 | 六...</del>
<del class="under-word">欧美Ku乐</del>
<i class="iconfont transmit"></i>
</div>
</a>
</div>
</div>
<div class="song-one-medal-right clearfix">
<div class="medal">
<span><i>热门</i>榜单</span>
<a href="./crunchies.html">更多</a>
</div>
<div class="medal-under">
<a href="#" class="more">
<img src="./img/index/soaring.jpg">
<i class="iconfont"></i>
<h3>酷狗飙升榜</h3>
<p>1 . 蔡依林 - 倒带</p>
<p>2 . 莫籽 - 世间美好与你环...</p>
<span>></span>
</a>
<a href="#" class="more">
<img src="./img/index/top500.jpg">
<i class="iconfont"></i>
<h3>酷狗TOP500</h3>
<p>1 . 阿冗 - 你的答案</p>
<p>2 . 阿悠悠 - 一生与你插肩...</p>
<span>></span>
</a>
<a href="#" class="more">
<img src="./img/index/red songs.jpg">
<i class="iconfont"></i>
<h3>网络红歌榜</h3>
<p>1 . 杭娇 - 听心</p>
<p>2 . 虎二 - 你一定要幸福</p>
<span>></span>
</a>
</div>
</div>
</div>
</div>
<!-- 广告 -->
<div class="advert1">
<div class="container clearfix">
<a href="#"><img src="./img/index/ad3.jpg"></a>
</div>
</div>
<!-- 新歌首发 -->
<div class="new-song">
<div class="container clearfix">
<div class="new-song-left clearfix">
<div class="new-song-one">
<span><i>新歌</i>首发</span>
<a href="#">华语</a>
<a href="#">欧美</a>
<a href="#">韩国</a>
<a href="#">日本</a>
<a href="#" class="all">
<i class="iconfont"></i>全部播放
</a>
</div>
<div class="new-song-one-under">
<div>
<a href="#">
<p>
小阿七 - 不谓侠
<i class="iconfont exclusive"></i>
<span>04:28</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
<a href="#">
<p>
周深 - 放鹤图【鹤唳华亭电视剧萧定权人物曲】
<i class="iconfont exclusive"></i>
<span>06:26</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
<a href="#">
<p>
庄心妍 - 缺憾美
<i class="iconfont exclusive"></i>
<span>03:20</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
<a href="#">
<p>
封茗囧菌 - 占有欲
<i class="iconfont exclusive"></i>
<span>03:23</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
<a href="#">
<p>
秦俊杰 - 直到世界尽头 (Live)
<i class="iconfont exclusive"></i>
<span>05:04</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
<a href="#">
<p>
吉克隽逸 - 稀有人生 (Live)
<i class="iconfont exclusive"></i>
<span>02:52</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
<a href="#">
<p>
那英、肖战 - 跟着感觉走 (Live)
<i class="iconfont exclusive"></i>
<span>04:15</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
<a href="#">
<p>
呵呵大师 - 失落沙洲 (Live)
<i class="iconfont exclusive"></i>
<span>04:34</span>
<i class="iconfont hide1"></i>
<i class="iconfont hide2"></i>
</p>
</a>
</div>
<div class="song-page-number">
<a href="#"><</a>
<span> 1/3 </span>
<a href="#">></a>
</div>
</div>
</div>
<div class="new-song-right clearfix">
<div class="MV">
<span><i>推荐</i>MV</span>
<a href="#">更多</a>
</div>
<div class="MV-under">
<a href="#" class="img-first">
<div>
<p>厌氧</p>
<del>二珂</del>
</div>
<i class="iconfont transmit1"></i>
</a>
<a href="#" class="img-other">
<img src="./upload/new-song-right2.jpg">
<h5>不亏不欠</h5>
<span>袁娅维</span>
<div></div>
<i class="iconfont transmit2"></i>
</a>
<a href="#" class="img-other">
<img src="./upload/new-song-right3.jpg">
<h5>比远方更远</h5>
<span>李晓杰</span>
<div> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
<i class="iconfont transmit2"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>虾米音乐-部分网页截图-学生HTML+CSS+JS期末作业 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./code/base.css">
<link rel="stylesheet" href="./code/xiami.css">
<link rel="stylesheet" href="./code/YiRen.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="header container clearfix">
<div class="XM_logo fl">
<img src="./img/XM_logo.png" alt="">
</div>
<div class="Hnav fl">
<a href="" class="hnav1">发现</a>
<a href="">我的音乐</a>
<a href="">音乐人</a>
<a href="">客户端下载</a>
<a href="">会员中心</a>
</div>
<input type="text" placeholder="exo">
<span class="icon_search"></span>
<div class="login fl"> <a href="">登录/注册</a></div>
</div>
<!-- 顶部导航栏end -->
<!-- 轮播大图 -->
<div class="container LBpic clearfix">
<div class="LB_left fl"><a href=""><img src="./img/party5.jpg" alt=""></a></div>
<div class="LB_center fl"><a href=""><img src="./img/party.jpg" alt=""></a></div>
<div class="LB_right fl">
<div><a href=""><img src="./img/party3.jpg" alt=""></a></div>
</div>
</div>
<!-- 轮播大图 end -->
<!-- 正版心 -->
<div class="container clearfix">
<!-- 左侧定位！！！！ -->
<div class="L-fixed fl">
<ul>
<li class="li1">推荐</li>
<li><a href="./PaiHangBang.html" target="_blank">排行榜</a></li>
<li><a href="">歌单</a></li>
<li><a href="./YiRen.html" target="_blank">艺人</a></li>
<li><a href="">曲风流派</a></li>
<li><a href="">专辑</a></li>
<li><a href="">MV</a></li>
<li><a href="">厂牌</a></li>
</ul>
<div class="download clearfix">
<div class="fl">
<h3>扫描二维码下载</h3>
<p>即可体验<br>我们无与伦比的<br>客户端体验</p>
</div>
<img src="./img/Eweima.png" alt="">
</div>
<div class="icon clearfix">
<div class="fl">
<div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
</a></div> ios
</div>
<div class="fl">
<div class="Ohidden "><a href=""> <img src="./img/android.jpg" alt="">
</a></div> android
</div>
<div class="fl">
<div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
</a></div> ios
</div>
<div class="fl">
<div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
</a></div> ios
</div>
<div class="fl">
<div class="Ohidden "><a href=""> <img src="./img/android.jpg" alt="">
</a></div> android
</div>
<div class="fl">
<div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
</a></div> ios
</div>
</div>
</div>
<!-- 左侧定位！！！！end -->
<!-- 左侧定位！！！end -->
<!-- 右边版心 s -->
<div class="contain-right">
<!-- 每日30首 -->
<div class="radio-container">
<div><img src="./img/partySub1.png" alt="">每日30首</div>
<div><img src="./img/partySub2.png" alt="">猜你喜欢</div>
<div><img src="./img/partySub3.png" alt="">听见不同</div>
<div><img src="./img/partySub4.png" alt="">私人电台</div>
</div>
<!-- 推荐歌单 -->
<div class="block-title clearfix">
<div class="rec-song fl">推荐歌单</div>
<div class="clearfix fr">
全部
<span class="icon fl"> > </span>
</div>
</div>
<div class="recommend clearfix">
<div class="cover fl"><img src="./img/Rec1.jpeg" alt=""></div>
<div class="type-song"><img src="./img/Rec2.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
<div class="type-song"><img src="./img/Rec3.gif" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
<div class="type-song"><img src="./img/Rec4.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
<div class="type-song"><img src="./img/Rec5.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
<div class="type-song"><img src="./img/Rec6.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
<div class="type-song"><img src="./img/Rec4.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
<div class="type-song"><img src="./img/Rec2.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
<div class="type-song"><img src="./img/Rec5.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
</div>
</div>
<!-- 推荐歌单 end -->
<!-- AI日推 -->
<div class="block-title clearfix">
<div class="rec-song fl">AI日推</div>
<div class="clearfix fr">
全部
<span class="icon fl"> > </span>
</div>
</div>
<div class="clearfix">
<div class="daliy_rec fl"><img src="./img/AI1.jpg" alt="">
<p>梦幻氛围|Dream Vibe.</p>
</div>
<div class="daliy_rec fl"><img src="./img/AI2.jpg" alt="">
<p>放松系|武侯咖啡馆 伸个懒腰</p>
</div>
<div class="daliy_rec fl"><img src="./img/AI3.jpg" alt="">
<p>治愈系|温柔乐章 拥你在怀</p>
</div>
<div class="daliy_rec fl"><img src="./img/AI4.jpg" alt="">
<p>放松系|武侯咖啡馆 伸个懒腰</p>
</div>
<div class="daliy_rec fl"><img src="./img/AI5.jpg" alt="">
<p>梦幻氛围|Dream Vibe.</p>
</div>
</div>
<!-- AI日推 end -->
<!-- 中间大播放器 -->
<div class="radio-c">
<div class="block-title clearfix">
<p>新歌</p>
<span class="sp1">推荐</span>
<span>华语</span>
<span>欧美</span>
<span>日本</span>
<span>韩国</span>
</div>
<div class="Mayday"></div>
<div class="play-list">
<div class="Plist-tit clearfix">
<span><img src="./img/bofangqi-bofang.png" alt=""></span>
播放全部
</div>
<!-- 歌列表 -->
<div class="dli clearfix">
<div class="clearfix"><span>01</span>
<div>晕船记</div>
<div>陈婧霏</div>
<div class="long-time">04:06</div>
</div>
<div class="clearfix"><span>02</span>
<div>因为你 所以我</div>
<div>五月天</div>
<div class="long-time">04:06</div>
</div>
<div class="clearfix"><span>03</span>
<div>夜游神</div>
<div>九连真人</div>
<div class="long-time">04:06</div>
</div>
<div class="clearfix"><span>04</span>
<div>xiu</div>
<div>Yu Su</div>
<div class="long-time">04:06</div>
</div>
<div class="clearfix"><span>05</span>
<div>它没有一个具体的理想</div>
<div>何大河</div>
<div class="long-time">04:06</div>
</div>
</div>
</div>
</div>
<!-- 中间大播放器 end-->
<!-- 新碟速递 -->
<div class="block-title clearfix">
<div class="rec-song fl">新碟速递</div>
<div class="clearfix fr">
全部
<span class="icon fl"> > </span>
</div>
</div>
<div class="recommend clearfix apa-list">
<div class="type-song"><img src="./img/XD1.jpg" alt=""><span>26.6万</span>
<p><a href="">陈婧霏</a></p>
<h3><a href="">陈婧霏</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD2.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD3.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD4.jpeg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD5.jpeg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD6.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD7.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD8.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD9.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
<div class="type-song"><img src="./img/XD10.jpg" alt=""><span>26.6万</span>
<p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
<h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
</div>
</div>
<!-- 新碟速递 -->
</div>
<!-- 右边版心 end -->
<!-- 底部 -->
<!-- 底部 -->
</div>
<!-- 正版心 end -->
<div class="footer clearfix">
<div class="Big-info clearfix fl">
<div class="info">
<div class="info-left fl">
<span>关于虾米</span>
<span>入驻虾米</span>
<span>资料补全</span>
<span>桌面端</span>
<span>合作伙伴</span>
</div>
<div class="info-right fl ">
<div class="clearfix"><a href="">关于我们</a><a href="">虾米招聘</a><a href="">联系我们</a><a
href="">隐私权政策</a><a href="">联系客服</a><a href="">意见反馈</a><a href="">回旧版</a></div>
<div class="clearfix"><a href="">音乐人</a><a href="">音乐专栏</a></div>
<div class="clearfix"><a href="">添加资料</a><a href="">大家想要的专辑</a><a href="">音频上传</a><a
href="">MV上传</a></div>
<div class="clearfix"><a href="">pc电脑</a><a href="">苹果电脑</a></div>
<div class="clearfix small-pic">
<div><img src="./img/AI2.jpg" alt=""></div>
<div><img src="./img/XD2.jpg" alt=""></div>
<div><img src="./img/AI1.jpg" alt=""></div>
<div><img src="./img/AI4.jpg" alt=""></div>
<div><img src="./img/AI2.jpg" alt=""></div>
<div><img src="./img/party1.jpg" alt=""></div>
<div><img src="./img/AI5.jpg" alt=""></div>
<div><img src="./img/party3.jpg" alt=""></div>
<div><img src="./img/party4.jpg" alt=""></div>
<div><img src="./img/party5.jpg" alt=""></div>
<div><img src="./img/party4.jpg" alt=""></div>
<div><img src="./img/AI1.jpg" alt=""></div>
<div><img src="./img/AI2.jpg" alt=""></div>
<div><img src="./img/AI1.jpg" alt=""></div>
<div><img src="./img/AI3.jpg" alt=""></div>
<div><img src="./img/AI1.jpg" alt=""></div>
<div><img src="./img/AI2.jpg" alt=""></div>
<div><img src="./img/AI1.jpg" alt=""></div>
<div><img src="./img/AI2.jpg" alt=""></div>
<div><img src="./img/AI1.jpg" alt=""></div>
</div>
</div>
</div>
</div>
<div class="focus-us fl">
<div>关注我们</div>
<div>
<span><img src="./img/weibo.png" alt=""></span>
<span><img src="./img/weixin.png" alt=""></span>
<span><img src="./img/zhihu.png" alt=""></span>
</div>
</div>
<div class="Erweima fr">
<p>虾米音乐APP</p>
<div><img src="./img/Eweima.png" alt=""></div>
</div>
<div class="line"></div>
<!-- footer 最下面 -->
<ul>
<li><a href="">淘宝网</a></li>
<li>|</li>
<li><a href="">天猫</a></li>
<li>|</li>
<li><a href="">支付宝</a></li>
<li>|</li>
<li><a href="">飞猪</a></li>
<li>|</li>
<li><a href="">聚划算</a></li>
<li>|</li>
<li><a href="">阿里云</a></li>
<li>|</li>
<li><a href="">阿里妈妈</a></li>
<li>|</li>
<li><a href="">1688</a></li>
<li>|</li>
<li><a href="">AliOS</a></li>
<li>|</li>
<li><a href="">阿里通信</a></li>
<li>|</li>
<li><a href="">万网</a></li>
<li>|</li>
<li><a href="">阿里游戏</a></li>
<li>|</li>
<li><a href="">大麦网</a></li>
<li>|</li>
<li><a href="">一淘</a></li>
<li>|</li>
<li><a href="">狂野飙车9</a></li>
<li>|</li>
<li><a href="">UCCricket</a></li>
<li>|</li>
<li><a href="">阿里安全</a></li>
</ul>
<div class="subfont">
<p> 2007 - 2021 杭州阿里巴巴音乐科技有限公司 版权所有 阿里巴巴旗下公司</p>
<ul class="subul clearfix">
<li><a href="">营业执照</a></li>
<li>|</li>
<li><a href="">网络文化经营许可证 :浙网文(2019)4999-453号</a></li>
<li>|</li>
<li><a href="">增值电信业务经营许可证 :浙B2-20110188 </a></li>
<li>|</li>
<li><a href="">浙ICP备18050417号-2</a></li>
<li>|</li>
<li><a href="">浙公网安备 33011002012729号</a></li>
</ul>
</div>
</div>
</body>
</html>咪咕音乐部分网页截图-HTML学生期末作业
咪咕音乐部分网页源码-HTML学生期末作业
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>咪咕音乐网_和你在一起</title>
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!--头部开始-->
<div class="header">
<div class="header_1_wrap">
<div class="header_1">
<div class="header_1_l">
<a href="#">中国移动旗下音乐门户</a>
<span>|</span>
<a href="#">集团产品</a>
<span>|</span>
<a href="#">设为首页</a>
<span>|</span>
<a href="#">加入收藏</a>
</div>
<div class="header_1_r">
<em class="user-ico"></em>
<a href="">登录</a>
<span>|</span>
<a href="">注册</a>
<em class="member-ico"></em>
<a href="">会员</a>
</div>
</div>
</div>
<div class="header_2_wrap">
<div class="header_2">
<div class="logo"></div>
<div class="search">
<form action="">
<input type="text" />
<input type="submit" class="submit" name="submit" value=""/>
</form>
</div>
<div class="header_2_r">
<a href="" class="tehui"></a>
<a href="" class="yku"></a>
</div>
</div>
</div>
<div class="header_3_wrap">
<div class="header_3">
<div class="nav">
<a href="" class="nav_red">首页</a>
<a href="" class="cl_ul">彩铃</a>
<a href="" class="lk_ul">乐库</a>
<a href="">排行榜</a>
<a href="">电台</a>
<a href="" class="sp_ul">视频</a>
<a href="">专题</a>
<a href="">社区</a>
<a href="">大剧院</a>
</div>
<div class="header_3_r">
<span class="yc"></span>
<a href="">原创</a>
<span class="khd"></span>
<a href="">客户端</a>
<span class="kfhz"></span>
<a href="">开放合作</a>
<div class="header_3_r_xcp">
<span class="xcp"></span>
<a href="">新产品</a>
<ul>
<li><a href="">咪咕环境音乐</a></li>
<li><a href="">咪咕家庭音乐</a></li>
<li><a href="">企业彩铃</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="header_4">
<ul class="cl_ul">
<li><a href="">彩铃推荐</a></li>
<li><a href="">个性彩铃</a></li>
<li><a href="">彩铃DIY</a></li>
</ul>
<ul class="lk_ul">
<li><a href="">分类</a></li>
<li><a href="">专辑</a></li>
<li><a href="">歌手</a></li>
<li><a href="">精选集</a></li>
</ul>
<ul class="sp_ul">
<li><a href="">MV</a></li>
<li><a href="">咪咕现场</a></li>
</ul>
</div>
</div>
<!--头部结束-->
<!--横幅开始-->
<div class="banner">
<div class="banner_slide">
<div class="hd">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd">
<ul>
<li><a href="#" target="_blank"><img src="images/slide1.jpg" /></a>
<p>【首发】邓紫棋新专辑灰色摇滚单曲《一路逆风》</p>
</li>
<li><a href="#" target="_blank"><img src="images/slide2.jpg" /></a>
<p>【首发】鹿晗反规则鹿式慢情歌《诺言》清新来袭</p>
</li>
<li><a href="#" target="_blank"><img src="images/slide3.jpg" /></a>
<p>精选集：像向日葵一样活着</p>
</li>
<li><a href="#" target="_blank"><img src="images/slide4.jpg" /></a>
<p>乐人志第28期 黄韵玲：吟唱初心的真貌 </p>
</li>
<li><a href="#" target="_blank"><img src="images/slide5.jpg" /></a>
<p>精选集：民谣还你难得的安宁</p>
</li>
<li><a href="#" target="_blank"><img src="images/slide6.jpg" /></a>
<p>音为青春·中国大学音乐超级联赛</p>
</li>
<li><a href="#" target="_blank"><img src="images/slide7.jpg" /></a>
<p>精选集：那些我们迷恋的女声</p>
</li>
<li><a href="#" target="_blank"><img src="images/slide8.jpg" /></a>
<p>专题：韩流第一天团PK大战</p>
</li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地
文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下：http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态：[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态
解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地
文章浏览阅读1.3w次，点赞45次，收藏99次。我个人用的是anaconda3的一个python集成环境，自带jupyter notebook，但在我打开jupyter notebook界面后，却找不到对应的虚拟环境，原来是jupyter notebook只是通用于下载anaconda时自带的环境，其他环境要想使用必须手动下载一些库：1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境
国内安装scoop的保姆教程_scoop-cn-程序员宅基地
文章浏览阅读5.2k次，点赞19次，收藏28次。选择scoop纯属意外，也是无奈，因为电脑用户被锁了管理员权限，所有exe安装程序都无法安装，只可以用绿色软件，最后被我发现scoop，省去了到处下载XXX绿色版的烦恼，当然scoop里需要管理员权限的软件也跟我无缘了（譬如everything）。推荐添加dorado这个bucket镜像，里面很多中文软件，但是部分国外的软件下载地址在github，可能无法下载。以上两个是官方bucket的国内镜像，所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn
Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地
文章浏览阅读4.5k次，点赞2次，收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty..._vue el-color-picker
迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地
文章浏览阅读640次。基于芯片日益增长的问题，所以内核开发者们引入了新的方法，就是在内核中只保留函数，而数据则不包含，由用户（应用程序员）自己把数据按照规定的格式编写，并放在约定的地方，为了不占用过多的内存，还要求数据以根精简的方式编写。boot启动时，传参给内核，告诉内核设备树文件和kernel的位置，内核启动时根据地址去找到设备树文件，再利用专用的编译器去反编译dtb文件，将dtb还原成数据结构，以供驱动的函数去调用。firmware是三星的一个固件的设备信息，因为找不到固件，所以内核启动不成功。_exynos 4412 刷机
Linux系统配置jdk_linux配置jdk-程序员宅基地
文章浏览阅读2w次，点赞24次，收藏42次。Linux系统配置jdkLinux学习教程，Linux入门教程（超详细）_linux配置jdk
随便推点
matlab(4)：特殊符号的输入_matlab微米怎么输入-程序员宅基地
文章浏览阅读3.3k次，点赞5次，收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图：_matlab微米怎么输入
C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地
文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件，可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中，对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数，而关闭则使用fclose函数。在C语言中，可以使用fread和fwrite函数进行二进制读写。 Biaoge 于2024-03-09 23:51发布 阅读量：7 ️文章类型：【 C语言程序设计 】在C语言中，用于打开文件的函数是____，用于关闭文件的函数是____。
Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地
文章浏览阅读3.4k次，点赞2次，收藏13次。跟随鼠标移动的粒子以grid（SOP）为partical（SOP）的资源模板，调整后连接【Geo组合+point spirit（MAT)】，在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in（CHOP)鼠标位置到metaball的坐标，实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动
【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地
文章浏览阅读178次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计
Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析 时序图-程序员宅基地
文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多，会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析，后面会慢慢更新。另外，博客只作为自己学习记录的一种方式，对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图
java 数据结构与算法 ——快速排序法-程序员宅基地
文章浏览阅读2.4k次，点赞41次，收藏13次。java 数据结构与算法 ——快速排序法_快速排序法