图片自己定

1.Html部分

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="css/wyy.css " /><link rel="stylesheet" type="text/css" href="icon/iconfont.css" /><link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" /><link rel="stylesheet" type="text/css" href="icons/iconfont.css" /><!-- logo --><link rel="shortcut icon"href="icons/1.ico"/><title>网易云音乐</title></head><body><div class="head"><!-- 头部导航栏开始 --><div class="head_nr"><div class="head_logo"></div><div class="head_nav"><a href="">发现音乐<span class="s1"></span></a><a href="">我的音乐<span class="s1"></span></a><a href="">关注<span class="s1"></span></a><a href="">商城<span class="s1"></span></a><a href="">音乐人<span class="s1"></span></a><a href="">下载客户端<span class="s1"></span><span class="s2"></span></a></div><div class="head_right"><div class="inp"><span class="iconfont fd"></span><input type="text" name="" id="" value="" placeholder="音乐/视频/电台/用户" /></div><div class="zx">制作者中心</div><div class="dr"><a href="">登录</a></div></div></div><!-- 头部导航栏End --><!-- 红色部分开始 --><div class="red"><div class="red_nr"><div class="red_nr1"><a href="">推荐</a><a href="">排行榜</a><a href="">歌单<span></span></a><a href="">主播电台</a><a href="">歌手</a><a href="">新碟上架</a></div></div></div></div><!-- 轮播图 --><div class="swiper1"><div class="swiper2"><div class="swiper" id="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/轮播图/1.jpg"></div><div class="swiper-slide"><img src="img/轮播图/2.jpg"></div><div class="swiper-slide"><img src="img/轮播图/3.jpg"></div><div class="swiper-slide"><img src="img/轮播图/4.jpg"></div><div class="swiper-slide"><img src="img/轮播图/5.jpg"></div><div class="swiper-slide"><img src="img/轮播图/6.jpg"></div><div class="swiper-slide"><img src="img/轮播图/7.jpg"></div><div class="swiper-slide"><img src="img/轮播图/8.jpg"></div><div class="swiper-slide"><img src="img/轮播图/9.jpg"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 分页器 --><div class="swiper-pagination"></div></div><div class="down"><div class="down1"></div><div class="down2"></div><div class="down3"><a href="">PC</a><a href="">安卓</a><a href="">iPhone</a><a href="">WP</a><a href="">iPad</a><a href="">Mac</a><a href="">六大客户端</a></div></div></div></div><!-- 主体部分 --><div class="content"><div class="content_nr"><div class="content_left"><!-- 热门推荐 --><div class="rmtj rm1"><a href=""></a><a href="">热门推荐</a><a href="">华哥</a><a href="">流行</a><a id="yg" href="">摇滚</a><a id="yg2" href="">民谣</a><a href="">电子</a><a href="" class="iconfont">&#xe600</a><a href="">更多</a></div><ul class="diantai"><li><img src="img/热门推荐/1.jpg"><p>别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></li><li><img src="img/热门推荐/2.jpg"><p>别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></li><li><img src="img/热门推荐/3.jpg"><p >别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></li><li><img src="img/热门推荐/4.jpg"><p>别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></li><li><img src="img/热门推荐/5.jpg"><p >别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></li><li><img src="img/热门推荐/6.jpg"><p >别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></li><li><img src="img/热门推荐/7.jpg"><p>别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></li><li><img src="img/热门推荐/8.jpg"><p>别难过啦，这个世界也在偷偷的爱着你呀20万</p><div class="bfq"><span class="erji"></span><a href="">28w</a><span class="zhanting"></span></div><div class="byuan"></div></ul><div class="rmtj rm2"><a href=""></a><a href="">新碟上架</a><a href="" class="iconfont ccc">&#xe600</a><a href="">更多</a></div><!-- 第二个轮播图 --><div class="swiper3"><div class="swiper3_nr"><ul class="swiper3_nr1"><li><img src="./img/新碟上架/2.jpg"><div class="ca"><span class="diezi"></span><span class="zt"></span></div><p class="p1">Love Sux</p><p class="p2">Avril Lavigne</p></li><li><img src="./img/新碟上架/1.jpg"><div class="ca"><span class="diezi"></span><span class="zt"></span></div><p class="p1">Love Sux</p><p class="p2">Avril Lavigne</p></li><li><img src="./img/新碟上架/3.jpg"><div class="ca"><span class="diezi"></span><span class="zt"></span></div><p class="p1">Love Sux</p><p class="p2">Avril Lavigne</p></li><li><img src="./img/新碟上架/4.jpg"><div class="ca"><span class="diezi"></span><span class="zt"></span></div><p class="p1">Love Sux</p><p class="p2">Avril Lavigne</p></li><li><img src="./img/新碟上架/5.jpg"><div class="ca"><span class="diezi"></span><span class="zt"></span></div><p class="p1">Love Sux</p><p class="p2">Avril Lavigne</p></li></ul></div></div><!-- <div class="swiper mySwiper" id="swiper2"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./img/入住歌手/wjr.jpg" ></div><div class="swiper-slide"><img src="./img/入住歌手/wjr.jpg" ></div><div class="swiper-slide"><img src="./img/入住歌手/wjr.jpg" ></div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div><div class="swiper-pagination"></div></div> --><div class="rmtj rm3"><a href=""></a><a href="">榜单</a><a href="" class="iconfont ccc">&#xe600</a><a href="">更多</a></div><!-- 榜单 --><div class="bangdan"><div class="bangdan_nr"><ul class="ul1"><li><div class="g_name"><img src="./img/榜单/3.jpg" alt=""><div class="g_bf"><div class="g_bfname">飙升榜</div><div class="g_bfname2"><span></span><span></span></div></div></div></li><li><span>1</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>2</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>3</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>4</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>5</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>6</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>7</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>8</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>9</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>10</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><a href="">查看全部></a></li></ul><ul class="ul1"><li><div class="g_name"><img src="./img/榜单/2.jpg" alt=""><div class="g_bf"><div class="g_bfname">飙升榜</div><div class="g_bfname2"><span></span><span></span></div></div></div></li><li><span>1</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>2</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>3</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>4</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>5</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>6</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>7</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>8</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>9</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>10</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><a href="">查看全部></a></li></ul><ul class="ul1"><li><div class="g_name"><img src="./img/榜单/1.jpg" alt=""><div class="g_bf"><div class="g_bfname">飙升榜</div><div class="g_bfname2"><span></span><span></span></div></div></div></li><li><span>1</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>2</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>3</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>4</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>5</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>6</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>7</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>8</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>9</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><span>10</span><a href="">生认为人</a><div class="sange"><span></span><span></span><span></span></div></li><li><a href="">查看全部></a></li></ul></div></div></div><!-- 右边内容开始 --><div class="content_right"><div class="right_nr1"><div class="right_nr"><div class="wenben">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</div><div class="user_dr">用户登录</div></div></div><div class="right_nr2"><div class="nr2_gs"><div class="list_gs"><a href="">入驻歌手</a><a href="">查看全部></a></div><div class="gs_js"><img src="./img/入住歌手/张惠妹.jpg"><div class="gs_js_nr"><span>张惠妹aMEI</span><p>台湾歌手张惠妹</p></div></div><div class="gs_js"><img src="./img/入住歌手/1.jpg"><div class="gs_js_nr"><span>Fine乐团</span><p>独立音乐人</p></div></div><div class="gs_js"><img src="./img/入住歌手/2.jpg"><div class="gs_js_nr"><span>萬曉利</span><p>民谣歌手、中国现代</p></div></div><div class="gs_js"><img src="./img/入住歌手/3.jpg"><div class="gs_js_nr"><span>音乐人赵雷</span><p>民谣歌手</p></div></div><div class="gs_js"><img src="./img/入住歌手/2.jpg"><div class="gs_js_nr"><span>王三溥 </span><p>音乐人</p></div></div><div class="gs_js sqyyr">申请成为网易云音乐人</div><div class="list_gs"><a href="">热门主播</a></div><div class="gs_js gs_js2"><img src="./img/热门主播/1.jpg"><div class="gs_js_nr gs_js_nr2"><span>陈立</span><p>心理学家、美食家陈立教授</p></div></div><div class="gs_js gs_js2"><img src="./img/热门主播/2.jpg"><div class="gs_js_nr gs_js_nr2"><span>刘维-Julius</span><p>歌手、播客节目《维维</p></div></div><div class="gs_js gs_js2"><img src="./img/热门主播/3.jpg"><div class="gs_js_nr gs_js_nr2"><span>莫非定律MoreFeel</span><p>男女双人全创作独立乐团</p></div></div><div class="gs_js gs_js2"><img src="./img/热门主播/4.jpg"><div class="gs_js_nr gs_js_nr2"><span>碎嘴许美达</span><p>脱口秀网络红人</p></div></div><div class="gs_js gs_js2"><img src="./img/热门主播/5.jpg"><div class="gs_js_nr gs_js_nr2"><span>银临Rachel</span><p>古风音乐人</p></div></div></div></div></div></div><!-- 页脚部分 --><div class="footer"><div class="foot"><ul class="foot1"><li><a href="">服务条款</a><a href="">隐私政策</a><a href="">儿童隐私政策</a><a href="">版权投诉指引</a><a href="">联系我们</a><a href=""> 广告合作</a></li><li>网易公司版权所有©1997-2022杭州乐读科技有限公司运营：<a href="">浙网文[2021] 1186-054号</a></li><li><a href="">粤B2-20090191-18 工业和信息化部备案管理系统网站</a><span><img src="img/pos.png"></span><a href="">浙公网安备 33010902002564号</a></li></ul><div class="foot2"><div class="foot2_img1"><div class="fimg1"></div><div class="fimg2"><!-- Amped Studio --></div></div><div class="foot2_img1"><div class="fimg3"></div><div class="fimg4"><!-- 用户认证 --></div></div><div class="foot2_img1"><div class="fimg5"></div><div class="fimg6"><!-- 独立音乐人 --></div></div><div class="foot2_img1"><div class="fimg7"></div><div class="fimg8"><!-- 赞赏 --></div></div><div class="foot2_img1"><div class="fimg9"></div><div class="fimg10"><!-- 视频奖励 --></div></div></div></div></div><!-- 固定播放器 --><div class="gd_bfq"><div class="gd_bfq_nr"><div class="gd_nr1"><span></span><span></span><span></span></div><div class="gd_nr2"><img src="./img/default_album.jpg"></div><div class="gd_nr3"><div class=""><span></span></div></div><div class="jshi"><span>00:00 / 00:00</span></div><div class="gd_nr4"><span></span><span></span><span></span></div><div class="gd_nr5"><span>|</span></div><div class="gd_nr6"><span></span><span></span><span></span></div></div><div class="tixing"><span></span></div></div><!-- Top --><a href="#" class="top"></a></div></body>
</html>
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var mySwiper = new Swiper('.swiper', {autoplay: true, //可选选项，自动滑动loop: true,effect: 'fade',navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},pagination: {el: '.swiper-pagination',clickable: true,},autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: true,},})
</script>
<script>var swiper = new Swiper(".mySwiper", {slidesPerView: 3,spaceBetween: 30,slidesPerGroup: 3,loop: true,loopFillGroupWithBlank: true,pagination: {el: ".swiper-pagination",clickable: true,},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});
</script>

2.js用了Swiper包swiper-bundle.min.js和swiper-bundle.min.css

Css部分

* {vertical-align: bottom;font-size: 14px;margin: 0;padding: 0;list-style: none;text-decoration: none;
}.head {background-color: #242424;
}.head_nr {width: 1100px;height: 70px;margin: 0 auto;
}.head_logo {/* padding-right: 15px; */float: left;width: 177px;height: 70px;background: url(../img/精灵图/topbar.png) no-repeat;
}.head_nav {line-height: 70px;float: left;
}.head_nav a {position: relative;color: #ffffff;display: inline-block;height: 70px;padding: 0 20px;
}.head_right {color: #FFFAF0;padding-top: 20px;float: right;
}.inp {padding-left: 10px;box-sizing: border-box;width: 158px;line-height: 32px;float: left;/* border: 1px solid red; */height: 32px;border-radius: 16px;background-color: #FFFFFF;
}.inp>input {outline: none;border: none;width: 100px;position: relative;top: -9px;
}.inp>input[value] {font-size: 12px;color: #5E5E5E;
}.fd {color: #FF0000;
}.zx {margin-left: 12px;text-align: center;width: 90px;height: 32px;border-radius: 16px;color: #5e5e5e;border: #5E5E5E 1px solid;line-height: 32px;font-size: 12px;float: left;
}.zx:hover {cursor: pointer;border: 1px solid #FFFFFF;color: #FFFFFF;
}.dr {float: left;height: 32px;
}.dr a {line-height: 32px;margin-left: 20px;font-size: 12px;margin-top: 5px;color: #787878;
}.dr a:hover {text-decoration: underline;
}/* 红色部分 */
.red {background-color: #c20c0c;/* height: 35px; */
}.red_nr {margin: 0 auto;box-sizing: border-box;width: 1100px;height: 34px;
}.red_nr1 {padding-left: 200px;line-height: 34px;width: 774px;height: 34px;
}.red_nr1 a:first-child {background-color: #9B0909;
}.red_nr1 a {font-size: 12px;border-radius: 12px;color: white;margin-right: 40px;padding: 2px 12px;
}.red_nr1 a:nth-child(3) {/* background-color: #9B0909; */position: relative;
}.red_nr1 a:hover {background-color: #9B0909;
}.red_nr1 a:nth-child(3)>span {width: 12px;height: 12px;top: 1px;right: 4px;/* border: 1px solid black; */position: absolute;background: url(../img/精灵图/white-r-icon@3x.png) no-repeat;background-position: 1px 1px;background-size: 9px 9px;
}.head_nav .s1 {position: absolute;bottom: 0;left: 50%;transform: translate(-50%);display: inline-block;/* background: url(../img/精灵图/topbar.png) no-repeat;background-position: -222px 24px;width: 20px;height: 30px; *//* border: #FFFFFF 1px solid; */
}.head_nav .s2 {background: url(../img/精灵图/topbar.png) no-repeat;background-position: -192px 12px;width: 25px;height: 30px;position: absolute;top: 9px;right: -15px;/* border: 1px solid beige; */
}.head_nav a:hover .s1 {background: url(../img/精灵图/topbar.png) no-repeat transparent;background-position: -222px 24px;width: 20px;height: 30px;
}.head_nav a:hover {background-color: #000000;
}/* 轮播图 */
.swiper1 {/* border-bottom: #FF0000 1px solid; */
}.swiper2 {/* border-bottom: #FF0000 1px solid; */position: relative;margin: 0 auto;height: 284px;width: 982px;/* border: #007AFF 1px solid; */
}.swiper-slide img {width: 100%;
}#swiper {position: absolute;width: 730px;height: 285px;/* border: 1px solid black; */
}.down {z-index: 9999;position: absolute;right: 0;width: 252px;height: 284px;/* border: 1px solid pink; */background-color: #000000;
}.down1 {height: 183px;background: url(../img/down/download.png) no-repeat;
}.down2 {/* border: 1px solid pink; */margin: 0 auto;width: 216px;height: 64px;background: url(../img/down/download.png) no-repeat;background-position: -19px -185px;
}.down2:hover {/* border: 1px solid pink; */width: 216px;background-color: #333434;cursor: pointer;background: url(../img/down/download.png) no-repeat;background-position: 0px -289px;
}.down3 {padding-left: 13px;
}.down3 a {font-size: 12px;color: #8d8d8d;
}/* 主体部分 */
.content {border-bottom: 1px solid #d3d3d3;background-color: #f5f5f5;
}.content_nr::after {content: "";height: 0;clear: both;display: block;
}.content_nr {width: 982px;border: #d3d3d3 1px solid;border-bottom: none;margin: 0 auto;background-color: white;
}.content_left {background-color: #ffffff;box-sizing: border-box;padding: 20px 20px 40px 20px;float: left;width: 729px;border-right: #D3D3D3 solid 1px;/* height: 40px; *//* border: 1px green solid; */
}.content_right {box-sizing: border-box;background-color: #FFFFFF;float: right;width: 252px;/* border-left: #D3D3D3 solid 1px; *//* border-left: 1px pink solid; *//* border: 1px pink solid; *//* border-bottom: 1px pink solid; */
}.rmtj {padding-left: 5px;line-height: 35px;/* height: 35px; *//* border: #007AFF solid 1px; */border-bottom: 2px solid #C10D0C;
} .rmtj a {border-right: 1px solid #666;font-size: 12px;color: #666;padding: 0 10px 0 10px;
}.rmtj a:first-child {border-right: none;padding-left: 0px;padding-right: 0px;color: #007AFF;display: inline-block;width: 20px;height: 35px;background: url(../img/精灵图/私房歌单.png) no-repeat;background-position: -231px -154px;
}.ccc {float: right;
}.rmtj a:nth-child(2) {border: none;font-size: 20px;margin-right: 8px;
}.rmtj a:last-child {padding: 0;border: none;float: right;
}.rmtj a:nth-child(8) {border: none;padding: 0;float: right;color: red;
}.rm1 a:nth-child(3):hover {text-decoration: underline;
}#yg:hover {text-decoration: underline;
}#yg2:hover {text-decoration: underline;
}.rmtj a:nth-child(4):hover {text-decoration: underline;
}.rmtj a:nth-child(5) :hover {text-decoration: underline;
}.rmtj a:nth-child(6) :hover {text-decoration: underline;
}.rmtj a:nth-child(7):hover {text-decoration: underline;
}.rmtj a:last-child:hover {text-decoration: underline;
}.rm2 a {border-right: none;
}.rm2 a:nth-child(3) {border: none;padding: 0;float: right;color: red;text-decoration: none;
}.rm3 a:nth-child(3) {text-decoration: none;border: none;padding: 0;float: right;color: red
}/* 电台 */
.diantai {margin-top: 20px;flex-wrap: wrap;display: flex;justify-content: space-between;
}.diantai li {margin-bottom: 60px;position: relative;/* border: 1px solid red; */width: 22%;
}.diantai li p {margin-top: 5px;
}.diantai li p:hover {cursor: pointer;text-decoration: underline;
}.bfq {z-index: 88;line-height: 27px;top: 113px;position: absolute;background: url(../img/精灵图/coverall.png) no-repeat;background-position: 0px -537px;width: 140px;/* border: #000000 1px solid; */height: 27px;
}.bfq>a {color: #ccc;
}.erji {float: left;margin-right: 4px;margin-left: 9px;margin-top: 5px;background: url(../img/精灵图/iconall.png) no-repeat;background-position: 0 -21px;display: inline-block;width: 15px;height: 15px;/* border: 1px solid black; */
}.bfq>a {font-size: 12px;
}.zhanting {background: url(../img/精灵图/iconall.png) no-repeat;background-position: 0 0;right: 9px;top: 5px;position: absolute;display: inline-block;width: 17px;height: 17px;/* border: 1px solid black; */
}.zhanting:hover {cursor: pointer;background: url(../img/精灵图/iconall.png) no-repeat;background-position: 0 -60px;
}.byuan {position: absolute;top: 0;width: 140px;height: 140px;border: 1px saddlebrown solid;background: url(../img/精灵图/coverall.png) no-repeat;
}/* 第二个轮播图 */
/* .swiper-slide img{width: 100%;
}
#swiper2{height: 180px;border: #007AFF 1px solid;
} */
.swiper3 {margin-top: 20px;background-color: #F5F5F5;margin-bottom: 20px;
}.swiper3_nr {position: relative;height: 180px;border: #D3D3D3 solid 1px;
}.swiper3_nr1 {width: 645px;margin: 25px auto;/* border: 1px solid red; */display: flex;justify-content: space-around;
}/* .swiper3_nr1 li{position: relative;
}
.swiper3_nr1 li .ca {position: relative;
}
.ca:hover .zt{display: block;
} */
.ca {z-index: 1111111;top: 0px;position: absolute;
}.swiper3_nr1 li {position: relative;
}.swiper3_nr1 li p {line-height: 20px;
}.diezi {position: relative;display: inline-block;background: url(../img/精灵图/coverall.png) no-repeat 0 -570px;width: 118px;height: 101px;z-index: 222;
}.p1 {font-size: 12px;color: #000000;
}.p1:hover {text-decoration: underline;
}.p2 {font-size: 12px;color: #787878;
}.zt {top: 73px;right: 25px;display: inline-block;position: absolute;background: url(../img/精灵图/iconall.png) no-repeat 0 -110px;width: 22px;height: 22px;z-index: 11;display: none;
}.ca:hover>.zt {display: block;
}/* 榜单 */
.bangdan_nr {margin-top: 20px;width: 689px;height: 472px;/* border: #000000 solid 1px; */background: url(../img/精灵图/index_bill.png) no-repeat;display: flex;
}.bangdan_nr ul {box-sizing: border-box;width: 33.3%;
}.ul1 li {box-sizing: border-box;padding-left: 20px;line-height: 31px;width: 100%;height: 32px;position: relative;
}.g_name {width: 200px;top: 20px;left: 21px;position: absolute;
}.ul1 li .g_name img {float: left;width: 80px;height: 80px;
}.ul1 li:first-child {/* border: #000000 solid 1px; */width: 100%;height: 120px;
}.ul1 li span {/* display: inline-block; */margin: 0 8px;}.g_bf {float: left;margin-left: 5px;
}.g_bf span {display: inline-block;width: 25px;height: 25px;/* border: 1px solid #C20C0C; */
}.g_bfname2 span:nth-child(1) {background: url(../img/精灵图/私房歌单.png) no-repeat;background-position: -266px -204px;
}.g_bfname2 span:nth-child(1):hover {cursor: progress;background: url(../img/精灵图/私房歌单.png) no-repeat;background-position: -266px -234px;
}.g_bfname2 span:nth-child(2) {background: url(../img/精灵图/私房歌单.png) no-repeat;background-position: -300px -205px;
}.g_bfname2 span:nth-child(2):hover {cursor: progress;background: url(../img/精灵图/私房歌单.png) no-repeat;background-position: -300px -235px;
}.g_bfname {/* border: 1px solid red; */padding-left: 10px;
}.sange {display: none;top: -4px;right: 13px;position: absolute;
}.ul1>li a {color: #666;
}.ul1>li a:hover {text-decoration: underline;
}.ul1>li:hover .sange {display: block;
}.sange span:nth-child(1) {margin: 0;display: inline-block;background: url(../img/精灵图/iconall.png) no-repeat 0 0;width: 16px;height: 18px;
}.sange span:nth-child(1):hover {background: url(../img/精灵图/iconall.png) no-repeat 0 -60px;
}.sange span:nth-child(3) {margin: 0;display: inline-block;background: url(../img/精灵图/icon.png) no-repeat -44px -87px;width: 18px;height: 17px;
}.sange span:nth-child(3):hover {background: url(../img/精灵图/icon.png) no-repeat -44px -110px;
}.sange span:nth-child(2) {display: inline-block;background: url(../img/精灵图/icon.png) no-repeat 0 -700px;width: 14px;height: 16px;
}.sange span:nth-child(2):hover {background: url(../img/精灵图/icon.png) no-repeat -22px -700px;
}.ul1 li:nth-child(2)>span {color: #c10d0c;
}.ul1 li:nth-child(3)>span {color: #c10d0c;
}.ul1 li:nth-child(4)>span {color: #c10d0c;
}.ul1 li:nth-child(11) {/* padding-left: 15px; */
}.ul1 li:nth-child(11)>span {margin: 0 6px 0 2px;
}.ul1 li:last-child a {font-size: 12px;float: right;margin-right: 30px;
}.ul1 li>a {font-size: 12px;
}/* 右边内容 */
.right_nr1 {background-color: #E8E8E8;/* box-shadow: #666666 0 0 5px; */background: url(../img/精灵图/私房歌单.png) no-repeat -1px 0;width: 250px;height: 126px;
}.right_nr {color: #666;width: 205px;margin: 0 auto;/* border: 1px solid red; */padding-bottom: 16px;
}.wenben {line-height: 20px;padding: 16px 0;font-size: 12px;
}.user_dr {color: #FFFAF0;line-height: 31px;font-size: 12px;text-align: center;background: url(../img/精灵图/私房歌单.png) no-repeat 0 -195px;width: 100px;height: 31px;margin: 0 auto;
}.user_dr:hover {cursor: pointer;background: url(../img/精灵图/私房歌单.png) no-repeat -110px -195px;
}.nr2_gs {width: 210px;margin: 0 auto;/* border: 1px solid red; */
}.right_nr2 {margin-top: 10px;
}.list_gs {height: 24px;border-bottom: 1px solid #e9e9e9;
}.list_gs a:nth-child(1) {float: left;font-size: 12px;color: black;font-weight: bold;
}.list_gs a:nth-child(2) {color: #666;float: right;font-size: 12px;
}.list_gs a:nth-child(2):hover {text-decoration: underline;
}.gs_js {overflow: hidden;border: #999 1px solid;margin: 12px 0;
}.gs_js:hover {cursor: pointer;background-color: #F4F4F4
}.gs_js>img {float: left;
}.gs_js_nr {box-sizing: border-box;line-height: 30px;float: left;margin-left: 15px;
}.gs_js_nr>span {font-weight: bold;color: #333;
}.gs_js_nr p {color: #666666;font-size: 12px;}.gs_js::after {content: "";display: block;height: 0;clear: both;
}.sqyyr {box-shadow: 0 0 2 #999;border-radius: 4px;color: #000000;font-weight: bold;font-size: 12px;line-height: 28px;text-align: center;height: 28px;
}.gs_js2 {border: none;
}.gs_js_nr2 {/* text-overflow: ellipsis; */line-height: 20px;
}.gs_js_nr2 span {font-size: 12px;
}.gs_js2:hover {background-color: transparent;
}.gs_js2:hover span {text-decoration: underline;
}/* 页脚部分 */
.footer {border-top: #D3D3D3 solid 1px;background-color: #f5f5f5;
}.foot {/* float: left; */box-sizing: border-box;width: 980px;height: 173px;margin: 0 auto;/* border: 1px solid pink; */
}.foot1 {/* border: 1px solid pink; */float: left;width: 54%;padding-top: 12px;
}.foot1 li {color: #666;line-height: 23px;font-size: 12px;
}.foot1 li a {color: #999;font-size: 12px;
}.foot1 li a:hover {text-decoration: underline;
}.foot2 {margin-top: 20px;/* width: 100px;height: 100px; *//* border: 1px solid pink; */float: right;
}.foot2_img1 {margin: 0 10px;display: inline-block;/* width: 50px;height: 50px; *//* float: right; *//* border: 1px solid pink; */
}.fimg1 {/* border: 1px solid red; */display: inline-block;background: url(../img/精灵图/quanquan.png) no-repeat -52px -451px;background-size: 104px 545px;width: 56px;height: 44px;
}.fimg2 {/* border: 1px solid red; */font-size: 12px;text-align: center;background: url(../img/精灵图/音乐人.png) no-repeat -1px -119px;background-size: 171px 153px;width: 66px;height: 11px;
}.fimg3 {/* border: 1px solid red; */display: inline-block;background: url(../img/精灵图/quanquan.png) no-repeat 0 0;background-size: 104px 545px;width: 44px;height: 44px;
}.fimg4 {/* border: 1px solid red; */font-size: 12px;text-align: center;background: url(../img/精灵图/音乐人.png) no-repeat -5px -100px;background-size: 180px 153px;width: 43px;height: 10px;
}.fimg5 {/* border: 1px solid red; */display: inline-block;background: url(../img/精灵图/quanquan.png) no-repeat -50px -451px;background-size: 104px 545px;width: 66px;height: 44px;
}.fimg6 {/* border: 1px solid red; */font-size: 12px;text-align: center;background: url(../img/精灵图/音乐人.png) no-repeat 8px 0;background-size: 178px 153px;width: 60px;height: 10px;
}.fimg7 {/* border: 1px solid red; */display: inline-block;background: url(../img/精灵图/quanquan.png) no-repeat -60px -50px;background-size: 104px 545px;width: 44px;height: 44px;
}.fimg8 {/* border: 1px solid red; */font-size: 12px;text-align: center;background: url(../img/精灵图/音乐人.png) no-repeat -4px -60px;background-size: 176px 153px;width: 33px;height: 10px;
}.fimg9 {/* border: 1px solid red; */display: inline-block;background: url(../img/精灵图/quanquan.png) no-repeat 0 -100px;background-size: 104px 545px;width: 44px;height: 44px;/* border: 1px solid red; */
}.fimg10 {/* border: 1px solid red; */font-size: 12px;text-align: center;background: url(../img/精灵图/音乐人.png) no-repeat -5px -80px;background-size: 175px 153px;width: 40px;height: 10px;
}/* .f1 {display: inline-block;background: url(../img/精灵图/quanquan.png) no-repeat -60px -100px;background-size: 104px 545px;width: 66px;height: 44px;
}.f2 {  background: url(../img/精灵图/音乐人.png) no-repeat -125px -100px;background-size: 170px 153px;width: 40px;height: 10px;
}/* 固定播放器 */.gd_bfq:hover {bottom: 0px;
}.gd_bfq {box-shadow: 0 -3px 5px #666666;transition: bottom 0.5s;position: relative;width: 100%;position: fixed;bottom: -44px;background-color: #262626;
}.gd_bfq_nr {/* height: 53px; */width: 980px;margin: 0 auto;
}.gd_nr1 {margin-top: 8px;float: left;height: 7px;/* border: 1px solid red; */
}.gd_nr1::after {content: "";display: block;height: 0;clear: both;zoom: 1;
}
/* .content{position: relative;
} */
.top{background: url(../img/精灵图/top.png) no-repeat;background-position:-265px -46px;bottom:160px ;right: 390px;position: fixed;width: 49px;height: 43px;/* border: 1px solid red; */
}
.top:hover{background: url(../img/精灵图/top.png) no-repeat;background-position:-325px -46px;bottom:160px ;right: 390px;
}.gd_nr2 {cursor: pointer;margin-top: 10px;margin-left: 27px;border-radius: 10px;float: left;background: url(../img/精灵图/playbar.png) no-repeat 0 -80px;width: 34px;height: 38px;
}.gd_nr3 {margin-left: 20px;margin-top: 30px;float: left;width: 475px;border-radius: 4px;height: 8px;background-color: red;
}.gd_nr3 span {position: absolute;background: url(../img/精灵图/iconall.png) no-repeat 0 -252px;bottom: -17px;left: 458px;width: 22px;height: 22px
}.gd_nr3>div{position: relative;
}
.gd_nr3 span:hover {cursor: pointer;background: url(../img/精灵图/iconall.png) no-repeat 0 -282px;width: 22px;height: 22px
}.gd_nr2 img {width: 100%;
}.jshi {margin-left: 5px;margin-top: 22px;color: #666666;float: left;
}.jshi span {font-size: 12px;
}.tixing {position: absolute;background: url(../img/精灵图/playbar.png) no-repeat 0 -380px;width: 67px;height: 68px;top: -20px;right: -16px;
}.tixing span {top: 9px;left: 20px;position: absolute;z-index: 4;/* border: 1px solid beige; */display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -82px -383px;width: 14px;height: 13px;
}.tixing span:hover {background: url(../img/精灵图/playbar.png) no-repeat -82px -403px;width: 14px;height: 13px;
}.gd_nr1 span:first-child {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -2px -131px;width: 28px;height: 28px;
}.gd_nr1 span:first-child:hover {cursor: pointer;background: url(../img/精灵图/playbar.png) no-repeat -32px -131px;width: 28px;height: 28px;
}.gd_nr1 span:nth-child(2) {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -2px -205px;width: 33px;height: 33px
}.gd_nr1 span:nth-child(2):hover {cursor: pointer;background: url(../img/精灵图/playbar.png) no-repeat -42px -205px;width: 33px;height: 33px
}.gd_nr1 span:last-child {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -79px -131px;width: 28px;height: 28px;
}.gd_nr1 span:last-child:hover {cursor: pointer;background: url(../img/精灵图/playbar.png) no-repeat -109px -131px;width: 28px;height: 28px;
}.gd_nr4 {margin-left: 30px;margin-top: 20px;float: left;
}.gd_nr4 span:first-child {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -92px -166px;width: 24px;height: 24px;
}.gd_nr4 span:first-child:hover {cursor: pointer;display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -92px -192px;width: 24px;r height: 24px;
}.gd_nr4 span:nth-child(2) {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -92px -166px;width: 24px;height: 24px;
}.gd_nr4 span:nth-child(2):hover {cursor: pointer;display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -92px -192px;width: 24px;height: 24px;
}.gd_nr4 span:last-child {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -118px -166px;width: 24px;height: 24px;
}.gd_nr4 span:last-child:hover {cursor: pointer;display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -118px -192px;width: 24px;height: 24px;
}.gd_nr5 {margin-left: 8px;margin-top: 18px;color: #444;float: left;
}.gd_nr6 {margin-top: 20px;float: right;
}.gd_nr6 span:first-child {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -5px -250px;width: 24px;height: 24px;
}.gd_nr6 span:first-child:hover {cursor: pointer;display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat no-repeat -34px -250px;width: 24px;r height: 24px;
}.gd_nr6 span:nth-child(2) {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -6px -346px;width: 24px;height: 24px;
}.gd_nr6 span:nth-child(2):hover {cursor: pointer;display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -36px -346px;width: 24px;height: 24px;
}.gd_nr6 span:last-child {display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -45px -71px;width: 56px;height: 24px;
}.gd_nr6 span:last-child:hover {cursor: pointer;display: inline-block;background: url(../img/精灵图/playbar.png) no-repeat -45px -101px;width: 56px;height: 24px;
}

