15.[前端开发]Day15-HTML+CSS阶段练习(网易云音乐四)
完整代码
01_网易云-header
<!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>网易云的top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style></style>
</head>
<body><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></body>
</html>02_网易云-banner
<!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"><style>.banner {background: url(./images/banner_bg_02.jpeg) center center / 6000px;}.banner .area {position: relative;height: 285px;background-color: orange;}.banner .area .area-left {position: relative;width: 730px;}/* 图片列表 */.banner .area-left .img-list {display: flex;overflow: hidden;}.banner .area-left .img-list li {flex-shrink: 0;width: 100%;}.banner .area-left .img-list .item {display: block;}.banner .area-left .img-list .item img {width: 100%;height: 285px;}/* 点的列表 */.banner .area-left .dots-list {position: absolute;bottom: 5px;left: 0;right: 0;margin: 0 auto;display: flex;justify-content: center;}.banner .area-left .dots-list li {margin: 0 2px;}.banner .area-left .dots-list .item {display: inline-block;width: 20px;height: 20px;background: url(./images/banner_sprite.png) 3px -343px;}.banner .area-left .dots-list .item.active,.banner .area-left .dots-list .item:hover {background-position: -16px -343px;}/* 右侧的内容 */.banner .area-right {position: absolute;right: -1px;top: 0;bottom: 0;width: 254px;background: url(./images/download_sprite.png);}.banner .area-right .download {display: block;width: 215px;height: 56px;margin: 186px 0 0 19px;text-indent: -9999px;}.banner .area-right .download:hover {background: url(./images/download_sprite.png) 0 -290px;}.banner .area-right .desc {margin-top: 10px;text-align: center;font-size: 12px;color: #8d8d8d;}/* 两个控制按钮 */.banner .area .control {position: absolute;top: 0;bottom: 0;width: 37px;height: 63px;margin: auto 0;background-image: url(./images/banner_sprite.png);}.banner .area .control.left {left: -70px;background-position: 0 -360px;}.banner .area .control.left:hover {background-position: 0 -430px;}.banner .area .control.right {right: -70px;background-position: 0 -508px;}.banner .area .control.right:hover {background-position: 0 -578px;}</style>
</head>
<body><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></body>
</html>03_网易云-main-right
<!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"><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;}/* 右侧区域 */.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;}</style>
</head>
<body><div class="main"><div class="area wrapper_02"><div class="area-left"></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="#">查看全部 ></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">台湾歌手张惠妹fdafdafadfafa</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>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>body {text-align: center;padding-top: 50px;}.apply {display: inline-block;width: 210px;height: 31px;line-height: 31px;text-align: center;font-size: 12px;font-weight: 700;color: #000;box-sizing: border-box;border-radius: 4px;overflow: hidden;/* border: 1px solid #aaa;border-radius: 3px; */background-color: #fff;/* background: url(./images/btn_sprite.png) right -100px no-repeat; *//* padding-right: 5px; */}.apply > i {display: block;height: 31px;/* background: url(./images/btn_sprite.png) 0 -59px;padding-left: 3px; */}.btn {width: 100px;}</style>
</head>
<body><a class="btn_sprite btn_type_01_sup apply" href="#"><i class="btn_sprite btn_type_01_sub">申请成为网易音乐人</i></a><!-- 第二个按钮 --><a class="btn_sprite btn_type_01_sup btn" href="#"><i class="btn_sprite btn_type_01_sub">我是按钮</i></a><!-- 其他的按钮 --><a class="btn_sprite btn_type_favor_sup favor" href="#"><i class="btn_sprite btn_type_favor_sub">(39134325232772)</i></a></body>
</html>05_网易云-main-left
<!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"><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;}/* 右侧区域 */.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;}</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><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><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></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="#">查看全部 ></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_网易云-main-left-content
<!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;}.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;}</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></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="#">查看全部 ></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_网易云-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="#">查看全部 ></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="#">查看全部 ></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="#">查看全部 ></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="#">查看全部 ></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_(掌握)box-sizing的适用场景总结
额外的知识补充：box-sizing
<!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>Document</title><style>.box {width: 200px;height: 200px;background-color: orange;/* 没有添加box-sizing: 空间 水平: 240px 垂直: 240px */border: 20px solid #f00;/* 添加box-sizing: border就会算在width/height *//* box-sizing: 在生效时, 有一个前提, 有明确的设置宽度和高度 */box-sizing: border-box;}</style>
</head>
<body><!-- 1. 需要添加box-sizing的场景 --><div class="box"></div></body>
</html>
当不设置宽度，那么宽度默认为auto,无论设置box-sizing与否都一样
<!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>Document</title><style>.container {position: relative;display: flex;width: 300px;height: 300px;background-color: orange;}/* .container .box {height: 200px;background-color: #f00;box-sizing: border-box;border-right: 30px solid #0f0;padding-right: 30px;} *//* .container .box2 {position: absolute;width: 100px;height: 100px;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #f00;box-sizing: border-box;border: 10px solid #0f0;} */.container .box3 {width: 100px;background-color: #f00;border-top: 30px solid #0f0;box-sizing: border-box;}.container .box4 {flex: 1; /* flex: 1 -> flex-grow: 1 */background-color: purple;border: 30px solid skyblue;}</style>
</head>
<body><!-- 1.块级盒子的嵌套 --><!-- <div class="container"><div class="box">fdasfdasfda我是coderwhy, 哈哈哈哈,呵呵呵呵呵呵</div></div> --><!-- 2.定位的案例 --><!-- <div class="container"><div class="box2"></div></div> --><!-- 3.flex布局 --><div class="container"><div class="box3"></div><div class="box4"></div></div></body>
</html>遇到问题，可以先写demo，然后再去看MDN/官方文档，再去通过集体知识让世界能够发展技术 – Stack Overflow
02_(理解)flex布局和white-space的冲突
.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 .desc {font-size: 12px;color: #666;/* 文本超出后显示... */white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} <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>03_(理解)a元素嵌套块级元素的解析
块级元素：h1/h2/p/div...
行内非替换元素：span/a/strong/i..
<!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>Document</title><style>a {display: inline-block;width: 300px;height: 300px;background-color: #f00;}</style>
</head>
<body><!-- 规范: 行内非替换元素不要嵌套块级元素 --><a href="#"><div>divdivdivdiv</div><p>pppppppp</p></a></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;}</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><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></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="#">查看全部 ></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{height: 100%;box-sizing: border-box;border: 1px solid #fff;background-color: #f5f5f5;}</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></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></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="#">查看全部 ></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{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-color: blue;}</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">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li></ul><ul class="list">2</ul></div></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></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="#">查看全部 ></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_(掌握)网易云-新碟上架item封面处理
<!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{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{position: absolute;right: 20px;bottom: 5px;width: 22px;height: 22px;background: url(./images/icon_sprite.png) 0 -85px;}.disc-section .inner .roller .list .item .album:hover . play{}</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></li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li></ul><ul class="list">2</ul></div></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></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="#">查看全部 ></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>
08_(掌握)网易云-新碟上架item内容展示
<!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{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;}</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></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></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="#">查看全部 ></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>
09_(掌握)网易云-新碟上架的控制按钮
<!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;}</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></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="#">查看全部 ></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>
相关文章：
15.[前端开发]Day15-HTML+CSS阶段练习(网易云音乐四)
完整代码 01_网易云-header <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wid…...
【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录
🧸安清h：个人主页 🎥个人专栏：【Spring篇】【计算机网络】【Mybatis篇】 🚦作者简介：一个有趣爱睡觉的intp，期待和更多人分享自己所学知识的真诚大学生。 目录 🎯1.登录-持久层 &…...
测试方案和测试计划相同点和不同点
在软件测试领域，测试方案与测试计划皆为举足轻重的关键文档，尽管它们有着紧密的关联，但在目的与内容层面存在着显著的差异。相同点： 1.共同目标：测试方案和测试计划的核心目标高度一致，均致力于保障软件的…...
c++提取矩形区域图像的梯度并拟合直线
c提取旋转矩形区域的边缘最强梯度点，并拟合直线 #include <opencv2/opencv.hpp> #include <iostream> #include <vector>using namespace cv; using namespace std;int main() {// 加载图像Mat img imread("image.jpg", IMREAD_GRAYS…...
Unity Shader Graph 2D - 角色身体电流覆盖效果
在游戏中，通常会有游戏角色受到“电击”的效果，此时游戏角色身体上会覆盖有电流，该效果能表明游戏角色的当前状态，让玩家能够获得更直观更好的体验。 那么如何实现呢 首先创建一个ShaderGraph文件，命名为Current，再创建对应的材质球M_Current。 基础的资源显示 老规矩，…...
搜索引擎Agent)
【LLM-agent】(task4)搜索引擎Agent
note 新增工具：搜索引擎Agent 文章目录 note一、搜索引擎AgentReference 一、搜索引擎Agent import os from dotenv import load_dotenv# 加载环境变量 load_dotenv() # 初始化变量 base_url None chat_model None api_key None# 使用with语句打开文件…...
携程Java开发面试题及参考答案 （200道-下）
insert 一行数据的时候加的是什么锁？为什么？ 在 MySQL 中，当执行 INSERT 操作插入一行数据时，加锁的情况会因存储引擎和具体的事务隔离级别而有所不同。一般来说，在 InnoDB 存储引擎下，INSERT 操作加的是行级排他锁（Row Exclusive Lock），以下详细说明原因。 行级排他…...
GWO优化SVM回归预测matlab
灰狼优化算法（Grey Wolf Optimizer，简称 GWO），是由澳大利亚格里菲斯大学的 Mirjalii 等人于 2014 年提出的群智能优化算法。该算法的设计灵感源自灰狼群体的捕食行为，核心思想是对灰狼社会的结构与行为模式进行模仿。 …...
QMK启用摇杆和鼠标按键功能
虽然选择了触摸屏，我仍选择为机械键盘嵌入摇杆模块，这本质上是对"操作连续性"的执着。 值得深思的是，本次开发过程中借助DeepSeek的代码生成与逻辑推理，其展现的能力已然颠覆传统编程范式，需求描述可自动…...
Unity实现按键设置功能代码
一、前言 最近在学习unity2D，想做一个横版过关游戏，需要按键设置功能，让用户可以自定义方向键与攻击键等。 自己写了一个，总结如下。 二、界面效果图 这个是一个csv文件，准备第一列是中文按键说明，第二列…...
基于物联网技术的实时数据流可视化研究（论文+源码）
1系统方案设计 根据系统功能的设计要求，展开基于物联网技术的实时数据流可视化研究设计。如图2.1所示为系统总体设计框图，系统以STM32单片机做为主控制器，通过DHT11、MQ-2、光照传感器实现环境中温湿度、烟雾、光照强度数据的实时检测&#x…...
list容器（详解）
1. list的介绍及使用 1.1 list的介绍（双向循环链表） https://cplusplus.com/reference/list/list/?kwlist（list文档介绍） 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭…...
Elasticsearch基本使用详解
文章目录 Elasticsearch基本使用详解一、引言二、环境搭建1、安装 Elasticsearch2、安装 Kibana（可选） 三、索引操作1、创建索引2、查看索引3、删除索引 四、数据操作1、插入数据2、查询数据（1）简单查询（2）…...
17.3.4 颜色矩阵
版权声明：本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。 17.3.4.1 矩阵基本概念 矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合，类似于数组。 由…...
FPGA 时钟多路复用
时钟多路复用 您可以使用并行和级联 BUFGCTRL 的组合构建时钟多路复用器。布局器基于时钟缓存 site 位置可用性查找最佳布局。 如果可能，布局器将 BUFGCTRL 布局在相邻 site 位置中以利用专用级联路径。如无法实现，则布局器将尝试将 BUFGCTRL 从…...
机器学习10
自定义数据集 使用scikit-learn中svm的包实现svm分类 代码 import numpy as np import matplotlib.pyplot as pltclass1_points np.array([[1.9, 1.2],[1.5, 2.1],[1.9, 0.5],[1.5, 0.9],[0.9, 1.2],[1.1, 1.7],[1.4, 1.1]])class2_points np.array([[3.2, 3.2],[3.7, 2.9],…...
【Block总结】CoT，上下文Transformer注意力|即插即用
一. 论文信息 标题: Contextual Transformer Networks for Visual Recognition论文链接: arXivGitHub链接: https://github.com/JDAI-CV/CoTNet 二. 创新点 上下文Transformer模块（CoT）: 提出了CoT模块，能够有效利用输入键之间的上下文信息…...
 localtime的概念和使用案例)
linux库函数 gettimeofday() localtime的概念和使用案例
在Linux系统中，gettimeofday() 和 localtime() 是两个常用的时间处理函数，分别用于获取高精度时间戳和将时间戳转换为本地时间。以下是它们的概念和使用案例的详细说明： 1. gettimeofday() 函数 概念 功能：获取当前时间…...
编程题-电话号码的字母组合（中等）
题目： 给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。 解法一（哈希表动态添加）&#x…...
EasyExcel使用详解
文章目录 EasyExcel使用详解一、引言二、环境准备与基础配置1、添加依赖2、定义实体类 三、Excel 读取详解1、基础读取2、自定义监听器3、多 Sheet 处理 四、Excel 写入详解1、基础写入2、动态列与复杂表头3、样式与模板填充 五、总结 EasyExcel使用详解 一、引言 EasyExcel 是…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...