HTML+CSS实现网易云音乐首页的主播电台页面

最新推荐文章于 2024-10-12 21:41:26 发布
最新推荐文章于 2024-10-12 21:41:26 发布
阅读量3.4k 收藏 48
点赞数
分类专栏： css 文章标签： css3 css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yujiaj/article/details/118386466
版权

HTML+CSS实现网易云音乐首页的主播电台页面

这个页面首先使用了css的定位（postion）属性、弹性盒子（display）属性以及VM与REM，图标使用了阿里巴巴矢量图标库的矢量图标。下面让我们来看看最终效果图和代码吧。
效果图：

效果图
效果图
使用到的源文件中的图片：（底部使用的矢量图标，非JPG）
使用的图片
HTML代码：（style.css是公共样式及头部和footer的CSS样式，anchor.css是主播电台的CSS样式，iconfont.css是引入footer的矢量图标）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>主播电台</title>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/anchor.css"/>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<!--头部-->
		<div class="top_big">
			<div class="top">
				<i class="iconfont font22"><img src="img/top-01.png"/></i>
				<input type="search" name="" class="iconfont font22" value="" placeholder="&#xe6e7;&nbsp;&nbsp;搜索音乐、歌词、电台" />
				<i class="iconfont font22"><img src="img/top-02.png"/></i>
			</div>
		</div>
		
		<!--主体内容-->
		<div class="main">
			<!--导航-->
			<div class="main_nav">
				<a href="#">个性推荐</a>
				<a href="#">歌单</a>
				<a href="#">主播电台</a>
				<a href="#">排行榜</a>
			</div>
			<!--主体内容一-->
			<div class="one_main">
				<p>
				<a href="#">
					<img src="img/twocontent-01.png"/>
					<span>明星做主播</span>
				</a>
				<a href="#">
					<img src="img/twocontent-02.png"/>
					<span>创作|翻唱</span>
				</a>
				<a href="#">
					<img src="img/twocontent-03.png"/>
					<span>脱口秀</span>
				</a>
				<a href="#">
					<img src="img/twocontent-04.png"/>
					<span>美文读物</span>
				</a>
				</p>
				
				<p>
				<a href="#">
					<img src="img/twocontent-05.png"/>
					<span>音乐故事</span>
				</a>
				<a href="#">
					<img src="img/twocontent-06.png"/>
					<span>情感调频</span>
				</a>
				<a href="#">
					<img src="img/twocontent-07.png"/>
					<span>有声小说</span>
				</a>
				<a href="#">
					<img src="img/twocontent-08.png"/>
					<span>人文历史</span>
				</a>
				</p>
				
				<p class="cricle">
					<i></i>
					<i></i>
					<i></i>
				</p>
			</div>
			
			<!--主播电台排行榜-->
			<div class="ranking_list_big">
				<div class="ranking_list">
					<span>
						<p class="iconfont font22">主播电台排行榜&#xe62d;</p>
						<p><span>最火的节目和电台，</span>每天更新</p>
					</span>
					
					<span>
						<img src="img/twocontent-09.png"/>
					</span>
				</div>
			</div>
			
			<!--精彩节目推荐-->
			<div class="recommend">
				<h2>精彩节目推荐</h2>
				<ul>
					<li>
						<a href="#">
							<span class="left"><img src="img/twocontent-10.png"/></span>
							<span class="left">
								<p>特别的人</p>
								<p>最美不过告白当前唱的歌</p>
							</span>
						</a>
					</li>
					
					<li>
						<a href="#">
							<span class="left"><img src="img/twocontent-11.png"/></span>
							<span class="left">
								<p>什么？唐朝人不爱胖子！</p>
								<p>为什么糖厂审美不一样呢？</p>
							</span>
						</a>
					</li>
					
					<li>
						<a href="#">
							<span class="left"><img src="img/twocontent-12.png"/></span>
							<span class="left">
								<p>惨就一个字</p>
								<p>你遇到最惨的事是什么？</p>
							</span>
						</a>
					</li>
					
					<li>
						<a href="#">
							<span class="left"><img src="img/twocontent-11.png"/></span>
							<span class="left">
								<p>什么？唐朝人不爱胖子！</p>
								<p>为什么糖厂审美不一样呢？</p>
							</span>
						</a>
					</li>
					
					<li>
						<a href="#">
							<span class="left"><img src="img/twocontent-12.png"/></span>
							<span class="left">
								<p>惨就一个字</p>
								<p>你遇到最惨的事是什么？</p>
							</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		<!--脚部-->
		<div class="footer">
			<i>
				<span class="iconfont font22">&#xe63b;</span>
				<p>发现音乐</p>
			</i>
			<i>
				<span class="iconfont font22">&#xe724;</span>
				<p>我的音乐</p>
			</i>
			<i>
				<span class="iconfont font22">&#xe604;</span>
				<p>朋友</p>
			</i>
			<i>
				<span class="iconfont font22">&#xe618;</span>
				<p>账号</p>
			</i>
		</div>
	</body>
