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

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

 完整代码

网易云-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&#xff08;排行榜&#xff09; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name&q…...

langchain 实现多智能体多轮对话

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

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

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

C++实现状态模式

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

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

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

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

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

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

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

Flutter常用Widget小部件

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

微信小程序实战0 设置

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

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

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

使用 postman 测试思源笔记接口

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

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

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

阿里最新普通x231 逆向分析

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

php的使用及storm环境部署

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

高可用 Keepalived 服务部署流程

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

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

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

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

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

G. XOUR

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

有没有个性化的UML图例

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

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

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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...