当前位置：首页 > news >正文

16.[前端开发]Day16-HTML+CSS阶段练习(网易云音乐五)

news 文章来源：https://blog.csdn.net/m0_55135449/article/details/145404671 2025/5/4 16:36:56

完整代码

网易云-main-left-rank（排行榜）

<!DOCTYPE html>
<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>网易云的主要区域</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/main-area-right.css"><style>/* 左侧区域 */.main .area-left {width: 729px;padding: 20px 20px 40px;}.recommend-section .list {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 2px;}.recommend-section .list .item {width: 140px;margin-bottom: 30px;}.recommend-section .list .item .top {position: relative;}.recommend-section .list .item .top .cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: url(./images/cover_sprite.png);background-position: 0 0;}.recommend-section .list .item .top .info {position: absolute;bottom: 0;left: 0;right: 0;height: 27px;padding-left: 10px;line-height: 27px;font-size: 12px;color: #ccc;background-image: url(./images/cover_sprite.png);background-position: 0 -537px;}.recommend-section .list .item .top .info .icon-music {position: relative;top: 1px;}.recommend-section .list .item .top .info .count {margin-left: 4px;}.recommend-section .list .item .top .info .icon-play {position: absolute;top: 0;bottom: 0;right: 10px;margin: auto 0;}/* 底部的样式 */.recommend-section .list .item .bottom {display: block;margin-top: 8px;font-size: 14px;}.recommend-section .list .item .bottom:hover {text-decoration: underline;}.recommend-section .list .item .bottom .icon-radio {position: relative;top: 2px;}/* 新碟上架 */.disc-section .content {height: 186px;margin: 20px 0;box-sizing: border-box;border: 1px solid #d3d3d3;}.disc-section .content .inner {position: relative;height: 100%;box-sizing: border-box;padding: 0 25px;border: 1px solid #fff;background-color: #f5f5f5;}.disc-section .inner .roller {display: flex;height: 100%;overflow: hidden;}.disc-section .inner .roller .list {display: flex;justify-content: space-between;align-items: center;width: 100%;padding-top: 10px;flex-shrink: 0;}.disc-section .roller .list .item {width: 118px;height: 150px;background: url(./images/main_sprite.png) no-repeat -260px 100px;}.disc-section .roller .list .item .album {position: relative;}.disc-section .roller .list .item .cover {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat 0 -570px;}.disc-section .roller .item .album .play {display: none;position: absolute;right: 10px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .roller .item .album:hover .play {display: block;}.disc-section .roller .list .item a {display: block;margin-top: 5px;padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.disc-section .roller .list .item a:hover {text-decoration: underline;}.disc-section .roller .list .item a.title {color: #000;margin-top: 8px;}.disc-section .roller .list .item a.anchor {color: #666;}.disc-section .inner .control {position: absolute;width: 17px;height: 17px;top: 72px;bottom: 0;background-image: url(./images/main_sprite.png);}.disc-section .inner .control-left {left: 5px;background-position: -260px -75px;}.disc-section .inner .control-right {right: 5px;background-position: -320px -75px;}/* rank-section */.rank-section .content {display: flex;height: 472px;margin-top: 20px;background: url(./images/rank_bg.png) no-repeat;}.rank-section .content .rank {width: 230px;}.rank-section .content .rank .header {display: flex;height: 120px;box-sizing: border-box;padding: 20px 0 0 20px;}.rank-section .rank .header .album {position: relative;width: 80px;height: 80px;}.rank-section .rank .header .album img {width: 100%;height: 100%;}.rank-section .rank .header .album .cover {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat -145px -57px;}.rank-section .rank .header .info {padding: 10px 0 0 12px;}.rank-section .rank .header .info .title {color: #333;}.rank-section .rank .header .info .operation {margin-top: 12px;}.rank-section .rank .header .info .btn {display: inline-block;width: 22px;height: 22px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .rank .header .info .btn.play {background-position: -267px -205px;}.rank-section .rank .header .info .btn.play:hover {background-position: -267px -235px;}.rank-section .rank .header .info .btn.favor {background-position: -300px -205px;margin-left: 8px;}.rank-section .rank .header .info .btn.favor:hover {background-position: -300px -235px;}.rank-section .rank .list {padding-left: 12px;}.rank-section .rank .list .item {display: flex;height: 32px;line-height: 32px;padding-right: 5px;}.rank-section .rank .list .item .no {width: 35px;font-size: 16px;color: #666;text-align: center;}.rank-section .rank .list .item:nth-child(-n+3) .no {color: #c10d0c;}.rank-section .rank .list .item .song {flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.rank-section .rank .list .item .song:hover {text-decoration: underline;}.rank-section .rank .list .item .operation {display: none;align-items: center;width: 82px;}.rank-section .rank .list .item:hover .operation {display: flex;}.rank-section .rank .list .item .operation .btn {width: 17px;height: 17px;margin-right: 8px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .rank .list .item .operation .btn.play {background-position: -267px -268px;}.rank-section .rank .list .item .operation .btn.add {background: url(./images/iconall_sprite.png) no-repeat;background-position: 2px -698px;}.rank-section .rank .list .item .operation .btn.favor {background-position: -297px -268px;}.rank-section .rank .list .more {height: 32px;line-height: 32px;text-align: right;padding-right: 32px;}.rank-section .rank .list .more a:hover {text-decoration: underline;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><dl class="rank up-rank"><dt class="header"><div class="album"><img src="./images/rank_up.jpeg" alt="飙升榜"><a class="cover" href="#"></a></div><div class="info"><h3 class="title">飙升榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list"><ol><li class="item"><!-- Java: Student -> sno(numero序号) --><span class="no">1</span><a class="song" href="#">再等冬天(Memories)</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd></dl><dl class="rank up-rank"><dt class="header"><div class="album"><img src="./images/rank_new.jpeg" alt="新歌榜"><a class="cover" href="#"></a></div><div class="info"><h3 class="title">新歌榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list new-list"><ol><li class="item"><!-- Java: Student -> sno(numero序号) --><span class="no">1</span><a class="song" href="#">再等冬天(Memories)</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd></dl><dl class="rank origin-rank"><dt class="header"><div class="album"><img src="./images/rank_origin.jpeg" alt="原创榜"><a class="cover" href="#"></a></div><div class="info"><h3 class="title">原创榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list"><ol><li class="item"><!-- Java: Student -> sno(numero序号) --><span class="no">1</span><a class="song" href="#">再等冬天(Memories)</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd></dl></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div></body>
</html>

common.css

