纯JS实现KeyboardNav（学习笔记）2这篇博客只是自己的学习笔记，方便日后复习，没有仔细排版，也没有写出逻辑性这主要是加css，优化的js编写逻辑和代码布局GitHub项目源码预览地址最终效果KeyboardNav使用指南：左下角是网站的图标，'.'表示该网站没有图标或未设置网站按键盘上相应的按钮进入相应的网站并将鼠标放在上面可以编辑和保存该网站，除了初始网站，编辑的网站用户有本地cookies，清除cookies后会清除保存的本地网站，恢复原状。CSS样式美化按钮/*美化按钮*//**//*}*/.kbd{margin:0;填充：0；边界：0；宽度：65px；高度：50px；/*线性渐变：0-70白色，70-100，fff-f3f3f3渐变*/背景：线性渐变（到底部，#fff0%，#fff70%，#f3f3f3100%）；边界半径：7px；/*底部阴影，box-shadow最常用的五个属性分别是leftoffset,rightoffset,blur,expand,color*/box-shadow:05px00#D8DCDE;颜色：#767D81；字体系列：Helvetical；垂直对齐：顶部；/*弹性布局居中*/display:inline-flex;对齐项目：居中；证明内容：居中；}.kbd_wrapper{显示：内联块；垂直对齐：顶部；/*这两个句子必须一起使用!!!!*/width:65px;高度：55px；/*border:1pxsolid#3C3C3D;*/border-radius:7px;边距：05px；/**/盒子-阴影：04px3px0#3C3C3D，001px0#3C3C3D；/*bottom，一个圆圈*/}一定要记得写vertical-align:top;;避免inlineblock错误显示：inline-block；垂直对齐：顶部；/*这两句必须一起使用!!!!*/vhvw单位在CSS3中的使用参考：张新旭石旭相关单位vwvhcss3参考手册-vhvh:viewportheightvw:viewportwidth"viewport"指的是浏览器内部可见区域的大小，即window.innerWidth/window.innerHeight的大小，不包括任务栏的标题栏和底部工具栏的浏览器区域相对于视口的高度。视口分成100个单元的vh用flex布局绝对居中的三句套路写在父元素上/*三行代码写在父元素绝对居中*/display:flex;证明内容：居中；align-items:center;100%browserheight+absolutecenteringmethod100%browserheightmethod:html,body{height:100%;}100%browserheight+absolutecenteringmethodmain{/*三者在父元素上绝对居中代码行*/显示：flex；证明内容：居中；对齐项目：居中；/*height为浏览器高度*/height:100vh;}backgroundMDNbackground:redurl("./wall.jpg")no-repeatcentercenterscroll;红色是图片未加载时的背景色缩放背景图片-拉伸并覆盖CSSbackground-size属性可以调整背景图片的大小，从而取代默认以原始尺寸显示图片的行为。您可以自由缩放背景图像。背景大小：150px；设置背景图片大小宽高为150px，tile特殊值：“contain”和“cover”包含：tile比例锁定，高宽自适应浏览器尺寸例如：cover：完全覆盖，使后台自适应使用谷歌开发者工具模拟慢速网络环境。此时无法加载背景图片。首先，将使用背景属性中的红色favicon.ico。如果要访问该图标，请转到网站根目录中的favicon.ico。大多数网站都适用。imgxxxx=document.createElement("img");if(hash[row[index2]]){//判断这个是否存在imgxxxx.src='http://'+hash[row[index2]]+'/favicon.ico';//添加http协议，否则会被当成路径}else{//undefined//如果src为空，就会进入当前的url，导致图片不出现，所以给他一个现有的图片imgxxxx.src='./point.png';}插入图标效果：onerror事件监听请求失败事件添加img获取请求onerror方法，当天使白色出现时，将图片改为.imgxxxx.onerror=function(ev){//onerror事件，监听get请求错误事件imgev.target.src='./point.png';//设置未请求的错误事件的src为该点};编辑网址，可以更改键盘中的图标button2=jfglkhj.target;img2=button2.previousSibling;img2.src='http://'+x+'/favicon.ico';img2.onerror=function(ev){ev.target.src='./point.png';};var声明一个变量如果不加var，那么这个变量就是一个全局变量。优化每个块的代码在代码中添加功能，将代码从线性更改为树以优化代码结构，并将代码从线性更改为树。这样代码出错的时候修改起来很方便，而且很快就能找到BUG，只需要一层层找，不用看所有的代码
