精讲前端实战项目之移动端网易云首页（附源码）_仿网易云音乐移动端开发简历说明

于 2024-05-04 00:43:27 发布
阅读量180 收藏
点赞数 1
分类专栏： 程序员 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84411072/article/details/138429012
版权

三、源代码讲解

HTML部分

第一步：首先编写首页的搜索框

<header>
		<i class="iconfont">&#xe62f;</i>
		<form action="">
			<i class="iconfont">&#xe660;</i><input type="text" value="搜索音乐、歌词、电台">
		</form>
		<i class="iconfont">&#xe513;</i>
	</header>

第二步：中间的导航栏，包括个性推荐、歌单、主播电台、排行榜

<nav>
		<a href="">个性推荐</a>
		<a href="">歌单</a>
		<a href="">主播电台</a>
		<a href="">排行榜</a>
	</nav>

第三步：中间的主体部分推荐歌单，其中图片的引入是一样的，我就用了几张一样的图片，省的浪费时间下载。

<main>
		<section class="content">
			<article class="banner">
				<img src="../images/banner.png" alt="">
			</article>
			<article class="adcontent">
				<dl>
					<dt class="iconfont">&#xe627;
</dt>
					<dd>私人FM</dd>
				</dl>
				<dl>
					<dt class="iconfont">&#xe611;</dt>
					<dd>开启个性推荐</dd>
				</dl>
				<dl>
					<dt class="iconfont">&#xe513;</dt>
					<dd>云音乐新歌榜</dd>
				</dl>
			</article>
			<article class="title">
				<aside>
					<i class="iconfont">&#xe637;</i>
					<span>推荐歌单</span>
				</aside>
				<aside>
					<i>更多</i>
					<span>&gt;</span>
				</aside>
			</article>
			<article class="imglist">
				<dl>
					<dt>
						<img src="../images/pic_07.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_09.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_11.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_07.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_09.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_11.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_07.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_09.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_11.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_07.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_09.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
				<dl>
					<dt>
						<img src="../images/pic_11.png" alt="">
					</dt>
					<dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
				</dl>
			</article>
		</section>
	</main>

第四步：最下方的页脚设置

<footer>
		<aside><i class="iconfont">&#xe612;</i><span>发现音乐</span></aside>
		<aside><i class="iconfont">&#xe503;</i><span>我的音乐</span></aside>
		<aside><i class="iconfont">&#xe615;</i><span>朋友</span></aside>
		<aside><i class="iconfont">&#xe504;</i><span>账号</span></aside>
	</footer>

CSS部分

首先要在头标签中引入css样式

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>网易云</title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../css/webapp.css">
</head>

1.anchor.css

@charset "UTF-8";
*{
	box-sizing: border-box;
}
html,body{
	height:100%;
}
html{
	font-size:26.67vw;
}
body{
	display: flex;
	flex-direction: column;
}
/*header*/
header{
	height:0.49rem;
	background:#d43b33;
	display: flex;
	justify-content: space-between;
}
header>.iconfont{
	width:0.54rem;
	font-size:0.24rem;
	color:#fcf3ff;
	display: flex;
	align-items: center;
}
header form{
	flex:1;
	background:#fff;
	height:0.3rem;
	align-self: center;
	display: flex;
	border-radius:5px;
	overflow:hidden;
}
header form .iconfont{
	padding-left:0.47rem;
	display: flex;
	align-items: center;
	font-size:0.14rem;
	color:#c8c8c8;
}
header form input{
	border:none;
	flex:1;
	font-size:0.14rem;
	color:#c8c8c8;
	padding-left:0.09rem;
}
header>.iconfont:first-child{
	padding-left:0.15rem;
}
header>.iconfont:last-child{
	padding-left:0.18rem;
}
/*nav*/
nav{
	height:0.4rem;
	display: flex;
	justify-content: space-between;
	padding:0 0.12rem;
}
nav a{
	border-bottom:4px solid #fff;
	display: flex;
	align-items: center;
	padding:0.06rem;
}
nav a:first-child{
	color:#c04033;
	border-color:#c04033;
}
/*footer*/
footer{
	height:0.48rem;
	width:100%;
	position:fixed;
	bottom:0;
	background:rgba(0,0,0,0.8);
	display: flex;
	justify-content: space-between;
	padding:0 0.27rem;
}
footer aside{
	display: flex;
	flex-flow:column;
	justify-content: center;
	align-items: center;
}
footer aside .iconfont{
	color:#b2a3a0;
	font-size:0.25rem;
}
footer aside span{
	color:#b2a3a0;
	font-size:0.1rem;
}
footer aside:first-child .iconfont{
	color: #fff;
}
footer aside:first-child span{
	color:#fff;
}

2.reset.css

@charset "utf-8";
html,body,ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,fieldset,select,img,textarea,legend{
	margin:0;
	padding:0;
}
body{
	font-size:16px;
}
img,fieldset{
	border:none;
}
img{
	vertical-align: middle;
}
b,strong,i,em,h1,h2,h3,h4,h5,h6{
	font-weight:500;
	font-style:normal;
}
a{
	text-decoration: none;
	color:#000;
}
ul,ol{
	list-style:none;
}
.clearfn:after{
	content:"";
	clear:both;
	display: block;
	overflow:hidden;
	height:0;
	visibility: hidden;
}

3.webapps.css