body {font: 12px Arial, Helvetica, sans-serif;
}.wrapper_01 {width: 1100px;margin: 0 auto;
}.wrapper_02 {width: 980px;margin: 0 auto;
}.wrapper_03 {width: 982px;margin: 0 auto;
}/* topbar_sprite */
.topbar_sprite {display: inline-block;background-image: url(../images/topbar_sprite.png);
}.topbar_icon_hot {width: 28px;height: 19px;background-position: -190px 0;
}/* btn_sprite */
.btn_sprite {display: inline-block;background: url(../images/btn_sprite.png) no-repeat;height: 31px;line-height: 31px;text-align: center;
}.btn_type_01_sup {background-position: right -100px;padding-right: 5px;
}.btn_type_01_sub {display: block;background-position: 0 -59px;padding-left: 3px;
}.btn_type_favor_sup {padding-right: 5px;background-position: right -1020px;
}.btn_type_favor_sub {display: inline-block;padding-left: 28px;padding-right: 3px;background-position: 0 -977px;
}/* icon_sprite */
.icon_sprite {display: inline-block;background-image: url(../images/icon_sprite.png);
}.icon_sprite_music {background-position: 0px -24px;width: 14px;height: 11px;
}.icon_sprite_play_01 {background-position: 0px 0px;width: 16px;height: 17px;
}/* iconall_sprite */
.iconall_sprite {display: inline-block;background-image: url(../images/iconall_sprite.png);
}.iconall_sprite_radio {background-position: -31px -658px;width: 35px;height: 15px;
}

header.css

/* header类型一 */
.header_type_01 {display: flex;justify-content: space-between;align-items: center;padding-bottom: 5px;border-bottom: 1px solid #ccc;font-size: 12px;
}.header_type_01 .title {color: #333;font-size: 12px;
}.header_type_01 .more {color: #666;
}.header_type_01 .more:hover {text-decoration: underline;
}/* header类型二 */
.header_type_02 {position: relative;display: flex;justify-content: space-between;align-items: flex-end;height: 35px;box-sizing: border-box;padding-left: 34px;padding-right: 20px;padding-bottom: 5px;border-bottom: 2px solid #C10D0C;background: url(../images/main_sprite.png) no-repeat -225px -156px;
}.header_type_02::after {content: "";position: absolute;width: 12px;height: 12px;right: 5px;bottom: 8px;background: url(../images/main_sprite.png) no-repeat 0 -240px;
}.header_type_02 .area_left {display: flex;align-items: center;
}.header_type_02 .title {font-size: 20px;font-weight: normal;color: #333;
}.header_type_02 .keywords {display: flex;margin-left: 20px;color: #999;
}.header_type_02 .keywords .item {color: #666;
}
.header_type_02 .keywords .line {margin: 0 12px;
}.header_type_02 .more {font-size: 12px;color: #666;
}.header_type_02 .more:hover {text-decoration: underline;
}

main-area-right.css

/* 右侧区域 */
.main .area-right {width: 250px;
}.main .area-right .user-login {width: 250px;height: 126px;background: url(../images/main_sprite.png) 0 0;
}.main .area-right .user-login .desc {width: 205px;margin: 0 auto;padding-top: 16px;color: #666;font-size: 12px;line-height: 22px;
}.main .area-right .user-login .btn {display: block;width: 100px;height: 31px;margin: 15px auto 0;line-height: 31px;text-align: center;color: #fff;font-size: 12px;background: url(../images/main_sprite.png) 0 -195px;text-shadow: 0 1px 0 #8a060b;
}.main .settle-singer {padding: 20px;
}.main .settle-singer .list {padding: 5px 0;
}.main .settle-singer .list .item {display: flex;/* align-items: center; */width: 210px;height: 62px;margin-top: 15px;background-color: #fafafa;
}.main .settle-singer .list .item .info {flex: 1;display: flex;flex-direction: column;justify-content: space-around;padding: 3px 12px;border: 1px solid #e9e9e9;border-left: none;overflow: hidden;
}.main .settle-singer .item .info .singer {font-size: 14px;font-weight: 700;color: #000;
}.main .settle-singer .item .info .desc {font-size: 12px;color: #666;/* 文本超出后显示... */white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}.main .hot-anchor {padding: 20px;
}

reset.css

body, h1, h2, h3,ol, ul, li, p, dl, dt, dd {margin: 0;padding: 0;
}a {text-decoration: none;color: #000;outline: none;
}ul, ol, li {list-style: none;
}input {outline: none;border: none;
}img {vertical-align: top;
}i {font-style: normal;
}

01_(掌握)网易云-排行榜的结构搭建

做东西前，需要把结构分析清楚

<!DOCTYPE html>
<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>网易云的主要区域</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/main-area-right.css"><style>.main .area {display: flex;justify-content: space-between;border: 1px solid #d3d3d3;border-width: 0 1px;background-image: url(./images/main_bg.png);}/* 左侧区域 */.main .area-left {width: 729px;padding: 20px 20px 40px;}.recommend-section .list{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 2px;}.recommend-section .list .item {width: 140px;margin-bottom: 30px;}.recommend-section .list .item .top {position: relative;}.recommend-section .list .item .top .cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: url(./images/cover_sprite.png);background-position: 0 0;}.recommend-section .list .item .top .info {position: absolute;bottom: 0;left: 0;right: 0;height: 27px;padding-left: 10px;line-height: 27px;font-size: 12px;color: #ccc;background-image: url(./images/cover_sprite.png);background-position: 0 -537px;}.recommend-section .list .item .top .info .icon-music {position: relative;top: 1px;/* display: inline-block; *//* width: 14px;height: 11px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 -24px; */}.recommend-section .list .item .top .info .count {margin-left: 4px;}.recommend-section .list .item .top .info .icon-play {position: absolute;top: 0;bottom: 0;right: 10px;margin: auto 0;/* display: inline-block; *//* width: 16px;height: 17px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 0; */}/* 底部的样式 */.recommend-section .list .item .bottom {display: block;margin-top: 8px;font-size: 14px;}.recommend-section .list .item .bottom:hover {text-decoration: underline;}.recommend-section .list .item .bottom .icon-radio{position: relative;top: 2px;}/*新碟上架*/.disc-section .content{height: 186px;margin:20px 0;box-sizing: border-box;border: 1px solid #d3d3d3;}.disc-section .content .inner{position: relative;height: 100%;box-sizing: border-box;padding:0 20px;border: 1px solid #fff;background-color: #f5f5f5;}.disc-section .content .inner .roller{display: flex;height: 100%;overflow: hidden;}.disc-section .inner .roller .list{display: flex;justify-content:space-between;align-items: center;width: 100%;padding-top: 10px;flex-shrink: 0;}.disc-section .inner .roller .list .item{width: 118px;height: 150px;background:url(./images/main_sprite.png) no-repeat -260px 100px;}.disc-section .inner .roller .list .item .album{position: relative;}.disc-section .inner .roller .list .item .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat 0 -570px;}.disc-section .inner .roller .list .item .album .play{display: none;position: absolute;right: 10px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .inner .roller .list .item .album:hover .play{display: block;}.disc-section .inner .roller .list .item a{display: block;margin-top: 5px;padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.disc-section .inner .roller .list .item a:hover{text-decoration: underline;}.disc-section .inner .roller .list .item a.title{color: #000;margin-top: 8px;}.disc-section .inner .roller .list .item a.anchor{color: #666;}.disc-section .inner .control{position: absolute;top:71px;width: 17px;margin:auto 0;height: 17px;background:url(./images/main_sprite.png) ;}.disc-section .inner .control-left{left:2px;background-position:-260px -75px ;}.disc-section .inner .control-right{right: 2px;background-position:-320px -75px;}/*rank-section*/.rank-section .content{height: 472px;margin-top: 20px;background: url(./images/rank_bg.png) no-repeat;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div></body>
</html>

