工艺品网站模板下载-古色古香/宁波seo外包快速推广
完整代码
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。 基础的资源显示 老规矩，…...
【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模块，能够有效利用输入键之间的上下文信息…...
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 是…...
基于“蘑菇书”的强化学习知识点（二）：强化学习中基于策略（Policy-Based）和基于价值（Value-Based）方法的区别
强化学习中基于策略（Policy-Based）和基于价值（Value-Based）方法的区别 摘要强化学习中基于策略（Policy-Based）和基于价值（Value-Based）方法的区别1. 定义与核心思想(1) 基于策略的方…...
民法学学习笔记(个人向) Part.2
民法学学习笔记(个人向) Part.2 民法始终在解决两个生活中的核心问题： 私法自治；交易安全； 3. 自然人 3.4 个体工商户、农村承包经营户 都是特殊的个体经济单位； 3.4.1 个体工商户 是指在法律的允许范围内，依法经…...
物业管理系统源码驱动社区管理革新提升用户满意度与服务效率
内容概要 在当今社会，物业管理正面临着前所未有的挑战，尤其是在社区管理方面。人们对社区安全、环境卫生、设施维护等日常生活需求愈发重视，物业公司必须提升服务质量，以满足居民日益增长的期望。而物业管理系统源码的出现&#…...
租房管理系统助力数字化转型提升租赁服务质量与用户体验
内容概要 随着信息技术的快速发展，租房管理系统正逐渐成为租赁行业数字化转型的核心工具。通过全面集成资产管理、租赁管理和物业管理等功能，这种系统力求为用户提供高效便捷的服务体验。无论是工业园、产业园还是写字楼、公寓，租房管理系统…...
Ollama教程：轻松上手本地大语言模型部署
Ollama教程：轻松上手本地大语言模型部署 在大语言模型（LLM）飞速发展的今天，越来越多的开发者希望能够在本地部署和使用这些模型，以便更好地控制数据隐私和计算资源。Ollama作为一个开源工具，旨在简化大语言…...
Baklib推动数字化内容管理解决方案助力企业数字化转型
内容概要 在当今信息爆炸的时代，数字化内容管理成为企业提升效率和竞争力的关键。企业在面对大量数据时，如何高效地存储、分类与检索信息，直接关系到其经营的成败。数字化内容管理不仅限于简单的文档存储，更是整合了文档、图像、…...
DeepSeek-R1 论文. Reinforcement Learning 通过强化学习激励大型语言模型的推理能力
论文链接： [2501.12948] DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning 实在太长，自行扔到 Model 里，去翻译去提问吧。 工作原理： 主要技术，就是训练出一些专有用途小模型&…...
DOM 操作入门：HTML 元素操作与页面事件处理
DOM 操作入门：HTML 元素操作与页面事件处理 DOM 操作入门：HTML 元素操作与页面事件处理什么是 DOM？1. 如何操作 HTML 元素？1.1 使用 `document.getElementById()` 获取单个元素1.2 使用 `document.querySelector()` 和 `document.querySelectorAll()` 获取多个元素1.3 创建…...
使用 HTTP::Server::Simple 实现轻量级 HTTP 服务器
在Perl中，HTTP::Server::Simple 模块提供了一种轻量级的方式来实现HTTP服务器。该模块简单易用，适合快速开发和测试HTTP服务。本文将详细介绍如何使用 HTTP::Server::Simple 模块创建和配置一个轻量级HTTP服务器。 安装 HTTP::Server::Simple 首先&…...
C++滑动窗口技术深度解析：核心原理、高效实现与高阶应用实践
目录 一、滑动窗口的核心原理 二、滑动窗口的两种类型 1. 固定大小的窗口 2. 可变大小的窗口 三、实现细节与关键点 1. 窗口的初始化 2. 窗口的移动策略 3. 结果的更新时机 四、经典问题与代码示例 示例 1：和 ≥ target 的最短子数组（可变窗口…...