</html>

style.css代码：

/*全局样式*/
*{margin:0;padding: 0;box-sizing: border-box;}
li{list-style:none;}
a{text-decoration: none;}
i{font-style: normal;}
img{display:block;border:none;}
html,body{height:100%;}
html{font-size:26.66667vw;}
body{font-size:14px;}
.left{float: left;}
.right{float: right;}

/*头部*/
.top_big{
	width:100%;
	height:0.44rem;
	color: #cbcbcb;
	font-size: 26px;
	position: absolute;
	top:0;
	left:0;
	background:#d43b33;
	z-index: 999;
}
.top{
	display: flex;
	justify-content: space-between;
	height: 100%;
	align-items: center;
	padding:0 0.125rem 0 0.14rem;
}
.top>i:first-child>img{
	width: 0.19rem;
    height: 0.25rem;
}
.top>i:last-child>img{
	width: 0.23rem;
    height: 0.23rem;
}
.top>input{
	width: 2.67rem;
    height: 0.3rem;
    color: #dbdbdb;
    font-size: 14px;
    text-align: center;
    border: none;
	outline: none;
	border-radius: 0.05rem;
}

/*主体内容*/
/*导航*/
.main{
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 0.44rem 0 0 0;
	padding-bottom: 0.7rem;
}
.main_nav{
	width: 100%;
	height: 0.4rem;
	display: flex;
	line-height: 0.4rem;
	font-size: 14px;
	justify-content: space-between;
	padding: 0 0.25rem 0 0.13rem;
	border-bottom:  0.005rem solid #cdc2c8;
}
.main_nav a{
	color: #393939;
	text-align: center;
}
.main_nav a:first-child{
	width: 0.7rem;
	height: 100%;
	color: #bb4537;
	border-bottom: 0.02rem solid #ca403d;
	box-sizing: border-box;
}

/*焦点图*/
.banner,.banner>img{
	width: 100%;
	height: 1.38rem;
}

