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

已于 2022-03-17 09:27:57 修改
阅读量821 收藏 14
点赞数
分类专栏： 仿写 文章标签： css3 html5 java javascript
于 2022-03-17 09:08:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49084104/article/details/123541618
版权

图片自己定

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">&#xe623;</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;
}
想做一条躺平的咸鱼
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于HTML和css的静态网页仿写
柠檬人的博客
03-07 3696
具体效果为: 采用的技术主要有： position定位 浮动布局 弹性盒子布局 a链接 伪类 表格表单等等 首先全局设置为： *{ margin: 0%; padding: 0%; } ul,ol{ list-style: none; } a{ text-decoration: none; } html,body{ width: 100%; height: 100%; } #footer{ width: 100%; he
仿网易云移动端项目Vue3.2+Pinia+Vant+axios
切图仔
05-24 2840
仿网易云移动端项目Vue3.2+Pinia+Vant+axios前期准备（Pinia，rem，初始化样式，图标引入，vant组件，axios） 安装pinia 1.在main.js引入注册 2.创建store rem移动适配 1.创建rem.js实现移动适配布局 2.在index.html引入 3.可以用px to rem 插件进行px和rem转换 阿里图标引入(Symbol方法) 1.在官网添加项目后复制symbol代码在index.html引入 2.使用svg 3.初始化样式，设
淘宝网页简单的仿写，html+css
07-24
里面有几个页面的练习，都是使用的，动态的，还有购物网站html+css
仿百度静态页面
ThinkPet
02-28 5385
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;仿百度静态页面&lt;/title&gt; &lt;link href="Baidu.css" rel="stylesheet" type=&q
精讲前端实战项目之移动端网易云首页（附源码）
静Yu的博客
09-03 4685
本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对html，css，JavaScript等基础知识已经是相当熟悉了。但是没有一个自己的作品，那是因为缺乏练习一些实战项目。今天这个就是一个很好的实战例子——移动端网易云首页，刚开始就做一些简单的静态网页。 本人会用到很多标签，如果忘记了可以查看下面两篇博文。 标签详解第一篇 标签详解第二篇 一、效果展示 二、技术要求 因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就.
仿网易云音乐平台（vue项目）
06-30
仿照网易云音乐的设计，实现音乐播放器功能。可以做毕设的参考和使用。
网易新闻仿写第一阶段
06-15
网易新闻仿写第一阶段源代码
仿写网易云课堂页面(html+css)[2019].zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html和css写的华为商城首页静态网页，.zip
10-01
html和css写的华为商城首页静态网页，.zip
网易云播放器的仿写源码
05-30
网易云播放器的仿写源码
一个展示网易云音乐的页面
08-10
一个展示网易云音乐的页面
web版的网易云音乐
08-11
web版的网易云音乐
仿网易云音乐界面UI
04-23
实现了部分的网易云音乐UI
淘宝静态网站首页仿写html+css，个人作业，
01-20
个人制作的部分淘宝网页，包括两个自创的子页面登陆和注册，不喜勿喷，谢谢！
写了个静态的网页-模仿网易云
ljlhnick的博客
06-18 5727
今天父亲节，正好用它来祝福我爸爸父亲节快乐 效果图 后面的动态效果是参考妙味里一个学员制作的 只贴html+css，因为js有点多，不知道怎么弄上来 html <html> <head> <meta charset="utf-8"> <title>miaowei</title> <link rel="st...
网易云静态页面html+css-----首页、热歌榜、搜索
weixin_59357486的博客
04-19 1584
html+css网易云静态页面练习
前端作品之静态页面设计（二）：网易云音乐页界面静态效果设计（iphonex兼容）
qq_41903105的博客
02-28 6135
做效果图之前，博主只说一句话，精益求精，能花费时间更多的时间去做到90%相似就不要60%相似。一定要认真去做~~~~~ 完成品欣赏： 代码： &lt;head&gt; &lt;title&gt;网易云音乐&lt;/titl...
HTML静态页面设计
热门推荐
近未来
05-17 6万+
１．编写一个自我介绍的HTML页面，要求使用HTML文档常用的文本、超链接、图片、表格、行级、块级等标签，页面要求布局合理，内容图文并茂，将源文件和素材保存在exp01\1\文件夹下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
在线音乐播放器 html,html5实现在线响应式音乐播放器
weixin_34872032的博客
05-30 867
大概很早的时候就有想法做一个音乐播放器玩玩，以前可能还考虑过做APP，大一的时候第一个html的静态页面也是做的音乐网站，想想，大概小时候比较喜欢音乐吧。然而，现在入了前端大坑，就用h5做一个耍耍好了。功能不多，UI不美，But，练习了html5中audio及其API的使用。欢迎吐槽~功能思路分析用了这么多年的音乐播放软件，目前已是网易云音乐的重度用户。一个基本的音乐播放器基础功能有：播放、暂停、...
仿写一个网易云商城登录页面和注册页面
05-24
很抱歉，作为 AI 模型，我无法为您提供网易云商城的页面仿写。但是，你可以尝试以下步骤来实现登录和注册页面： 登录页面： 1. 创建一个 HTML 文件，命名为 login.html。 2. 在文件中添加一个表单，包含两个输入框...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值