时间：2023-07-22 07:15:01 | 来源：网站运营
时间：2023-07-22 07:15:01 来源：网站运营
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材：> ⛵ 源码获取 文末联系 ✈Web前端开发技术 描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星音乐演唱会主题 | 爵士乐音乐 | 民族音乐 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页
在线咨询
<!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/reset.css"> <!-- <link rel="stylesheet" href="http://www.ylcp.shop/files/files/1650595094994/css/iconfont.css"> --> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/conmom.css"> <link rel="stylesheet" href="css/iconfont.css"> <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1650595094994/bitbug_favicon%20(2).ico" type="image/x-icon"></head><body> <!-- 第一排 --> <div class="topnav"> <!-- 版心 --> <div class="container"> <!-- 搜索栏 --> <div class="topnav-searchbox"> <!-- 左 --> <img src="picture/logo.png" alt="" class="topnav-logo"> <span class="topnav-wyy "><a href="#">网易云音乐</a></span> <div class="topnav-nav"> <div> <a href="#">发现音乐</a> <div class="topnav-nav-xsj"></div> </div> <div><a href="my-music.html">我的音乐</a></div> <div><a href="friend.html">朋友</a></div> <div><a href="shopping.html">商城</a></div> <div><a href="musician.html">音乐人</a></div> <div class="topnav-nav-last"> <a href="client.html">下载客户端</a> <div class="topnav-nav-hot">HOT</div> </div> </div> <!-- 右 --> <p><a href="#">登录</a></p> <a href="#"> <div class="topnav-nav-right">创作者中心</div> </a> <div class="topnav-nav-input"> <i class="iconfont"></i> <input type="text" placeholder="音乐/视频/电台/用户"> </div> </div> </div> </div> <!-- 第二排 推荐 --> <div class="recommend " id="id-top"> <!-- 版心 --> <div class="container"> <div class="recommend-box"> <ul> <li><a href="#">推荐</a></li> <li><a href="#">排行榜</a></li> <li><a href="#">歌单<img src="picture/white-r-icon@3x.png" alt="" class="R"> </a> </li> <li><a href="#">主播电台</a></li> <li><a href="#">歌手</a></li> <li><a href="#">新碟上架</a></li> </ul> </div> </div> </div> <!-- 第三排 轮播图 --> <div class="slideshow"> <!-- 版心 --> <div class="newcontainer clearfix"> <!-- 左边图片 --> <div class="bj-left clearfix"> <img src="picture/bj.jpg" alt=""> </div> <!-- 下面 轮播图 --> <div class="slideshow-sli"> <ul> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> </ul> </div> <!-- 右边图片 --> <div class="bj-right"> <a href="#" class="bj-right-button"></a> <p>pc 安卓 iPhone WP ipad Mac 六大客户端</p> </div> <!-- 精灵图 --> <a href="#"> <div class="jl-left"> </div> </a> <a href="#"> <div class="jl-right"></div> </a> </div> </div> <!-- 第四排 热门推荐 --> <div class="hot"> <!-- 新版心 --> <div class="newcontainer"> <!-- 左边 --> <div class=" hot-left"> <!-- 上面导航 --> <div class="hot-left-top clearfix"> <!-- 左 --> <div class="yuan"></div> <p>热门推荐</p> <a href="#">华语</a> <li>|</li> <a href="#">流行</a> <li>|</li> <a href="#">摇滚</a> <li>|</li> <a href="#">民谣</a> <li>|</li> <a href="#">电子</a> <!-- 右 --> <div class="jt"></div> <h3><a href="#">更多</a></h3> </div> <!-- 视频 --> <div class="hot-left-video clearfix"> <!-- 1 --> <div> <img src="picture/81.jpg" alt=""> <a href="#">经典老歌,久听不厌</a> <span class="img-back-g"></span> <span class="img-bottom"> <span class="bfl"></span> <b>144万</b> <a class="bof"></a> </span> </div> <!-- 2 --> <div> <img src="picture/82.jpg" alt=""> <a href="#">Vol.452 别再说你真的用力爱过</a> <span class="img-back-g"></span> <span class="img-bottom"> <span class="bfl"></span> <b>157万</b> <a class="bof"></a> </span> </div> <!-- 3 --> <div> <img src="picture/83.jpg" alt=""> <a href="#">丧丧丧//沉默是最大的哭声我希望你能懂</a> <span class="img-back-g"></span> <span class="img-bottom"> <span class="bfl"></span> <b>528万</b> <a class="bof"></a> </span> </div> <!-- 4 --> <div> <img src="picture/84.jpg"> <a href="#">好想你 (粤语歌词)</a> <span class="img-back-g"></span> <span class="img-bottom"> <span class="bfl"></span> <b>235万</b> <a class="bof"></a> </span> </div> <!-- 5 --> <div> <img src="picture/85.jpg"> <a href="#"><span class="program"></span>我要找到你 (完整版已上线啦~)</a> <span class="img-back-g"></span> <span class="huangg"></span> <span class="img-bottom"> <span class="bfl"></span> <b>125万</b> <a class="bof"></a> </span> </div> <!-- 6 --> <div> <a href="#"> <img src="picture/86.jpg"></a> <a href="#"><span class="program"></span>世间美好与你环环相扣</a> <span class="img-back-g"></span> <span class="img-bottom"> <span class="bfl"></span> <b>202万</b> <a class="bof"></a> </span> </div> <!-- 7 --> <div> <img src="picture/87.jpg"> <a href="#"> “你努力去爱的样子，又孤独又美好”</a> <span class="img-back-g"></span> <span class="img-bottom"> <span class="bfl"></span> <b>125万</b> <a class="bof"></a> </span> </div> <!-- 8 --> <div> <img src="picture/88.jpg"> <a href="#">即使身处暗流,也要仰望星空啊</a> <span class="img-back-g"></span> <span class="img-bottom"> <span class="bfl"></span> <b>658万</b> <a class="bof"></a> </span> </div> </div> <!-- 新品上架 --> <div class="xp clearfix"> <!-- 左 --> <div class="yuan"></div> <p>新品上架</p> <!-- 右 --> <div class="jt"></div> <h3><a href="#">更多</a></h3> </div> <!-- 新碟上架 --> <div class="plate clearfix"> <ul> <li> <div class="plate-img-box"> <img src="picture/51.jpg" alt=""> <div class="img-back-z"></div> <a href="#" class="plate-img-box-a1">我爱你这是最好</a> <a href="#" class="plate-img-box-a2">群星</a> </div> <a href="#"> <div class="action"></div> </a> </li> <li> <div class="plate-img-box"> <img src="picture/52.jpg" alt=""> <div class="img-back-z"></div> <a href="#" class="plate-img-box-a1">与火星的孩子对话</a> <a href="#" class="plate-img-box-a2">华晨宇</a> </div> <a href="#"> <div class="action"></div> </a> </li> <li> <div class="plate-img-box"> <img src="picture/53.jpg" alt=""> <div class="img-back-z"></div> <a href="#" class="plate-img-box-a1">MLRRORS</a> <a href="#" class="plate-img-box-a2">王嘉尔</a> </div> <a href="#"> <div class="action"></div> </a> </li> <li> <div class="plate-img-box"> <img src="picture/54.jpg" alt=""> <div class="img-back-z"></div> <a href="#" class="plate-img-box-a1">初恋那件小事 电</a> <a href="#" class="plate-img-box-a2">群星</a> </div> <a href="#"> <div class="action"></div> </a> </li> <li> <div class="plate-img-box"> <img src="picture/55.jpg" alt=""> <div class="img-back-z"></div> <a href="#" class="plate-img-box-a1">야호(夜好)</a> <a href="#" class="plate-img-box-a2">N.Flying</a> </div> <a href="#"> <div class="action"></div> </a> </li> </ul> </div> <!-- 榜单 --> <div class="List clearfix"> <!-- 左 --> <div class="yuan"></div> <p>榜单</p> <!-- 右 --> <div class="jt"></div> <h3><a href="#">更多</a></h3> </div> <!-- 榜单榜 --> <div class="bd clearfix"> <!-- 左 --> <div> <!-- 左 --> <dl class="clearfix"> <dt class="clearfix"> <a href="#"> <img src="picture/b31.jpg" alt=""> </a> <!-- 右 --> <div class="bd-dt-right clearfix"> <a href="#"> <p>云音乐飙升榜</p> </a> <a href="#"> <div class="bd-dt-right-action"></div> </a> <a href="#"> <div class="bd-dt-right-wj"></div> </a> </div> </dt> <dd> <span class="red">1</span> <a href="#">二零三</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">2</span> <a href="#">所念皆星河</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">3</span> <a href="#">下山</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>4</span> <a href="#">卑微小调</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>5</span> <a href="#">倒数</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>6</span> <a href="#">笨蛋</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>7</span> <a href="#">忽然之间</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>8</span> <a href="#">所以少年人</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>9</span> <a href="#">羞答答的玫瑰静悄悄的开</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>10</span> <a href="#">明年来生</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="qb"><a href="#">查看全部></a></span> </dd> </dl> <!-- 中 --> <dl class="clearfix"> <dt class="clearfix"> <a href="#"> <img src="picture/b32.jpg"> </a> <!-- 右 --> <div class="bd-dt-right clearfix"> <a href="#"> <p>云音乐飙升榜</p> </a> <a href="#"> <div class="bd-dt-right-action"></div> </a> <a href="#"> <div class="bd-dt-right-wj"></div> </a> </div> </dt> <dd> <span class="red">1</span> <a href="#">二零三</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">2</span> <a href="#">所念皆星河</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">3</span> <a href="#">下山</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>4</span> <a href="#">卑微小调</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>5</span> <a href="#">倒数</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>6</span> <a href="#">笨蛋</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>7</span> <a href="#">忽然之间</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>8</span> <a href="#">所以少年人</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>9</span> <a href="#">羞答答的玫瑰静悄悄的开</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>10</span> <a href="#">明年来生</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="qb"><a href="#">查看全部></a></span> </dd> </dl> <!-- 右 --> <dl class="clearfix"> <dt class="clearfix"> <a href="#"> <img src="picture/b33.jpg"> </a> <!-- 右 --> <div class="bd-dt-right clearfix"> <a href="#"> <p>网易原创歌曲榜</p> </a> <a href="#"> <div class="bd-dt-right-action"></div> </a> <a href="#"> <div class="bd-dt-right-wj"></div> </a> </div> </dt> <dd> <span class="red">1</span> <a href="#">二零三</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">2</span> <a href="#">所念皆星河</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">3</span> <a href="#">下山</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>4</span> <a href="#">卑微小调</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>5</span> <a href="#">倒数</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>6</span> <a href="#">笨蛋</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>7</span> <a href="#">忽然之间</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>8</span> <a href="#">所以少年人</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>9</span> <a href="#">羞答答的玫瑰静悄悄的开</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>10</span> <a href="#">明年来生</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="qb"><a href="#">查看全部></a></span> </dd> </dl> </div> </div> </div> <!-- 右边 --> <div class="hot-right"> <!-- 上 --> <a href="#"> <div class="hot-right-top"> <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p> <div>用户登录</div> </div> </a> <!-- 入驻歌手 --> <div class="singer"> <div class="singer-box"> <a>查看全部></a> <h3>入驻歌手</h3> </div> </div> <ul class="album clearfix"> <li class="clearfix"> <img src="picture/r51.jpg" alt=""> <span> <a href="#"> <h3>张惠妹aMEI</h3> </a> <a href="#"> <p>台湾歌手张惠妹</p> </a> </span> </li> <li> <img src="picture/r52.jpg"> <span> <a href="#"> <h3>Fine乐团</h3> </a> <a href="#"> <p>独立音乐人</p> </a> </span> </li> <li> <img src="picture/r53.jpg"> <span> <a href="#"> <h3>萬曉利</h3> </a> <a href="#"> <p>民谣歌手、中国现代民谣的代表人物之一</p> </a> </span> </li> <li> <img src="picture/r54.jpg"> <span> <a href="#"> <h3>音乐人赵雷</h3> </a> <a href="#"> <p>民谣歌手</p> </a> </span> </li> <li> <img src="picture/r55.jpg"> <span> <a href="#"> <h3>王三溥</h3> </a> <a href="#"> <p>音乐人</p> </a> </span> </li> <a class="finally">申请成为网易音乐人</a> </ul> <!-- 热门主播 --> <div class="singer"> <div class="singer-box"> <h3>热门主播</h3> </div> </div> <!-- 主播 --> <div class="anchor"> <ul> <li> <img src="picture/z51.jpg" alt=""> <span class="clearfix"> <a href="#">陈立</a> <div class="v"></div> <p>心理学家、美食家陈立教授</p> </span> </li> <li> <img src="picture/z52.jpg" alt=""> <span class="clearfix"> <a href="#">DJ艳秋</a> <div class="v"></div> <p>著名音乐节目主持人</p> </span> </li> <li> <img src="picture/z53.jpg" alt=""> <span class="clearfix"> <a href="#">国家大剧院古典音乐频道</a> <div class="v"></div> <p>国家大剧院古典音乐官方</p> </span> </li> <li> <img src="picture/z54.jpg" alt=""> <span class="clearfix"> <a href="#">谢谢收听</a> <div class="v"></div> <p>杭州电台主持人王馨</p> </span> </li> <li> <img src="picture/z55.jpg" alt=""> <span class="clearfix"> <a href="#">DJ晓苏</a> <div class="v"></div> <p>独立DJ，CRI环球旅游广播特邀DJ</p> </span> </li> </ul> </div> </div> </div> </div> <!-- 最下面 --> <div class="music-bottom"> <!-- 版心 --> <div class="newcontainer"> <!-- 左边 --> <div class="music-bottom-left"> <!-- 第一排 --> <div class="music-bottom-one-row"> <a href="#">服务条款</a> <li>|</li> <a href="#">隐私政策</a> <li>|</li> <a href="#">儿童隐私政策 </a> <li>|</li> <a href="#">版权投诉指引</a> <li>|</li> <a href="#">意见反馈</a> <li>|</li> <br> </div> <!-- 二 --> <p class="music-bottom-p1">网易公司版权所有©1997-2019 杭州乐读科技有限公司运营：<a href="#">浙网文[2018]3506-263号</a></p> <!-- 三 --> <p class="music-bottom-p2">违法和不良信息举报电话：0571-89853516 举报邮箱：<a href="#">ncm5990@163.com</a></p> </div> <!-- 右边 --> <div class="music-bottom-right"> <div class="music-bottom-right-box"> <a href="#"><span class="music-bottom-right-img1"> </span></a> <li>用户认证</li> </div> <div class="music-bottom-right-box"> <a href="#"> <span class="music-bottom-right-img2"> </span></a> <li>独立音乐人</li> </div> <div class="music-bottom-right-box"> <a href="#"> <span class="music-bottom-right-img3"> </span></a> <li>赞赏</li> </div> <div class="music-bottom-right-box"> <a href="#"> <span class="music-bottom-right-img4"> </span></a> <li>视频奖励</li> </div> </div> </div> <!-- 放回,固定 --> <a href="#id-top" class="fh-top" title="返回顶部"></a> </div></body></html>关键词：素材,音乐