关于仿写写一个网易云静态页面的那些事相关推荐

  1. 网易云静态页面(Html + Css)

    苦难是化了妆的幸福,有苦有乐的人生才是充实的!!! 效果图: 项目简介: 该项目使用 Html + Css 实现 使用 Less(css预处理器)来编写页面样式,采用 flex 进行布局 技术栈: H ...

  2. 网易云静态页面html+css-----首页、热歌榜、搜索

    首页 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8"> ...

  3. 手把手教你用Java实现一个“网易云音乐”

    话说前阵子与三枪内衣 推出联名内裤的网易云音乐, 又有热门话题了! 想必大家也已经猜出来 据说是因违反相关规定被下架30天, 在各大安卓应用商店搜索显示 "服务调整"暂不提供下载, ...

  4. 仿小米商城和登录的静态页面

    仿小米商城和登录的静态页面 以下仅为参考,下载学习请前往本人gitee仓库 主页(index).html index.css search.js login.html login.css login. ...

  5. Swift5之网易云音乐页面搭建

    Swift5之网易云音乐页面搭建 纯swift5项目搭建 https://gitee.com/johnson__save_admin/netease-music-swift/

  6. 如何创建一个网易云歌单外链

                                  如何创建一个网易云歌单外链 首先打开网易云音乐,打开一个歌单或者自己创建一个歌单 点解生成外链播放器 这里可以选择iframe和flash两 ...

  7. web前端项目（一） 做一个网易考拉官网 常规静态页面 + 页面放到http服务 + 前后端分离

    1 新建文件夹 分css img 文件夹 index.html 静态页面 2 将本地做的静态页面放到 http 服务 localhost:8080 设置nodejs静态目录 npm install e ...

  8. 仿qq音乐官网部分静态页面

    简介: 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面, 一共有五个静态页面,如下图 首页部分: 歌手部分: 新碟部分: 排行榜部分(可播放音乐): 分类歌单部分:

  9. 体验Vue3.0,　仿一个网易云音乐客户端

    一.用到的技术栈 前端: vue3.0全家桶:(ts+jsx) vuex: vuex-module-decorators swiper:非常受欢迎与实用的轮播图插件,swiper create-key ...

  10. python3GUI--仿做一个网易云音乐By:PyQt5（附下载地址）

    文章目录 一．前言 二．展示 2.1主界面 1.主界面 2.歌单 3.播客 3.最新音乐 4.综合展示(动图) 5.专属定制-音乐雷达 6.专属定制-音乐雷达(动图) 7.专属定制-音乐歌单推荐 2. ...

