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

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

article 2026/5/8 23:22:44

完整代码

网易云-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…...

编程日记 2026/4/29 19:11:28

ARM嵌入式学习--第十天（UART）

--UART介绍 UART(Universal Asynchonous Receiver and Transmitter)通用异步接收器，是一种通用串行数据总线，用于异步通信。该总线双向通信，可以实现全双工传输和接收。在嵌入式设计中，UART用来与PC进行通信，包括与监控…...

编程日记 2026/5/7 17:19:17

MoonBit 编译器 MoonBit 是一个用户友好，构建快，产出质量高的编程语言。 MoonBit | Documentation | Tour | Core This is the source code repository for MoonBit, a programming language that is user-friendly, builds fast, and produces high q…...

编程日记 2026/2/21 8:57:40

【TypeScript】基础：数据类型

文章目录 TypeScript一、简介二、类型声明三、数据类型anyunknownnervervoidobjecttupleenumType一些特殊情况 TypeScript 是JavaScript的超集，代码量比JavaScript复杂、繁多；但是结构更清晰一、简介为什么需要TypeScript？ JavaScript的…...

编程日记 2025/5/20 8:07:45

Unity游戏(Assault空对地打击)开发(3) 摄像机的控制

详细步骤打开My Assets或者Package Manager。选择Unity Registry。搜索Cinemachine，找到 Cinemachine包，点击 Install按钮进行安装。关闭窗口，新建一个FreeLook Camera，如下。接着新建一个对象Pos，拖到Player下面…...

编程日记 2026/5/1 11:29:48

【HarmonyOS之旅】基于ArkTS开发(三) -＞兼容JS的类Web开发(三)

目录 1 -> 生命周期 1.1 -> 应用生命周期 1.2 -> 页面生命周期 2 -> 资源限定与访问 2.1 -> 资源限定词 2.2 -> 资源限定词的命名要求 2.3 -> 限定词与设备状态的匹配规则 2.4 -> 引用JS模块内resources资源 3 -> 多语言支持 3.1 -> 定…...

编程日记 2026/5/8 12:56:53

小程序-基础加强-自定义组件

前言这次讲自定义组件 1. 准备今天要用到的项目 2. 初步创建并使用自定义组件这样就成功在home中引入了test组件在json中引用了这个组件才能用这个组件现在我们来实现全局引用组件在app.json这样使用就可以了 3. 自定义组件的样式发现页面里面的文本和组件里面的文…...

编程日记 2026/5/1 2:01:32

尝试ai生成figma设计

当听到用ai 自动生成figma设计时，不免好奇这个是如何实现的。在查阅了不少资料后，有了一些想法。参考了：在figma上使用脚本自动生成色谱这篇文章提供的主要思路是：可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本…...

编程日记 2026/5/8 20:36:38

【周易哲学】生辰八字入门讲解（八）

😊你好，我是小航，一个正在变秃、变强的文艺倾年。 🔔本文讲解【周易哲学】生辰八字入门讲解，期待与你一同探索、学习、进步，一起卷起来叭！ 目录一、六亲女命六亲星六亲宫位相互关系男命六亲星…...

编程日记 2026/5/7 15:41:54

康德哲学与自组织思想的渊源：从《判断力批判》到系统论的桥梁

康德哲学与自组织思想的渊源：从《判断力批判》到系统论的桥梁第一节：康德哲学中的自然目的论与自组织思想核心内容： 康德哲学中的自然目的论和反思判断力概念，为现代系统论中的自组织思想提供了哲学基础，预见了复…...

编程日记 2026/2/21 6:11:11

解决whisper 本地运行时GPU 利用率不高的问题

我在windows 环境下本地运行whisper 模型，使用的是nivdia RTX4070 显卡，结果发现GPU 的利用率只有2% 。使用 import torch print(torch.cuda.is_available()) 返回TRUE。表示我的cuda 是可用的。最后在github 的下列网页上找到了问题极低的 GPU 利…...

编程日记 2026/5/7 16:45:35

【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02

工具运行前的环境准备 1、登录用户管理员权限确认工具使用的登录用户(-u后面的用户)，必须具有管理员的权限，因为需要读取系统表例：Export.bat -s 10.48.111.12 -d db1 -u test -p test -schema dbo 　　　　 2、Powershell的安全策略确认…...

编程日记 2026/4/29 17:51:45

java异常处理——try catch finally

单个异常处理 1.当try里的代码发生了catch里指定类型的异常之后，才会执行catch里的代码，程序正常执行到结尾 2.如果try里的代码发生了非catch指定类型的异常，则会强制停止程序，报错 3.finally修饰的代码一定会执行，除…...

编程日记 2026/4/29 17:51:49

【人工智能】使用Python和Hugging Face构建情感分析应用：从模型训练到Web部署

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界情感分析是自然语言处理（NLP）中的重要任务，它通过分析文本来判断情绪或观点的倾向性。近年来，预训练语言模型如BERT、GPT等在情感分析任…...

编程日记 2026/2/17 12:51:05

DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

摘要我们推出了第一代推理模型：DeepSeek-R1-Zero和DeepSeek-R1。DeepSeek-R1-Zero是一个未经监督微调（SFT）作为初步步骤，而是通过大规模强化学习（RL）训练的模型，展现出卓越的推理能力。通过强…...