02_(掌握)网易云-排行榜封面展示

<!DOCTYPE html>
<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>网易云的主要区域</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/main-area-right.css"><style>.main .area {display: flex;justify-content: space-between;border: 1px solid #d3d3d3;border-width: 0 1px;background-image: url(./images/main_bg.png);}/* 左侧区域 */.main .area-left {width: 729px;padding: 20px 20px 40px;}.recommend-section .list{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 2px;}.recommend-section .list .item {width: 140px;margin-bottom: 30px;}.recommend-section .list .item .top {position: relative;}.recommend-section .list .item .top .cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: url(./images/cover_sprite.png);background-position: 0 0;}.recommend-section .list .item .top .info {position: absolute;bottom: 0;left: 0;right: 0;height: 27px;padding-left: 10px;line-height: 27px;font-size: 12px;color: #ccc;background-image: url(./images/cover_sprite.png);background-position: 0 -537px;}.recommend-section .list .item .top .info .icon-music {position: relative;top: 1px;/* display: inline-block; *//* width: 14px;height: 11px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 -24px; */}.recommend-section .list .item .top .info .count {margin-left: 4px;}.recommend-section .list .item .top .info .icon-play {position: absolute;top: 0;bottom: 0;right: 10px;margin: auto 0;/* display: inline-block; *//* width: 16px;height: 17px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 0; */}/* 底部的样式 */.recommend-section .list .item .bottom {display: block;margin-top: 8px;font-size: 14px;}.recommend-section .list .item .bottom:hover {text-decoration: underline;}.recommend-section .list .item .bottom .icon-radio{position: relative;top: 2px;}/*新碟上架*/.disc-section .content{height: 186px;margin:20px 0;box-sizing: border-box;border: 1px solid #d3d3d3;}.disc-section .content .inner{position: relative;height: 100%;box-sizing: border-box;padding:0 20px;border: 1px solid #fff;background-color: #f5f5f5;}.disc-section .content .inner .roller{display: flex;height: 100%;overflow: hidden;}.disc-section .inner .roller .list{display: flex;justify-content:space-between;align-items: center;width: 100%;padding-top: 10px;flex-shrink: 0;}.disc-section .inner .roller .list .item{width: 118px;height: 150px;background:url(./images/main_sprite.png) no-repeat -260px 100px;}.disc-section .inner .roller .list .item .album{position: relative;}.disc-section .inner .roller .list .item .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat 0 -570px;}.disc-section .inner .roller .list .item .album .play{display: none;position: absolute;right: 10px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .inner .roller .list .item .album:hover .play{display: block;}.disc-section .inner .roller .list .item a{display: block;margin-top: 5px;padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.disc-section .inner .roller .list .item a:hover{text-decoration: underline;}.disc-section .inner .roller .list .item a.title{color: #000;margin-top: 8px;}.disc-section .inner .roller .list .item a.anchor{color: #666;}.disc-section .inner .control{position: absolute;top:71px;width: 17px;margin:auto 0;height: 17px;background:url(./images/main_sprite.png) ;}.disc-section .inner .control-left{left:2px;background-position:-260px -75px ;}.disc-section .inner .control-right{right: 2px;background-position:-320px -75px;}/*rank-section*/.rank-section .content{display: flex;height: 472px;margin-top: 20px;background: url(./images/rank_bg.png) no-repeat;}.rank-section .content .rank{width: 230px;}.rank-section .content .rank .header{height: 120px;box-sizing: border-box;padding: 20px 0 0 19px;}.rank-section .content .rank .header .album{position: relative;width: 80px;height: 80px;}.rank-section .content .rank .header .album img{width: 100%;height: 100%;}.rank-section .content .rank .header .album .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background:url(./images/cover_sprite.png) no-repeat -145px -57px;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><dl class="rank up-rank"><dt class="header"><div class="album"><img class="album" src="./images/rank_up.jpeg" alt=""><a class="cover" href="#"></a></div></dt></dl><dl class="rank new-rank">2</dl><dl class="rank origin-rank">3</dl></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div></body>
</html>

03_(掌握)网易云-排行榜header中info展示

<!DOCTYPE html>
<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>网易云的主要区域</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/main-area-right.css"><style>.main .area {display: flex;justify-content: space-between;border: 1px solid #d3d3d3;border-width: 0 1px;background-image: url(./images/main_bg.png);}/* 左侧区域 */.main .area-left {width: 729px;padding: 20px 20px 40px;}.recommend-section .list{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 2px;}.recommend-section .list .item {width: 140px;margin-bottom: 30px;}.recommend-section .list .item .top {position: relative;}.recommend-section .list .item .top .cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: url(./images/cover_sprite.png);background-position: 0 0;}.recommend-section .list .item .top .info {position: absolute;bottom: 0;left: 0;right: 0;height: 27px;padding-left: 10px;line-height: 27px;font-size: 12px;color: #ccc;background-image: url(./images/cover_sprite.png);background-position: 0 -537px;}.recommend-section .list .item .top .info .icon-music {position: relative;top: 1px;/* display: inline-block; *//* width: 14px;height: 11px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 -24px; */}.recommend-section .list .item .top .info .count {margin-left: 4px;}.recommend-section .list .item .top .info .icon-play {position: absolute;top: 0;bottom: 0;right: 10px;margin: auto 0;/* display: inline-block; *//* width: 16px;height: 17px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 0; */}/* 底部的样式 */.recommend-section .list .item .bottom {display: block;margin-top: 8px;font-size: 14px;}.recommend-section .list .item .bottom:hover {text-decoration: underline;}.recommend-section .list .item .bottom .icon-radio{position: relative;top: 2px;}/*新碟上架*/.disc-section .content{height: 186px;margin:20px 0;box-sizing: border-box;border: 1px solid #d3d3d3;}.disc-section .content .inner{position: relative;height: 100%;box-sizing: border-box;padding:0 20px;border: 1px solid #fff;background-color: #f5f5f5;}.disc-section .content .inner .roller{display: flex;height: 100%;overflow: hidden;}.disc-section .inner .roller .list{display: flex;justify-content:space-between;align-items: center;width: 100%;padding-top: 10px;flex-shrink: 0;}.disc-section .inner .roller .list .item{width: 118px;height: 150px;background:url(./images/main_sprite.png) no-repeat -260px 100px;}.disc-section .inner .roller .list .item .album{position: relative;}.disc-section .inner .roller .list .item .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat 0 -570px;}.disc-section .inner .roller .list .item .album .play{display: none;position: absolute;right: 10px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .inner .roller .list .item .album:hover .play{display: block;}.disc-section .inner .roller .list .item a{display: block;margin-top: 5px;padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.disc-section .inner .roller .list .item a:hover{text-decoration: underline;}.disc-section .inner .roller .list .item a.title{color: #000;margin-top: 8px;}.disc-section .inner .roller .list .item a.anchor{color: #666;}.disc-section .inner .control{position: absolute;top:71px;width: 17px;margin:auto 0;height: 17px;background:url(./images/main_sprite.png) ;}.disc-section .inner .control-left{left:2px;background-position:-260px -75px ;}.disc-section .inner .control-right{right: 2px;background-position:-320px -75px;}/*rank-section*/.rank-section .content{display: flex;height: 472px;margin-top: 20px;background: url(./images/rank_bg.png) no-repeat;}.rank-section .content .rank{width: 230px;}.rank-section .content .rank .header{display: flex;height: 120px;box-sizing: border-box;padding: 20px 0 0 20px;}.rank-section .content .rank .header .album{position: relative;width: 80px;height: 80px;}.rank-section .content .rank .header .album img{width: 100%;height: 100%;}.rank-section .content .rank .header .album .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background:url(./images/cover_sprite.png) no-repeat -145px -57px;}.rank-section .content .rank .header .info{padding: 10px 0 0 12px;}.rank-section .content .rank .header .info .title{color:#333;}.rank-section .content .rank .header .info .operation{margin-top: 12px;}.rank-section .content .rank .header .info .btn{display: inline-block;width: 22px;height: 22px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .content .rank .header .info .btn.play{background-position:-267px -205px;}.rank-section .content .rank .header .info .btn.play:hover{background-position: -267px -235px;}.rank-section .content .rank .header .info .btn.favor{background-position: -300px -205px;margin-left: 8px;}.rank-section .content .rank .header .info .btn.favor:hover{background-position:-300px -235px;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><dl class="rank up-rank"><dt class="header"><div class="album"><img class="album" src="./images/rank_up.jpeg" alt=""><a class="cover" href="#"></a></div><div class="info"><h3 class="title">飙升榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt></dl><dl class="rank new-rank">2</dl><dl class="rank origin-rank">3</dl></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div></body>
</html>