/*内容二*/
.main_two{
	width: 100%;
	height: 1.04rem;
	display: flex;
	justify-content: space-between;
	padding: 0.15rem 0.345rem 0.15rem 0.43rem;
	border-bottom: 0.005rem solid #e0e1e3;
	margin-bottom: 0.2rem;
}
.main_two>span{
	width: 0.72rem;
	height: 100%;
	font-size: 12px;
	text-align: center;
	position: relative;
}
.main_two>span>img{
	width: 0.55rem;
	height: 0.55rem;
	display: inline-block;
	vertical-align: middle;
}
.main_two>span>p{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

/*推荐歌单*/
.recommend{
	width: 100%;
	padding: 0 0.1rem 0 0.1rem;
}
.recommend_top{
	height: 0.16rem;
	color: #323335;
	display:flex;
	justify-content: space-between;
}
.recommend_top>span>img{
	width: 0.16rem;
	height: 0.16rem;
	display: inline-block;
	margin-right: 0.06rem;
}
.recommend_top>span>span{font-size: 14px;}
.recommend_top>a{font-size: 12px;color: #696b6a;}
.recommend_content{
	width: 100%;
	padding-top: 0.2rem;
}
.recommend_content span{
	display:flex;
	justify-content: space-between;
}
.recommend_content i{
	width: 1.13rem;
	height: 1.52rem;
	font-size: 12px;
	position: relative;	
}
.recommend_content i>a>img{
	width: 100%;
	height: 1.13rem;
}
.recommend_content i>a{color: #424345;}
.recommend_content i>a>p{
	height: 0.34rem;
	position: absolute;
	bottom: 0;
	left: 0;
}
.recommend_content span:first-child{margin-bottom: 0.18rem;}

/*脚部*/
.footer{
	width: 100%;
	height: 0.49rem;
	position: absolute;
	bottom:0;
	left:0;
	background-color: rgba(0,0,0,0.75);
	display:flex;
	justify-content: space-between;
	padding: 0.07rem 0.28rem 0 0.28rem;
	
}
.footer>i{
	width: 0.5rem;
	height: 0.42rem;
	color: #a6a8a7;
	text-align: center;
	font-size: 10px;
}
.footer>i>span{font-size: 25px;}
.footer>i:first-child{color: #fff;}

anchor.css代码：

/*主体内容*/
/*导航*/
.main_nav a:first-child{
	color: #393939!important;
	border-bottom: none!important;
}
.main_nav a:nth-child(3){
	width: 0.7rem;
	height: 100%;
	color: #bb4537;
	border-bottom: 0.02rem solid #ca403d;
	box-sizing: border-box;
}

/*主体内容一*/
.one_main{
	width: 100%;
	height: 1.5rem;
	padding: 0.18rem 0.2rem 0.1rem 0.175rem;
}
.one_main p{
	width: 100%;
	height: 0.42rem;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.one_main a{
	width: 0.6rem;
	height: 0.42rem;
	text-align: center;
	font-size: 11px;
	color: #838584;
	position: relative;
}
.one_main a>img{
	width: 0.26rem;
	height: 0.24rem;
	margin: 0 auto;
}
.one_main a>span{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.one_main>p:last-child{
	width: 0.27rem;
	height: 0.06rem;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
.one_main>p:last-child>i{
	width: 0.06rem;
	height: 0.06rem;
	border-radius: 50%;
}
.one_main>p:last-child>i:first-child{
	background-color: #c64629;
}
.one_main>p:last-child>i:nth-child(2),.one_main>p:last-child>i:nth-child(3){background-color: #e2e3e5;}

/*主播电台排行榜*/
.ranking_list_big{
	width: 100%;
	height: 0.8rem;
	padding: 0 0.06rem;
	margin-top: 0.1rem;	
	margin-bottom: 0.3rem;
}
.ranking_list{
	width: 3.64rem;
	height: 0.8rem;
	border: 0.01rem solid #d5d6d8;
	box-sizing: border-box;
	padding: 0.11rem 0.15rem 0 0.15rem;
	display: flex;
	justify-content: space-between;
}
.ranking_list>span:first-child{
	width: 1.69rem;
	height: 0.37rem;
	font-size: 15px;
	color: #313234;
	margin-top: 0.1rem;
}
.ranking_list span>p:last-child{font-size: 12px;color: #5b5c5e;margin-top: 0.1rem;}
.ranking_list span>p:last-child span{color: #a04847;}
.ranking_list span:last-child,.ranking_list span>img{
	width: 0.865rem;
	height: 0.67rem;
}
/*精彩节目推荐*/
.recommend{
	width:100%;
	color: #3f4042;
	padding: 0 0.1rem;
}
.recommend h2{
	width: 100%;
	height: 0.17rem;
	font-size: 16px;
	font-weight: normal;
	box-sizing: border-box;
	padding-left: 0.06rem;
	border-left: 0.03rem solid #d33c31;
	margin-bottom: 0.14rem;
}
.recommend li{
	width: 3.56rem;
	height: 0.68rem;
	border-top: 0.05px solid #e2e3e5;
	padding: 0.06rem 0 0.07rem 0;
}
.recommend li>a>span>img{
	width: 0.56rem;
	height: 0.56rem;
	margin-right: 0.08rem;
}
.recommend li>a>span:last-child{
	height: 0.38rem;
	line-height: 0.22rem;
	margin-top: 0.11rem;
}
.recommend li>a>span:last-child p:first-child{font-size: 13px;color: #323335;}
.recommend li>a>span:last-child p:last-child{font-size: 12px;color: #848486;}

在这里附上源文件地址链接：https://pan.baidu.com/s/1j9_zvovted9zeNSOPoCxUQ
提取码：y1yw

yujiaj
关注
专栏目录
网易云音乐html代码_网易云音乐歌单列表导出方法！
weixin_39836726的博客
11-28 3732
将网易云音乐歌单完整导出，我自己试过很多方法，几乎全部以失败告终，最后几乎找遍全网所有的论坛和网上资源，找到目前可行的方法：将别人的歌单变成自己的歌单（自己新建一个歌单，然后全选别人的歌单里面歌曲，添加到自己新建的歌单里面）——具体原因稍后解释。然后在网页端的网易云音乐里面打开自己的歌单页面，按下F12进入控制台（console），切换iframe。接下来有两种方法可以得到歌单的歌曲列表：（方法一...
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
qq_524614081的博客
11-17 830
HTML+CSS大作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
【网易云音乐】--源代码分享
最新发布
2301_81253185的博客
10-12 3049
网易云音乐歌曲功能（评论源代码分享）页面一：页面二： 页面三： 关于音乐播放的实现大家可以通过下面这个链接学习进行实现，功能是一样的【前端】-音乐播放器（源代码和结构讲解，大家可以将自己喜欢的歌曲添加到数据当中，js实现页面动态显示音乐）-CSDN博客歌词实现动态效果思想：1.获得播放歌词内容2.通过歌词数据初始化当前歌词列表3.通过获取audio对象，获取播放时间，然后通过将json中的对象中的时间进行解析成秒数，通过当前音乐时间找出应该播放哪句歌词，然后给当前歌词进行高光设置，并且将歌词进行改变（
html网页中加入音乐播放器,HTML网页调用 网易云 音乐播放器代码
weixin_27283495的博客
05-30 4295
HTML网页调用 网易云 音乐播放器代码发布时间：2018-12-05 18:17,浏览次数：2610, 标签：HTML表现形式一：单曲播放调用代码：width=100% height=86src="http://music.163.com/outchain/player?type=2&id=299757&auto=1&height=66">参数说明：效果图播放器可修...
网易云手机端首页（html+css)
04-15
通过HTML+css实现了网易云手机端首页的静态布局，对于手机端网页的搭建结构有了初步了解以及应用。
网易云音乐html代码_网易云音乐：价值音乐发现者
weixin_39700397的博客
11-12 578
注：本文也是问题——你为什么卸载了网易云音乐下的一个回答！首先，我最早是QQ音乐/多米音乐使用者，现在是网易云音乐骨灰级使用者。目前我在网易云听歌数量32000+首（我是网易云音乐前100万的注册玩家）。应该是音乐爱好者无疑了吧，想必也够格回答这个问题。2011年的时候，QQ音乐曾经推出过一个功能“猜你喜欢”，当时我很欣喜，对于我这样一个超级音乐爱好者来说，这无疑是邂逅未知音乐的好途径，刚开始听，...
精讲前端实战项目之移动端网易云首页（附源码）
静Yu的博客
09-03 4805
本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对html，css，JavaScript等基础知识已经是相当熟悉了。但是没有一个自己的作品，那是因为缺乏练习一些实战项目。今天这个就是一个很好的实战例子——移动端网易云首页，刚开始就做一些简单的静态网页。 本人会用到很多标签，如果忘记了可以查看下面两篇博文。 标签详解第一篇 标签详解第二篇 一、效果展示 二、技术要求 因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就.
用HTML+CSS仿网易云音乐网站(6个页面)
weixin__BJ050106的博客
08-16 7563
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结...
用html写网易云的热门音乐
m0_56218765的博客
05-02 881
图片需要自己从网上下载，代码里图片的路径及图片名称需要修改成自己的 <body> <h1>&nbsp;热门推荐&nbsp;&nbsp;&nbsp;华语|&nbsp;&nbsp;流行|&nbsp;&nbsp;摇滚|&nbsp;&nbsp;民谣|&nbsp;&nbsp;电子|</h1> <table > <.
HTML作业-仿网易云音乐项目
04-29
html作业，仿照网易云音乐客户端练练，可以播放音乐，可以看歌词、拖进度等等，可以换肤，我本人喜欢黑色的皮肤，白色皮肤是赶时间加上去的，有的地方不协调。
html5分享直播页面
11-01
html5分享直播页面
网易云音乐html代码首页_网易云音乐iOS版7.0正式版发布：首页全新内容，增加“云村精选”...
weixin_27758233的博客
01-29 478
1月6日消息 继早前网友反馈网易云音乐iOS版发布内测版7.0.0更新后，官方于今日正式推送了正式版7.0.0更新文件。官方更新文档如下：网易云音乐7.0来了，全新改版，每天听新歌!1、首页全新内容，好听的新歌等你发现!好听的新歌来自”场景推荐”好听的新歌来自“周围的人”好听的新歌来自“同样年龄”好听的新歌来自“这种天气”好听的新歌来自“特殊节日”......2、 我的页面全新样式，带来更好的听歌...
HTML网易云音乐页面设计,QtDesigner实现网易云音乐助手的页面设计
weixin_42396760的博客
06-04 1531
上篇文章介绍了PyQt5在PyCharm中的应用，那么现在就实战下，把爬取网易云音乐歌词的程序使用GUI编程做出来吧。1.设计使用墨刀大体设计了一个很粗略的原型图2.实现1).设置主程序大小新建了MainWindow后，在右侧PropertyEditor中设置minimumSize和maximumSize为设计图中的730px*540px，这两个值为一致的话则为固定窗口大小。2).设置Tab Wi...
HTML网页调用 网易云 音乐播放器代码
热门推荐
YFCMS博客
12-05 5万+
表现形式一：单曲播放 调用代码： &amp;lt;iframe frameborder=&quot;no&quot; border=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; width=100% height=86 src=&quot;http://music.163.com/outchain/player?type=2&am
html简单网页代码：用HTML+CSS仿网易云音乐网站(6个页面)
12-22 1304
📂文章目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、💠网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货 一、👨‍🎓网站题目 🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。 二、✍️网站描述 🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域
【HTML5网页期末作业】基于HTML+CSS+JS实现宠物网站，表单展示登录页面，带JS密码验证
HTML网页设计
08-06 844
🐕 宠物网页设计 、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的......
仿网易云音乐网页版html代码_免费畅听所有网易云音乐！！！！
weixin_39823017的博客
12-04 6978
“阅读本文仅需一分钟”自从前年年底起所有的web端在线音乐全部一夜下降之后，今年网页版音乐又再度回到我们的视野。说是整改，需要将音乐资源屏蔽，许多音乐运营商都重构了代码，然而我还是禁不住用爬虫去试试，看看到底发爬虫到什么程度，但是结果令我大吃一惊。。。。。。网易云音乐压根没怎么去修改。。。但是他把歌曲的url地址隐藏了。。。。然后我们又想了很多办法去搞他。。。最后，爬虫代码照样还是通行无...
仿网易云音乐html代码,HTML作业-仿网易云音乐项目
weixin_32641973的博客
06-03 2715
【实例简介】html作业，仿照网易云音乐客户端练练，可以播放音乐，可以看歌词、拖进度等等，可以换肤，我本人喜欢黑色的皮肤，白色皮肤是赶时间加上去的，有的地方不协调。【实例截图】【核心代码】Music└── Music├── action.js├── font.otf├── index.html├── lrc.js├── mp3│ ├── cd.mp3│ ├── fqxdsws.mp3│...
使用HTML+CSS构建网易云音乐网站界面
资源摘要信息:"HTML+CSS实现网易云网站" 1. HTML基础知识 HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它定义了网页的结构和内容。在实现网易云音乐网站的过程中，首先需要使用HTML来构建网站...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值