编程日记 2026/4/29 17:51:48

算法随笔_37: 交替合并字符串

上一篇:算法随笔_36: 复写零-CSDN博客题目描述如下: 给你两个字符串 word1 和 word2 。请你从 word1 开始，通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长，就将多出来的字母追加到合并后字符串的末尾。返回合并后的字符串。示例…...

编程日记 2026/2/14 4:26:10

低成本、高附加值，具有较强的可扩展性和流通便利性的行业

目录虚拟资源类 1. 网课教程 2. 设计素材 3. 软件工具服务类 1. 写作服务 2. 咨询顾问 3. 在线教育 4. 社交媒体管理虚拟资源类 1. 网课教程特点：高附加值，可复制性强，市场需求大。执行流程： 选择领域&#xff1a…...

编程日记 2026/5/3 15:25:03

vue入门到实战二

目录 2.1 计算属性computed 2.1.1什么是计算属性 2.1.2 只有getter方法的计算属性 2.1.3 定义有getter和setter方法的计算属性 2.1.4 计算属性和methods的对比 2.2 监听器属性watch 2.2.1 watch属性的用法 2.2.2 computed属性和watch属性的对比 2.1 计算属性computed…...

编程日记 2026/5/5 3:25:04

基于FPGA的BT1120编解码

BT1120与BT656 类似 BT1120与BT656同类属于一个视频协议，两者无论从组成、协议、同步码以及传输过程都是十分相似： 1、两者都是以F（场）、V（帧）、H（消隐）、D（有效）来区分数据的内容。 2、两者的传输数据都采用一样的方式，即内同步传输数据。 3、两者都传输的数据都是…...

编程日记 2026/5/6 16:55:43

二叉树-堆（补充）

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…...

编程日记 2026/5/6 4:06:33

基于springboot私房菜定制上门服务系统设计与实现(源码+数据库+文档)

私房菜定制上门服务系统目录目录基于springbootvue私房菜定制上门服务系统设计与实现一、前言二、系统功能设计三、系统实现 1、管理员功能实现 （1）菜品管理 （2）公告管理 （3） 厨师管理 2、用…...

编程日记 2026/4/30 23:29:22

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

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

编程日记 2026/5/7 17:22:32

利用飞书机器人进行 - ArXiv自动化检索推荐

相关作者的Github仓库 ArXivToday-Lark 使用教程 Step1 新建机器人根据飞书官方机器人使用手册，新建自定义机器人，并记录好webhook地址，后续将在配置文件中更新该地址。可以先完成到后续步骤之前，后续的步骤与安全相关&…...

编程日记 2026/4/29 22:53:25

25.2.2学习内容

通过前序遍历和后序遍历求可能的二叉树的种数（AI生成）： #include<stdio.h> #include<string.h> #include<stdlib.h> #include<math.h>struct TreeNode {char val;struct TreeNode *left;struct TreeNode *right; };…...

编程日记 2026/3/13 13:34:41

python算法和数据结构刷题[5]：动态规划

动态规划（Dynamic Programming, DP）是一种算法思想，用于解决具有最优子结构的问题。它通过将大问题分解为小问题，并找到这些小问题的最优解，从而得到整个问题的最优解。动态规划与分治法相似，但区别在于动态…...

编程日记 2026/5/7 19:08:41

Compose笔记(二)--LaunchedEffect

这一节了解一下LaunchedEffect，在 Jetpack Compose 里，LaunchedEffect是一种用于启动协程的可组合函数，其主要用途是在协程里执行异步操作。LaunchedEffect函数能够接收一个或多个key参数。 1 key的含义: LaunchedEffect函数的key参数指的是…...

编程日记 2026/3/20 22:40:52

QT知识点复习

1.qt核心机制对象树、信号和槽、事件机制 2.对象树的作用优化了内存回收机制。子对象实例化的时候，被父对象放对象树上，父对象释放内存，子对象也释放内存 3.信号和槽的作用实现多个组件之间的通讯 4.信号和槽的几种连接方式 1.UI界面提…...

编程日记 2026/3/23 14:05:50

【Rust自学】16.2. 使用消息传递来跨线程传递数据

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 16.2.1. 消息传递有一种很流行而且能保证安全并发的技术（或者叫机制）叫做消息传递。在这种机制里，线…...

编程日记 2026/4/30 6:48:48

Python 合并 Excel 单元格

合并 Excel 单元格是 Excel 数据处理和表格设计中的一项常用操作。例如，在制作表格标题时，经常会将多个单元格合并，使标题能够跨列显示，更加醒目和美观。此外，当对数据进行分类时，为了使同一类别的数据在视…...

编程日记 2026/2/19 23:40:34

解锁豆瓣高清海报(二) 使用 OpenCV 拼接和压缩

解锁豆瓣高清海报(二): 使用 OpenCV 拼接和压缩脚本地址: 项目地址: Gazer PixelWeaver.py pixel_squeezer_cv2.py 前瞻继上一篇“解锁豆瓣高清海报(一) 深度爬虫与requests进阶之路”成功爬取豆瓣电影海报之后，本文将介绍如何使用 OpenCV 对这些海报进行智…...

编程日记 2026/5/8 2:57:41