给大家的福利
零基础入门
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
同时每个成长路线对应的板块都有配套的视频提供：
因篇幅有限，仅展示部分资料
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
<main>
<section class="content">
<article class="banner">
<img src="../images/banner.png" alt="">
</article>
<article class="adcontent">
<dl>
<dt class="iconfont">
</dt>
<dd>私人FM</dd>
</dl>
<dl>
<dt class="iconfont"></dt>
<dd>开启个性推荐</dd>
</dl>
<dl>
<dt class="iconfont"></dt>
<dd>云音乐新歌榜</dd>
</dl>
</article>
<article class="title">
<aside>
<i class="iconfont"></i>
<span>推荐歌单</span>
</aside>
<aside>
<i>更多</i>
<span>></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"></i><span>发现音乐</span></aside>
<aside><i class="iconfont"></i><span>我的音乐</span></aside>
<aside><i class="iconfont"></i><span>朋友</span></aside>
<aside><i class="iconfont"></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;
}
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;
还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！
王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。
对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！
【完整版领取方式在文末！！】
***93道网络安全面试题***
内容实在太多，不一一截图了
### 黑客学习资源推荐
最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
😝朋友们如果有需要的话，可以联系领取~
#### 1️⃣零基础入门
##### ① 学习路线
对于从来没有接触过网络安全的同学，我们帮你准备了详细的**学习成长路线图**。可以说是**最科学最系统的学习路线**，大家跟着这个大的方向学习准没问题。
##### ② 路线对应学习视频
同时每个成长路线对应的板块都有配套的视频提供：
#### 2️⃣视频配套工具&国内外网安书籍、文档
##### ① 工具
##### ② 视频
##### ③ 书籍
资源较为敏感，未展示全面，需要的最下面获取
##### ② 简历模板
**因篇幅有限，资料较为敏感仅展示部分资料，添加上方即可获取👆**
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.youkuaiyun.com/forums/4f45ff00ff254613a03fab5e56a57acb)**
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
