精讲前端实战项目之移动端网易云首页（附源码）_仿网易云音乐移动端开发简历说明(2)-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_82241775/article/details/138856454

本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。

最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。

最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！下面就开始进入正题，如何从一个萌新一步一步进入网络安全行业。

学习路线图

其中最为瞩目也是最为基础的就是网络安全学习路线图，这里我给大家分享一份打磨了3个月，已经更新到4.0版本的网络安全学习路线图。

相比起繁琐的文字，还是生动的视频教程更加适合零基础的同学们学习，这里也是整理了一份与上述学习路线一一对应的网络安全视频教程。

网络安全工具箱

当然，当你入门之后，仅仅是视频教程已经不能满足你的需求了，你肯定需要学习各种工具的使用以及大量的实战项目，这里也分享一份我自己整理的网络安全入门工具以及使用教程和实战。

项目实战

最后就是项目实战，这里带来的是SRC资料&HW资料，毕竟实战是检验真理的唯一标准嘛~

面试题

归根结底，我们的最终目的都是为了就业，所以这份结合了多位朋友的亲身经验打磨的面试题合集你绝对不能错过！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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


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

```

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

<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{
	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;


## 写在最后

**在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。**


需要完整版PDF学习资源私我



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.youkuaiyun.com/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**