04_(掌握)网易云-排行榜列表的展示

<!DOCTYPE html>
<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>网易云的主要区域</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/main-area-right.css"><style>.main .area {display: flex;justify-content: space-between;border: 1px solid #d3d3d3;border-width: 0 1px;background-image: url(./images/main_bg.png);}/* 左侧区域 */.main .area-left {width: 729px;padding: 20px 20px 40px;}.recommend-section .list{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 2px;}.recommend-section .list .item {width: 140px;margin-bottom: 30px;}.recommend-section .list .item .top {position: relative;}.recommend-section .list .item .top .cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: url(./images/cover_sprite.png);background-position: 0 0;}.recommend-section .list .item .top .info {position: absolute;bottom: 0;left: 0;right: 0;height: 27px;padding-left: 10px;line-height: 27px;font-size: 12px;color: #ccc;background-image: url(./images/cover_sprite.png);background-position: 0 -537px;}.recommend-section .list .item .top .info .icon-music {position: relative;top: 1px;/* display: inline-block; *//* width: 14px;height: 11px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 -24px; */}.recommend-section .list .item .top .info .count {margin-left: 4px;}.recommend-section .list .item .top .info .icon-play {position: absolute;top: 0;bottom: 0;right: 10px;margin: auto 0;/* display: inline-block; *//* width: 16px;height: 17px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 0; */}/* 底部的样式 */.recommend-section .list .item .bottom {display: block;margin-top: 8px;font-size: 14px;}.recommend-section .list .item .bottom:hover {text-decoration: underline;}.recommend-section .list .item .bottom .icon-radio{position: relative;top: 2px;}/*新碟上架*/.disc-section .content{height: 186px;margin:20px 0;box-sizing: border-box;border: 1px solid #d3d3d3;}.disc-section .content .inner{position: relative;height: 100%;box-sizing: border-box;padding:0 20px;border: 1px solid #fff;background-color: #f5f5f5;}.disc-section .content .inner .roller{display: flex;height: 100%;overflow: hidden;}.disc-section .inner .roller .list{display: flex;justify-content:space-between;align-items: center;width: 100%;padding-top: 10px;flex-shrink: 0;}.disc-section .inner .roller .list .item{width: 118px;height: 150px;background:url(./images/main_sprite.png) no-repeat -260px 100px;}.disc-section .inner .roller .list .item .album{position: relative;}.disc-section .inner .roller .list .item .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat 0 -570px;}.disc-section .inner .roller .list .item .album .play{display: none;position: absolute;right: 10px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .inner .roller .list .item .album:hover .play{display: block;}.disc-section .inner .roller .list .item a{display: block;margin-top: 5px;padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.disc-section .inner .roller .list .item a:hover{text-decoration: underline;}.disc-section .inner .roller .list .item a.title{color: #000;margin-top: 8px;}.disc-section .inner .roller .list .item a.anchor{color: #666;}.disc-section .inner .control{position: absolute;top:71px;width: 17px;margin:auto 0;height: 17px;background:url(./images/main_sprite.png) ;}.disc-section .inner .control-left{left:2px;background-position:-260px -75px ;}.disc-section .inner .control-right{right: 2px;background-position:-320px -75px;}/*rank-section*/.rank-section .content{display: flex;height: 472px;margin-top: 20px;background: url(./images/rank_bg.png) no-repeat;}.rank-section .content .rank{width: 230px;}.rank-section .content .rank .header{display: flex;height: 120px;box-sizing: border-box;padding: 20px 0 0 20px;}.rank-section .content .rank .header .album{position: relative;width: 80px;height: 80px;}.rank-section .content .rank .header .album img{width: 100%;height: 100%;}.rank-section .content .rank .header .album .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background:url(./images/cover_sprite.png) no-repeat -145px -57px;}.rank-section .content .rank .header .info{padding: 10px 0 0 12px;}.rank-section .content .rank .header .info .title{color:#333;}.rank-section .content .rank .header .info .operation{margin-top: 12px;}.rank-section .content .rank .header .info .btn{display: inline-block;width: 22px;height: 22px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .content .rank .header .info .btn.play{background-position:-267px -205px;}.rank-section .content .rank .header .info .btn.play:hover{background-position: -267px -235px;}.rank-section .content .rank .header .info .btn.favor{background-position: -300px -205px;margin-left: 8px;}.rank-section .content .rank .header .info .btn.favor:hover{background-position:-300px -235px;}.rank-section .rank .list .item{display: flex;height: 32px;line-height: 32px;padding-left: 12px;}.rank-section .rank .list .item .no{width: 35px;font-size: 16px;color: #666;text-align: center;}.rank-section .rank .list .item .song{flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.rank-section .rank .list .item .song:hover{text-decoration: underline;}.rank-section .rank .list .item .operation{display: flex;align-items: center;width: 82px;}.rank-section .rank .list .item .operation .btn{width: 17px;height: 17px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .rank .list .item .operation .btn.play{background-position: -267px -268px;}.rank-section .rank .list .item .operation .btn.add{background: url(./images/iconall_sprite.png) no-repeat;background-position: 0 -700px;}.rank-section .rank .list .item .operation .btn.favor{background-position: -297px -268px;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><dl class="rank up-rank"><dt class="header"><div class="album"><img class="album" src="./images/rank_up.jpeg" alt=""><a class="cover" href="#"></a></div><div class="info"><h3 class="title">飙升榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list" ><ol><li class="item"><span class="no">1</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol></dd>         </dl><dl class="rank new-rank">2</dl><dl class="rank origin-rank">3</dl></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div></body>
</html>