@charset "UTF-8";
*{
	box-sizing: border-box;
}
html,body{


#### 专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

* HTML+CSS
* JavaScript
* 前端框架
* 前端性能优化
* 前端监控
* 模块化+项目构建
* 代码管理
* 信息安全
* 网络协议
* 浏览器
* 算法与数据结构
* 团队管理
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。



**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等**

**由于文章篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)
2401_84411072
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿网易云音乐网站.zip（纯HTML+CSS布局）
07-25
根据网易云音乐模仿的HTML+CSS布局，让你有更好的布局能力，该资源仅供个人学习参考使用，不做于商业用途如若有侵权行为，请联系本人谢谢。
ARM嵌入式项目开发三位一体实战精讲
11-12
ARM嵌入式项目开发三位一体实战精讲
网易云音乐播放器移动端项目源码基于uniapp多端开发,音乐播放、进度、缓存进度条监听，视频播放、上下滑动切换、加载相关同类视频
01-13
基于uniapp多端开发网易云音乐播放器移动端项目源码,音乐播放、进度、缓存进度条监听，视频播放、上下滑动切换、加载相关同类视频.《移动应用开发》小组项目
精讲前端实战项目之移动端网易云首页（附源码）
静Yu的博客
09-03 4746
本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对html，css，JavaScript等基础知识已经是相当熟悉了。但是没有一个自己的作品，那是因为缺乏练习一些实战项目。今天这个就是一个很好的实战例子——移动端网易云首页，刚开始就做一些简单的静态网页。 本人会用到很多标签，如果忘记了可以查看下面两篇博文。 标签详解第一篇 标签详解第二篇 一、效果展示 二、技术要求 因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就.
网易云音乐 index 页面 html5+css3
最新发布
m0_73968967的博客
11-03 669
推荐
模拟网易云的H5音乐播放器
Chenliaoyuan的博客
11-03 3414
转发我在github发布的一个H5音乐播放器 前言 这是我第一个GitHub项目，之前一直想在GitHub写点东西，近期又在学前端，刚好学到audio标签，平常时也比较喜欢听音乐写代码，因此就萌生了自己写一个音乐播放器的想法。利用了下班和周末的空闲时间，用了两周时间终于写出来了。当用代码一个个地把自己的想法实现出来，那种兴奋和成就感是无与伦比的。甚至周末的时候一码就码到通宵，还不觉得累哈哈。因为...
Qt及Qt Quick开发实战精解.zip_QT_QT 开发_Qt Quick_Quick_qt开发
07-15
Qt及Qt Quick开发实战精解Qt and Qt Quick Development Practical Digestion
FPGA嵌入式项目开发三位一体实战精讲
01-03
FPGA嵌入式项目开发三位一体实战精讲.PDF的清晰版本。
ARM嵌入式项目开发三位一体实战视频精讲程序代码+原理图.zip
05-01
ARM嵌入式项目开发三位一体实战精讲.pdfARM嵌入式项目开发三位一体实战视频精讲程序代码+原理图ARM嵌入式项目开发三位一体实战视频精讲程序代码+原理图ARM嵌入式项目开发三位一体实战视频精讲程序代码+原理图ARM...
Android项目实战：基于XMPP的即时通讯（IM）客户端精讲视频课程
06-09
本课程使用asmack、openfire等开源Library和软件实现一款基于Android的即时通讯软件。该软件支持普通的文本聊天，文件传输、群聊等功能。并且自己用openfire搭建服务端，通过本课程的学习，学员完全可以自己搭建和...
《移动应用开发》小组项目--网易云音乐播放器移动端项目源码.zip
05-29
《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码《移动应用开发》小组项目--网易云音乐播放器移动端项目源码
web版的网易云音乐
08-11
web版的网易云音乐
HTML+CSS实现网易云网站
05-31
HTML+CSS实现网易云网站
网易云手机端首页（html+css)
04-15
通过HTML+css实现了网易云手机端首页的静态布局，对于手机端网页的搭建结构有了初步了解以及应用。
HTML+CSS实现网易云音乐首页（手机版）
yujiaj的博客
07-01 6075
怎么利用HTML和CSS实现手机版的响应式页面（静态）呢？当然是要利用css的弹性盒子（display）和vm与rem啦，话不多说，请看下面的效果图和代码。 效果图： 用到的图片： 实现前端页面的HTML代码（注：图片中没有的图标，是用的阿里巴巴矢量图标库的矢量图标）： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport"...
调用网易云Api接口实现移动Web网易云部分功能(搜索+列表+播放）
热门推荐
qq_43372180的博客
06-12 1万+
调用网易云Node.js实现网易云音乐部分功能的实现
微信小程序网易云音乐设计与实现 毕业设计-附源码261620
yuyuxun的博客
02-04 5917
微信小程序的网易云音乐系统主要是对系统所要实现的功能进行详细考虑，确定所要实现的功能后进行界面的设计，在这中间还要考虑如何可以更好的将功能及页面进行很好的结合，方便用户可以很容易明了的找到自己所需要的信息，还有系统平台后期的可操作性，通过对信息内容的详细了解进行技术的开发。 微信小程序的网易云音乐系统的开发利用现有的成熟技术参考，以源代码为模板，分析功能调整与微信小程序的网易云音乐系统管理的实际需求相结合，讨论了基于微信小程序的网易云音乐系统管理的使用。
IT视频教程大全：前端开发、后端开发、Android开发、数据结构与算法
IT视频教程是IT行业的核心内容，它涵盖了IT行业的多个领域，包括前端开发、后端开发、Android开发、数据结构与算法、数据库、人工智能、C++等。以下是对IT视频教程的知识点总结： 一、前端开发 * 前端小白入门 * ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值