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>