05_(掌握)网易云-排行榜列表的操作按钮

<!DOCTYPE html>
<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>网易云的主要区域</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/main-area-right.css"><style>.main .area {display: flex;justify-content: space-between;border: 1px solid #d3d3d3;border-width: 0 1px;background-image: url(./images/main_bg.png);}/* 左侧区域 */.main .area-left {width: 729px;padding: 20px 20px 40px;}.recommend-section .list{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 2px;}.recommend-section .list .item {width: 140px;margin-bottom: 30px;}.recommend-section .list .item .top {position: relative;}.recommend-section .list .item .top .cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: url(./images/cover_sprite.png);background-position: 0 0;}.recommend-section .list .item .top .info {position: absolute;bottom: 0;left: 0;right: 0;height: 27px;padding-left: 10px;line-height: 27px;font-size: 12px;color: #ccc;background-image: url(./images/cover_sprite.png);background-position: 0 -537px;}.recommend-section .list .item .top .info .icon-music {position: relative;top: 1px;/* display: inline-block; *//* width: 14px;height: 11px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 -24px; */}.recommend-section .list .item .top .info .count {margin-left: 4px;}.recommend-section .list .item .top .info .icon-play {position: absolute;top: 0;bottom: 0;right: 10px;margin: auto 0;/* display: inline-block; *//* width: 16px;height: 17px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 0; */}/* 底部的样式 */.recommend-section .list .item .bottom {display: block;margin-top: 8px;font-size: 14px;}.recommend-section .list .item .bottom:hover {text-decoration: underline;}.recommend-section .list .item .bottom .icon-radio{position: relative;top: 2px;}/*新碟上架*/.disc-section .content{height: 186px;margin:20px 0;box-sizing: border-box;border: 1px solid #d3d3d3;}.disc-section .content .inner{position: relative;height: 100%;box-sizing: border-box;padding:0 20px;border: 1px solid #fff;background-color: #f5f5f5;}.disc-section .content .inner .roller{display: flex;height: 100%;overflow: hidden;}.disc-section .inner .roller .list{display: flex;justify-content:space-between;align-items: center;width: 100%;padding-top: 10px;flex-shrink: 0;}.disc-section .inner .roller .list .item{width: 118px;height: 150px;background:url(./images/main_sprite.png) no-repeat -260px 100px;}.disc-section .inner .roller .list .item .album{position: relative;}.disc-section .inner .roller .list .item .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat 0 -570px;}.disc-section .inner .roller .list .item .album .play{display: none;position: absolute;right: 10px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .inner .roller .list .item .album:hover .play{display: block;}.disc-section .inner .roller .list .item a{display: block;margin-top: 5px;padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.disc-section .inner .roller .list .item a:hover{text-decoration: underline;}.disc-section .inner .roller .list .item a.title{color: #000;margin-top: 8px;}.disc-section .inner .roller .list .item a.anchor{color: #666;}.disc-section .inner .control{position: absolute;top:71px;width: 17px;margin:auto 0;height: 17px;background:url(./images/main_sprite.png) ;}.disc-section .inner .control-left{left:2px;background-position:-260px -75px ;}.disc-section .inner .control-right{right: 2px;background-position:-320px -75px;}/*rank-section*/.rank-section .content{display: flex;height: 472px;margin-top: 20px;background: url(./images/rank_bg.png) no-repeat;}.rank-section .content .rank{width: 230px;}.rank-section .content .rank .header{display: flex;height: 120px;box-sizing: border-box;padding: 20px 0 0 20px;}.rank-section .content .rank .header .album{position: relative;width: 80px;height: 80px;}.rank-section .content .rank .header .album img{width: 100%;height: 100%;}.rank-section .content .rank .header .album .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background:url(./images/cover_sprite.png) no-repeat -145px -57px;}.rank-section .content .rank .header .info{padding: 10px 0 0 12px;}.rank-section .content .rank .header .info .title{color:#333;}.rank-section .content .rank .header .info .operation{margin-top: 12px;}.rank-section .content .rank .header .info .btn{display: inline-block;width: 22px;height: 22px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .content .rank .header .info .btn.play{background-position:-267px -205px;}.rank-section .content .rank .header .info .btn.play:hover{background-position: -267px -235px;}.rank-section .content .rank .header .info .btn.favor{background-position: -300px -205px;margin-left: 8px;}.rank-section .content .rank .header .info .btn.favor:hover{background-position:-300px -235px;}.rank-section .rank .list .item{display: flex;height: 32px;line-height: 32px;padding-left: 12px;padding-right: 5px;}.rank-section .rank .list .item .no{width: 35px;font-size: 16px;color: #666;text-align: center;}.rank-section .rank .list .item .song{flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.rank-section .rank .list .item:nth-child(-n+3) .no{color: #e10d0c;}.rank-section .rank .list .item .song:hover{text-decoration: underline;}.rank-section .rank .list .item:hover .operation{display: flex;}.rank-section .rank .list .item .operation{display: none;align-items: center;width: 82px;}.rank-section .rank .list .item .operation .btn{width: 17px;height: 17px;margin-right: 8px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .rank .list .item .operation .btn.play{background-position: -267px -268px;}.rank-section .rank .list .item .operation .btn.add{background: url(./images/iconall_sprite.png) no-repeat;background-position: 2px -698px;}.rank-section .rank .list .item .operation .btn.favor{background-position: -297px -268px;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><dl class="rank up-rank"><dt class="header"><div class="album"><img class="album" src="./images/rank_up.jpeg" alt=""><a class="cover" href="#"></a></div><div class="info"><h3 class="title">飙升榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list" ><ol><li class="item"><span class="no">1</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">3</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">4</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">5</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">6</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">7</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">8</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol></dd>         </dl><dl class="rank new-rank">2</dl><dl class="rank origin-rank">3</dl></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div></body>
</html>

06_(掌握)网易云-排行榜查看全部

