最后
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。
做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
没有防止刷新前：注意上左上角的刷新符号总是会变成’X’号，即刷新
加上’javaScript:;'后：
问题3：
当屏幕较小时，点击右上角的’=’，来控制ul的显示与隐藏，如果用js来判断，并设置display，
var gnMore = document.getElementsByClassName(‘gn-more’)[0],
gnList = document.getElementsByClassName(‘gn-list’)[0];
gnMore.onclick = function(){
if (gnList.style.display == ‘flex’){
gnList.style.display = ‘none’;
}else {
gnList.style.display = ‘flex’;
}
}
效果：
当屏幕小时点击两次’=’，display: none;的效果会留在.gn-more的内联样式上，屏幕拉大，gn-list不显示;即使gn-list在屏幕大时有设置display为flex，但内嵌样式权重最大，覆盖了外部样式中dislay的设置：
所以，不能使用display来做点击显示和隐藏判断，可以借助css：
如果.gn-list同时有类名.gn-list-activate，就显示gn-list，注意此处两个类名之间没有空格，两个类名不是嵌套关系
.gn-list.gn-list-activate {
display: flex;
}
gnMore.onclick = function(){
// if (gnList.style.display == ‘flex’){
// gnList.style.display = ‘none’;
// }else {
// gnList.style.display = ‘flex’;
// }
if (document.getElementsByClassName(‘gn-list-activate’)[0]){
gnList.classList.remove(‘gn-list-activate’);
}else{
gnList.classList.add(‘gn-list-activate’);
}
}
调试面板知识点记录：
按F12出现的调试面板的这个部分，越往上排，权重越大，这张图式点击’=’，class名加上’gn-liat-activate’之后的效果，可以看到，此时.gn-list是设置成flex的，而下一条的display: none;则因为权重没有上一条大而不生效
性能考虑记录：
当屏幕小时，点击了’='但没有收回，就放大了屏幕，此时gn-list-activate并没有收回，当屏幕再次缩小时，由于gn-list-activate存在，所以这时候就直接显示出了gn-list
bootsrap官网也是这样的效果，不会太影响用户体验，如果想gn-list没有收回时且屏幕放大时，gn-list-activate取消掉，需要监听窗口大小，比较耗性能，一般不会去监听窗口大小
导航栏完整代码：
- =
-
body,ul,li,a,p {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
a,p {
color: red;
}
.gn-globalnav{
height: 44px;
background-color: rgba(0,0,0,0.8);
}
.gn-content {
/* width: 980px; */
max-width: 980px;
margin: 0 auto;
}
.gn-header {
display: none;
}
.gn-list, .gn-header {
height: 44px;
display: flex;
justify-content: space-between;
margin:0 30px;
}
.gn-list li, .gn-header li {
height: 44px;
}
.gn-list li a,.gn-header li a {
display: inline-block;
height: 44px;
line-height: 44px;
}
.gn-logo a {
background-image: url(…/img/img.png);
width: 62px;
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
}
.gn-header {
display: none;
}
.gn-header .gn-more {
font-size: 30px;
}
.gn-list.gn-list-activate {
display: flex;
}
@media only screen and (max-width:600px) {
.gn-list {
display: none;
position: absolute;
top:44px;
flex-direction: column;
height: auto;
margin: 0;
width: 100%;
background:#222;
}
总结
=============================================================
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
-
