当前位置: 首页 > Web前端 > HTML

KeyboardNav的纯JS实现(学习笔记)-

时间:2023-04-02 20:42:11 HTML

KeyboardNav的纯JS实现(学习笔记)-本博客只是自己的学习笔记,以备日后复习,未经仔细排版,无逻辑编写GitHub项目源码预览地址最终效果KeyboardNav使用指南:左下角是网站的图标,'.'表示该网站没有图标或未设置该网站。按键盘上相应的键进入相应的网站。将鼠标放在上面可以编辑和保存网站。除初始网站外,用户编辑的网站均有本地cookies。清除cookies后,本地网站将被清除,恢复初始状态数据结构。该数组用于导航页面。其实数组就是一个散列数组。方括号实际上是hash的缩写。而数组是一个对象。Error学习JSerror:unprocessedgrammaticalerror:unexpectedstring]意思是这里不应该有字符串]语法错误css重要代码text-transform:uppercase;/*文本小写到大写*/#mainxxxx{display:inline-block;}main{text-align:center;}/*mainxxx这个div居中*/#mainxxxx>div:nth-child(2){margin-left:1em;}#mainxxxx>div:nth-child(2)表示mainxxxx的第二个名为div的子元素。找到kbd内的按钮并添加hoverkbd>button{position:absolute;右:0;底部:0;显示:无;/*绝对定位到右下角*/}kbd:hover>button{display:inline-block;/*鼠标只有在鼠标悬停时才会出现kbd*/}box-shadowusageguideinset默认阴影在边框外。使用inset后,阴影在边框内(即使是透明边框),背景在内容下方。这是前两个值,用于设置阴影偏移。设置水平偏移量,如果是负值,阴影会在元素的左边。设置垂直偏移量,如果为负值,阴影将位于元素的顶部。有关可用单位,请参见。如果两者都为0,则阴影在元素后面。这时候如果设置了或者,就会出现模糊效果。这是第三个值。值越大,模糊区域越大,阴影越大越亮。不能为负。当阴影边缘清晰时,默认值为0。这是第四个值。取正值时,阴影扩大;当取负值时,阴影缩小。默认值为0,在这种情况下阴影与元素一样大。相关事项见。如果不指定,则由浏览器决定——通常是color的值,但目前Safari取透明。最后五个值是最常用的,例如:/*offset-x|偏移-y|color*/box-shadow:60px-16px蓝绿色;/*offset-x|偏移-y|模糊半径|颜色*/box-shadow:10px5px5pxblack;/*offset-x|偏移-y|模糊半径|传播半径|颜色*/box-shadow:2px2px2px1pxrgba(0,0,0,0.2);/*inset|偏移-x|偏移-y|color*/box-shadow:inset5em1emgold;/*任意数量的阴影,用逗号分隔*/box-shadow:3px3pxred,-1em00.4emolive;循环遍历二进制数组//遍历key生成kbd标签varindex=0;while(index