<!DOCTYPE html>
<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>网易云的主要区域</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/main-area-right.css"><style>.main .area {display: flex;justify-content: space-between;border: 1px solid #d3d3d3;border-width: 0 1px;background-image: url(./images/main_bg.png);}/* 左侧区域 */.main .area-left {width: 729px;padding: 20px 20px 40px;}.recommend-section .list{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px 2px;}.recommend-section .list .item {width: 140px;margin-bottom: 30px;}.recommend-section .list .item .top {position: relative;}.recommend-section .list .item .top .cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-image: url(./images/cover_sprite.png);background-position: 0 0;}.recommend-section .list .item .top .info {position: absolute;bottom: 0;left: 0;right: 0;height: 27px;padding-left: 10px;line-height: 27px;font-size: 12px;color: #ccc;background-image: url(./images/cover_sprite.png);background-position: 0 -537px;}.recommend-section .list .item .top .info .icon-music {position: relative;top: 1px;/* display: inline-block; *//* width: 14px;height: 11px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 -24px; */}.recommend-section .list .item .top .info .count {margin-left: 4px;}.recommend-section .list .item .top .info .icon-play {position: absolute;top: 0;bottom: 0;right: 10px;margin: auto 0;/* display: inline-block; *//* width: 16px;height: 17px; *//* background-image: url(../images/music_sprite_02.png); *//* background-position: 0 0; */}/* 底部的样式 */.recommend-section .list .item .bottom {display: block;margin-top: 8px;font-size: 14px;}.recommend-section .list .item .bottom:hover {text-decoration: underline;}.recommend-section .list .item .bottom .icon-radio{position: relative;top: 2px;}/*新碟上架*/.disc-section .content{height: 186px;margin:20px 0;box-sizing: border-box;border: 1px solid #d3d3d3;}.disc-section .content .inner{position: relative;height: 100%;box-sizing: border-box;padding:0 20px;border: 1px solid #fff;background-color: #f5f5f5;}.disc-section .content .inner .roller{display: flex;height: 100%;overflow: hidden;}.disc-section .inner .roller .list{display: flex;justify-content:space-between;align-items: center;width: 100%;padding-top: 10px;flex-shrink: 0;}.disc-section .inner .roller .list .item{width: 118px;height: 150px;background:url(./images/main_sprite.png) no-repeat -260px 100px;}.disc-section .inner .roller .list .item .album{position: relative;}.disc-section .inner .roller .list .item .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(./images/cover_sprite.png) no-repeat 0 -570px;}.disc-section .inner .roller .list .item .album .play{display: none;position: absolute;right: 10px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .inner .roller .list .item .album:hover .play{display: block;}.disc-section .inner .roller .list .item a{display: block;margin-top: 5px;padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.disc-section .inner .roller .list .item a:hover{text-decoration: underline;}.disc-section .inner .roller .list .item a.title{color: #000;margin-top: 8px;}.disc-section .inner .roller .list .item a.anchor{color: #666;}.disc-section .inner .control{position: absolute;top:71px;width: 17px;margin:auto 0;height: 17px;background:url(./images/main_sprite.png) ;}.disc-section .inner .control-left{left:2px;background-position:-260px -75px ;}.disc-section .inner .control-right{right: 2px;background-position:-320px -75px;}/*rank-section*/.rank-section .content{display: flex;height: 472px;margin-top: 20px;background: url(./images/rank_bg.png) no-repeat;}.rank-section .content .rank{width: 230px;}.rank-section .content .rank .header{display: flex;height: 120px;box-sizing: border-box;padding: 20px 0 0 20px;}.rank-section .content .rank .header .album{position: relative;width: 80px;height: 80px;}.rank-section .content .rank .header .album img{width: 100%;height: 100%;}.rank-section .content .rank .header .album .cover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background:url(./images/cover_sprite.png) no-repeat -145px -57px;}.rank-section .content .rank .header .info{padding: 10px 0 0 12px;}.rank-section .content .rank .header .info .title{color:#333;}.rank-section .content .rank .header .info .operation{margin-top: 12px;}.rank-section .content .rank .header .info .btn{display: inline-block;width: 22px;height: 22px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .content .rank .header .info .btn.play{background-position:-267px -205px;}.rank-section .content .rank .header .info .btn.play:hover{background-position: -267px -235px;}.rank-section .content .rank .header .info .btn.favor{background-position: -300px -205px;margin-left: 8px;}.rank-section .content .rank .header .info .btn.favor:hover{background-position:-300px -235px;}.rank-section .rank .list{padding-left: 12px;}.rank-section .rank .list .item{display: flex;height: 32px;line-height: 32px;padding-right: 5px;}.rank-section .rank .list .item .no{width: 35px;font-size: 16px;color: #666;text-align: center;}.rank-section .rank .list .item .song{flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.rank-section .rank .list .item:nth-child(-n+3) .no{color: #e10d0c;}.rank-section .rank .list .item .song:hover{text-decoration: underline;}.rank-section .rank .list .item:hover .operation{display: flex;}.rank-section .rank .list .item .operation{display: none;align-items: center;width: 82px;}.rank-section .rank .list .item .operation .btn{width: 17px;height: 17px;margin-right: 8px;background: url(./images/main_sprite.png) no-repeat;}.rank-section .rank .list .item .operation .btn.play{background-position: -267px -268px;}.rank-section .rank .list .item .operation .btn.add{background: url(./images/iconall_sprite.png) no-repeat;background-position: 2px -698px;}.rank-section .rank .list .item .operation .btn.favor{background-position: -297px -268px;}.rank-section .rank .list .more{height: 32px;line-height: 32px;text-align: right;padding-right: 32px;}.rank-section .rank .list .more a:hover{text-decoration: underline;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite .icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">春龙交响夜2024春龙交响夜2025</a><a class="anchor" href="#">dia</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><dl class="rank up-rank"><dt class="header"><div class="album"><img class="album" src="./images/rank_up.jpeg" alt=""><a class="cover" href="#"></a></div><div class="info"><h3 class="title">飙升榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list" ><ol><li class="item"><span class="no">1</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">3</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">4</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">5</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">6</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">7</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">8</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd>         </dl><dl class="rank new-list"><dt class="header"><div class="album"><img class="album" src="./images/rank_new.jpeg" alt=""><a class="cover" href="#"></a></div><div class="info"><h3 class="title">新歌榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list" ><ol><li class="item"><span class="no">1</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">3</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">4</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">5</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">6</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">7</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">8</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd>         </dl><dl class="rank origin-list"><dt class="header"><div class="album"><img class="album" src="./images/rank_origin.jpeg" alt=""><a class="cover" href="#"></a></div><div class="info"><h3 class="title">原创榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list" ><ol><li class="item"><span class="no">1</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">3</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">4</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">5</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">6</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">7</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">8</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">在等冬天（lalalllla）</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd>         </dl></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div></body>
</html>

07_(掌握)网易云音乐所有内容合并

完整代码：index.html