最新文章

  1. 鸟哥的Linux私房菜(基础篇)-第一章、Linux是什么（一.2. Torvalds的Linux发展）
  2. mysql pt-kill_percona-toolkit之pt-kill 杀掉mysql查询或连接的方法
  3. 【HDU - 5889】Barricade（最短路+网络流，最小割）
  4. CDH 6 安装 Hbase 二级索引 Solr + Key-Value Store Indexer
  5. Spring Cloud Alibaba 深度解密！
  6. iQOO Neo5活力版或本月发布：搭载骁龙870+高刷LCD屏
  7. mysql 事务 注意 优化_MySQL入门详解（二）---mysql事务、锁、以及优化
  8. linux中的环境变量作用
  9. dedecms手机站和PC站共用同一数据库的方法
  10. 中国大学 MOOC C语言程序设计----编程部分答案解析
  11. cmpp java代码_cmpp.java 源代码在线查看 - cmpp的开发的短信端口实例 资源下载 虫虫电子下载站...
  12. 选择日期弹框html,JS——点击文本框弹出选择日期表格
  13. vue获取麦克风_HTML5操作麦克风获取音频数据（WAV）的一些基础技能
  14. 双核浏览器切换内核（模式）的行为分析
  15. VS配置GLAD+GLFW
  16. python常见算法实现_几种常见算法的Python实现
  17. 黑马程序员就业班第二天的总结以及自己的看法
  18. 驯服最难以捉摸的野兽──创新
  19. SqlServer2017 AlwaysOn 读写分离 无域控
  20. 深度学习经典卷积神经网络之VGGNet

热门文章

  1. Arduino 电机测速
  2. 风险模型—VaR模型1
  3. 获取用户的openid与遇到的errcode:40029与errcode:40125,errmsg
  4. 【专家独推】全网最全Matlab常用函数（包括按首字母进行分类）
  5. 2.2 matlab矩阵变换（对角阵、三角阵、矩阵的转置、矩阵的旋转、矩阵的翻转和矩阵求逆）
  6. SQL入门之第八讲——UPDATE更新语句
  7. java基于ssm的房屋租赁管理系统
  8. 黑马程序员与兄弟连兄弟会的对比
  9. word一打字就有下划线_word打字自带下划线 为什么WORD打字时总带有下划线，如何解决？...
  10. 如何把高版本unity资源导入Laya