个人简历

添加加载页动画

效果预览

css:.loading{  height:200px;width:200px;  position:relative;}.loading::before, .loading::after{  content:'';  position:absolute;  top:0;right:0;bottom:0;left:0;  background:gray;  border-radius:50%;  margin:auto;  animation: s 2s linear infinite;}.loading::after{animation-delay: 0.75s;}@keyframes s{  0%{width:0;height:0;opacity:1} 100%{width:100px;height:100px;opacity:0}}复制代码

说明

使用伪类写两个圈，他们的变化都是由小变大，由深变浅，同时after延迟0.75s

部署

将script写在最后（如果都加载出来了才能执行script），通过classList在两个css块中切换（display:flex,display:none）。

html:
        
     
    
css：.site-welcome{display: none;position:fixed;width:100%;height:100%;top:0;left:0;z-index: 1;justify-content: center;align-items: center;}.site-welcome.active{display: flex;}js：siteWelcome.classList.remove('active')复制代码

检测

使用开发者工具

Network→online→slow3G

Network→online→custom→add

假装部署（延迟消失）

setTimeout(function(){        siteWelcome.classList.remove('active')},2500    )复制代码

会变的导航栏

用js控制class，不同的class对应不同的css，

window.onscroll = function(xxxx){        if(window.scrollY > 0 ){            topNavBar.classList.add('sticky')            console.log(1)        }else{            topNavBar.classList.remove('sticky')        }    }复制代码

小型动画

将下划线变成从左划到右边

.topNavBar nav>ul>li>a:hover::after{content:'';display:block;position:absolute;top:100%;left:0;width:100%;background:#E6686A;height:3px;transform: all 0.75s;animation:meauSlide linear 1s}@keyframes meauSlide{0%{width:0}100%{width:100%}}复制代码

注意下图是bottom：0和top：100%的区别图，top:100%正确，其在依附元素外边而不是在里边紧贴底部。

添加二级菜单

<li><a href="#">SKILLS</a></li> 尽量加在a标签外面，<li><a href="#">SKILLS</a><ul> <li>作品1</li> <li>作品2</li> <li>作品3</li> </ul></li>

因为ul li是块级元素，所以会另起一行。同时他们不是绝对定位，会导致li宽度包裹住ul。绝对定位不受父元素影响，也不会影响父元素

加入绝对定位之后，会导致

因为li是一个浮动定位，其特点是能有多瘦就有多瘦，其中包含a作品文档流元素，所以其宽度能够包住（作品）即可，能有多瘦有多瘦。ul是一个绝对定位元素，没有宽度的话能缩多瘦缩多瘦。

.topNavBar .submeau>li{white-space: nowrap;}

此时遇到的问题：有多个meau需要加submeau，但是一个一个加会导致代码过于冗杂，

html:BLOG
         
      博客1
    
      博客2
    
      博客3
     
SKILLS
         
      作品1
    
      作品2
    
      作品3
     
js:let aTags = document.getElementsByClassName('meauTigger')for(let i=0;i

将a全部取出，利用循环来监听每一个a，使用function函数来确定当前监听的a，使用递归取nextSibling来准确确定ul（规避a与ul之间的文本），在ul上使用classList增删active；

这时候出现一个问题，当鼠标移入submeau时，submeau会消失。因为此时移出了a。解决办法：把在a上的class加在a和ul共同的父标签li上即可

js:let liTags = document.getElementsByClassName('meauTigger')for(let i=0;i

li.getElementsByTagName('ul')[0]其中如果不加[0]，取出来的是一个包含ul 和li的数组，但是我们只需要ul（对他自己进行操作），所以使用[0]。

最后，因为移动到submeau时，红色下划线会消失，所以将active加在li标签上会更好

总结

不要尝试第一次就做出来，做的过程中会发现更好的办法

解决一个问题的关键是马上开始！会错一次，错两次，错三次，最终会发现最合适的办法。

导航栏点击跳转

因为有一个问题：我们的顶部导航栏是absolute，如果直接用a标签的href跳转会导致相关的模块顶在最顶部，导航栏会遮住他们。如果每个模块都加padding会丑而且不容易维护。

let aTags = document.querySelectorAll('nav > ul > li > a')for(let i=0;i

此时对应关系为#＋内容 内容→ID

另外加上

let top = element.offsetTop //获取指定元素的绝对高度    window.scrollTo(0 , top - 70) //滚动到（指定元素的高度-70）复制代码

要注意的：console.log(a.href)→http://192.168.206.1:8080/index.html# console.log(a.getAttribute('href'))→#

一个是被浏览器处理过的，一个是写了什么就是什么