<!DOCTYPE html>
<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>网易云音乐</title><link rel="shortcut icon" href="//s1.music.126.net/style/favicon.ico?v20180823"><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/page_header.css"><link rel="stylesheet" href="./css/page_banner.css"><link rel="stylesheet" href="./css/page_main.css"><link rel="stylesheet" href="./css/page_main_right.css"><link rel="stylesheet" href="./css/page_main_left.css"></head>
<body><!-- header部分: top/nav --><div class="header"><div class="top"><div class="topbar wrapper_01"><div class="bar-left"><h1 class="logo"><a href="#">网易云音乐</a></h1><ul class="list"><li><a href="#" class="item active">发现音乐</a></li><li><a href="#" class="item">我的音乐</a></li><li><a href="#" class="item">关注</a></li><li><a href="#" class="item">商城</a></li><li><a href="#" class="item">音乐人</a></li><li><a href="#" class="item">下载客户端<i class="topbar_sprite topbar_icon_hot icon-hot"></i></a></li></ul></div><div class="bar-right"><div class="search"><input type="text" placeholder="音乐/视频/电台/用户"></div><div class="anthor"><a href="#">创作者中心</a></div><div class="login"><a href="#">登录</a></div></div></div></div><div class="nav"><div class="navbar wrapper_01"><!-- 如果block元素中是没有内容, 那么line-height继承过来也是不生效 --><!-- ul>(li>a[href=#].item)*6 --><ul class="list"><li><a href="#" class="item active"><span>推荐</span></a></li><li><a href="#" class="item"><span>排行榜</span></a></li><li><a href="#" class="item"><span>歌单</span></a></li><li><a href="#" class="item"><span>主播电台</span></a></li><li><a href="#" class="item"><span>歌手</span></a></li><li><a href="#" class="item"><span>新碟上架</span></a></li></ul></div></div></div><!-- banner部分 --><div class="banner"><div class="area wrapper_03"><div class="area-left"><ul class="img-list"><li><a class="item" href="#"><img src="./images/banner_02.jpeg" alt=""></a></li><li><a class="item" href="#"><img src="./images/banner_02.jpeg" alt=""></a></li><li><a class="item" href="#"><img src="./images/banner_02.jpeg" alt=""></a></li><li><a class="item" href="#"><img src="./images/banner_02.jpeg" alt=""></a></li></ul><ul class="dots-list"><li><a class="item active" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li><li><a class="item" href=""></a></li></ul></div><div class="area-right"><a class="download" href="#">下载客户端</a><p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p></div><a class="control  left" href="#"></a><a class="control right" href="#"></a></div></div><!-- main部分 --><div class="main"><div class="area wrapper_02"><div class="area-left"><div class="recommend-section"><div class="header_type_02"><div class="area_left"><h2 class="title">热门推荐</h2><ul class="keywords"><li><a class="item" href="#">华语</a></li><li class="line">|</li><li><a class="item" href="#">流行</a></li><li class="line">|</li><li><a class="item" href="#">摇滚</a></li><li class="line">|</li><li><a class="item" href="#">民谣</a></li><li class="line">|</li><li><a class="item" href="#">电子</a></li></ul></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="list"><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#">天气好的话，把耳机分给我一半吧</a></div><div class="item"><div class="top"><img src="./images/recommend_album_01.jpeg" alt="音乐封面"><a class="cover" href="#"></a><div class="info"><i class="icon_sprite icon_sprite_music icon-music"></i><span class="count">62万</span><i class="icon_sprite icon_sprite_play_01 icon-play"></i></div></div><a class="bottom" href="#"><i class="iconall_sprite iconall_sprite_radio icon-radio"></i>天气好的话，把耳机分给我一半吧</a></div></div></div><div class="disc-section"><div class="header_type_02"><div class="area_left"><h2 class="title">新碟上架</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><div class="inner"><div class="roller"><ul class="list"><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li><li class="item"><div class="album"><img src="./images/newdisc_album_01.jpeg" alt=""><a class="cover" href="#"></a><a class="play" href="#"></a></div><a class="title" href="#">原神-佚落迁忘之岛 Islands of the Lost and Forgotten</a><a class="anchor" href="#">HOYO-MiX</a></li></ul><ul class="list">2</ul></div><a class="control control-left" href="#"></a><a class="control control-right" href="#"></a></div></div></div><div class="rank-section"><div class="header_type_02"><div class="area_left"><h2 class="title">榜单</h2></div><div class="area_right"><a class="more" href="#">更多</a></div></div><div class="content"><dl class="rank up-rank"><dt class="header"><div class="album"><img src="./images/rank_up.jpeg" alt="飙升榜"><a class="cover" href="#"></a></div><div class="info"><h3 class="title">飙升榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list"><ol><li class="item"><!-- Java: Student -> sno(numero序号) --><span class="no">1</span><a class="song" href="#">再等冬天(Memories)</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd></dl><dl class="rank up-rank"><dt class="header"><div class="album"><img src="./images/rank_new.jpeg" alt="新歌榜"><a class="cover" href="#"></a></div><div class="info"><h3 class="title">新歌榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list new-list"><ol><li class="item"><!-- Java: Student -> sno(numero序号) --><span class="no">1</span><a class="song" href="#">再等冬天(Memories)</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd></dl><dl class="rank origin-rank"><dt class="header"><div class="album"><img src="./images/rank_origin.jpeg" alt="原创榜"><a class="cover" href="#"></a></div><div class="info"><h3 class="title">原创榜</h3><div class="operation"><a class="btn play" href="#"></a><a class="btn favor" href="#"></a></div></div></dt><dd class="list up-list"><ol><li class="item"><!-- Java: Student -> sno(numero序号) --><span class="no">1</span><a class="song" href="#">再等冬天(Memories)</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">2</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">9</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li><li class="item"><span class="no">10</span><a class="song" href="#">再等冬天</a><div class="operation"><a class="btn play" href="#"></a><a class="btn add" href="#"></a><a class="btn favor" href="#"></a></div></li></ol><div class="more"><a href="#">查看全部 &gt;</a></div></dd></dl></div></div></div><div class="area-right"><div class="user-login"><p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a class="btn" href="#">用户登录</a></div><div class="settle-singer"><div class="header_type_01"><h3 class="title">入驻歌手</h3><a class="more" href="#">查看全部 &gt;</a></div><ul class="list"><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹发发到付发发</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li><li><a class="item" href="#"><div class="album"><img src="./images/singer_01.jpeg" alt=""></div><div class="info"><div class="singer">张惠妹aMEI</div><div class="desc">台湾歌手张惠妹</div></div></a></li></ul></div><div class="hot-anchor"><div class="header_type_01"><h3 class="title">热门主播</h3></div></div></div></div></div><!-- footer部分(作业) --></body>
</html>

16.[前端开发]Day16-HTML+CSS阶段练习(网易云音乐五)

完整代码网易云-main-left-rank（排行榜） <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name&q…...

编程日记 2025/2/2 12:00:13

langchain 实现多智能体多轮对话

这里写目录标题工具定义模型选择graph节点函数定义graph 运行工具定义 import random from typing import Annotated, Literalfrom langchain_core.tools import tool from langchain_core.tools.base import InjectedToolCallId from langgraph.prebuilt import InjectedSt…...

编程日记 2025/2/2 11:55:07

Java-数据结构-优先级队列(堆)

一、优先级队列 ① 什么是优先级队列？ 在此之前，我们已经学习过了"队列"的相关知识，我们知道"队列"是一种"先进先出"的数据结构，我们还学习过"栈"，是"后进先出"的…...

编程日记 2025/2/2 11:52:05

C++实现状态模式

首先上代码： #include <iostream> #include <memory>class Context;class State { public:virtual void Handle(Context * context) 0; //纯虚函数virtual ~State() default; //虚析构函数 };//创建状态A class ConcreateStateA : public State{…...

编程日记 2025/2/2 11:46:59

FreeRTOS学习笔记2：FreeRTOS的基础知识

1.FreeRTOS介绍 FreeRTOS是一个免费的嵌入式实时操作系统，同时它在市面上也是一款主流的操作系统，是工作上必不可少的技能。它具有以下六种特点： 1.免费开源：在商业产品中使用，无潜在商业风险，无需担心。 2…...

编程日记 2025/2/2 11:45:58

计算机网络之计算机网络的分类

计算机网络可以根据不同的角度进行分类，以下是几种常见的分类方式： 1. 按照规模和范围： 局域网（LAN，Local Area Network）：覆盖较小范围（例如一个建筑物或校园）&#xf…...

编程日记 2025/2/2 11:44:57

从理论到实践：Linux 进程替换与 exec 系列函数

个人主页：chian-ocean 文章专栏-Linux 前言： 在Linux中，进程替换（Process Substitution）是一个非常强大的特性，它允许将一个进程的输出直接当作一个文件来处理。这种技术通常用于Shell脚本和命令行操作中…...

编程日记 2025/2/2 11:40:53

Flutter常用Widget小部件

小部件Widget是一个类，按照继承方式，分为无状态的StatelessWidget和有状态的StatefulWidget。这里先创建一个简单的无状态的Text小部件。 Text文本Widget 文件：lib/app/app.dart。 import package:flutter/material.dart;class App exte…...

编程日记 2025/2/2 11:37:48

微信小程序实战0 设置

1.调节模拟器到右侧位置 2.设置编辑页面的字体和行距。...

编程日记 2025/2/2 11:35:45

2025开源DouyinLiveRecorder全平台直播间录制工具整合包，多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存

一、DouyinLiveRecorder软件介绍（文末提供下载） 官方地址：GitHub - ihmily/DouyinLiveRecorder 本文信息来源于作者GitHub地址一款简易的可循环值守的直播录制工具，基于FFmpeg实现多平台直播源录制，支持自定义配置录制…...

编程日记 2025/2/2 11:34:43

使用 postman 测试思源笔记接口

思源笔记 API 权鉴官方文档-中文：https://github.com/siyuan-note/siyuan/blob/master/API_zh_CN.md 权鉴相关介绍截图： 对应的xxx，在软件中查看如上图：在每次发送 API 请求时，需要在 Header 中添加以下键值对&a…...

编程日记 2025/2/2 11:30:39

当WebGIS遇到智慧文旅-以长沙市不绕路旅游攻略为例

目录前言一、旅游数据组织 1、旅游景点信息 2、路线时间推荐二、WebGIS可视化实现 1、态势标绘实现 2、相关位置展示三、成果展示 1、第一天旅游路线 2、第二天旅游路线 3、第三天旅游路线 4、交通、订票、住宿指南四、总结前言随着信息技术的飞速发展&…...

编程日记 2025/2/2 11:29:36

阿里最新普通x231 逆向分析

声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向前言 12月份的时候更新了过一次…...

编程日记 2025/2/2 11:20:20

php的使用及storm环境部署

php语法环境搭建：在小皮中新建网站，注意先填写域名再点击选择根目录。成功创建网站后，打开发现forbidden，因为新建的网站里是空的，需要新建index.php文件----> 在Phpstorm中左上角打开文件，打开那个文…...

编程日记 2025/2/2 11:15:14

高可用 Keepalived 服务部署流程

一、配置文件 vim /etc/keepalived/keepalived.confGLOBAL CONFIGURATION --- 全局配置部分VRRPD CONFIGURATION --- VRRP协议配置部分LVS CONFIGURATION --- LVS服务管理配置部分[rootlb01 ~]# cat /etc/keepalived/keepalived.…...

编程日记 2025/2/2 11:14:13

【新春特辑】2025年1月科技浪潮中的AI最新时事与科技趋势

2025年1月科技浪潮中的AI最新时事与科技趋势一、AI科技时事人工智能代理（AI Agent）的发展最新进展：人工智能代理正逐步成为科技领域的新热点。这些代理能够自主执行特定任务，如管理日程、回复邮件等。然而，它们仍…...

编程日记 2025/2/2 11:06:05

解决Django非ORM模型提示初始化request问题

提问 Django在DRF时候自定义显示一些非model的字段提示TypeError: Field.__init__() got an unexpected keyword argument request 解答1 错误提示 TypeError: Field.__init__() got an unexpected keyword argument request 显示在创建序列化器实例时，传递了一个…...

编程日记 2025/2/2 11:05:04

G. XOUR

题目链接：Problem - G - Codeforces 题目大意：给你一个n长的序列， 其中你可以将a[i] XOR a[j] 的值严格小于4的数对进行交换。你可以操作任何几次， 让最后的数列最小。如果在 x 和 y 不同的第一个位置， xi<yi &…...

编程日记 2025/2/2 11:04:03

有没有个性化的UML图例

绿萝小绿萝 (53****338) 2012-05-10 11:55:45 各位大虾，有没有个性化的UML图例绿萝小绿萝 (53****338) 2012-05-10 11:56:03 例如部署图或时序图的图例潘加宇 (35***47) 2012-05-10 12:24:31 "个性化"指的是？ 你的意思使用你自己的图标&…...

编程日记 2025/2/2 11:02:01

【RAG】SKLearnVectorStore 避免使用gpt4all会connection err

gpt4all 列表中包含了多个开源的大模型，如 Qwen2.5、Llama 3、DeepSeek、Mistral 等，但不包含 OpenAI 的 GPT-4o。GPT-4o 是 OpenAI 提供的闭源模型，目前只能通过 OpenAI API 或 ChatGPT 官方应用（网页版、移动端）访问，并不支持本地运行，也没有 GGUF 量化格式的模型文件…...

编程日记 2025/2/2 11:01:00

vue框架技术相关概述以及前端框架整合

vue框架技术概述及前端框架整合 1 node.js 介绍：什么是node.js Node.js就是运行在服务端的JavaScript。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎。作用 1 运行java需要安装JDK，而Node.js是JavaScript的运行环…...

编程日记 2025/2/2 10:57:56

Spring Boot + Facade Pattern : 通过统一接口简化多模块业务

文章目录 Pre概述在编程中，外观模式是如何工作的？外观设计模式 UML 类图外观类和子系统的关系优点案例外观模式在复杂业务中的应用实战运用1. 项目搭建与基础配置2. 构建子系统组件航班服务酒店服务旅游套餐服务 3. 创建外观类4. 在 Controller 中使用外…...

编程日记 2025/2/2 10:54:52

牛客周赛 Round 78

题目目录 A-时间表查询！解题思路参考代码 B-一起做很甜的梦！解题思路参考代码 C-翻之解题思路参考代码 D-乘之解题思路参考代码 E-在树上游玩解题思路参考代码 A-时间表查询！ \hspace{15pt} 今天是2025年1月25日，今年的六场牛客寒…...

编程日记 2025/2/2 10:50:47

【机器学习】自定义数据集，使用朴素贝叶斯对其进行分类

一、贝叶斯原理贝叶斯算法是基于贝叶斯公式的，其公式为： 其中叫做先验概率，叫做条件概率，叫做观察概率，叫做后验概率，也是我们求解的结果，通过比较后验概率的大小，将后验概率最大的…...

编程日记 2025/2/2 10:46:41

02.01 生产者消费者

请使用条件变量实现2生产者2消费者模型，注意1个生产者在生产的时候，另外一个生产者不能生产。 1>程序代码 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> #include <sys/types.h>…...

编程日记 2025/2/2 10:44:38