0.3版本
综合信息管理系统,包含了用户信息管理系统,文件管理系统,任务管理系统。
优化了用户界面,添加了左侧导航栏。
0.4版本
完全适配了各个页面的侧边栏,修改了首页界面(万叶太帅了),原来你也玩原神。
我的原神uid:100618367,欢迎来我世界玩。
遇到的问题
css部分中的.home-section部分是用来控制section标签的样式的,其中的position属性用来规定标签内容的位置,原本是设定为relative的,(生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。),但在实际使用中会使得整个页面的外边框变宽导致浏览器页面出现左右滑动蓝,最后导致在侧边栏缩回的时候刷新浏览器,侧边栏会挡住原本的滑动按钮:
因为外轮廓太大,底部出现滑动栏:
解决方法:
position:fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
定死元素相对浏览器窗口的位置,不会随着画面的滚动而改变。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
将position的属性该为fixed后问题解决,同时左右滑动栏也消失了,画面边框宽度也正常了:
原因分析:relative是用相对位置进行定位的,原本设定中的left可能太大导致右边界面溢出,浏览器刷新时无法回到正常位置,通过fixed属性规定定死标签块相对浏览器窗口的位置,元素不会随着画面的滚动而改变,可以在一定程度上解决这个问题,但缺点可能fixed没有relative那么灵活。
修改了在共享侧边栏样式的代码,将其中的js代码移除。原因:将代码用include包含后会产生js代码在DOM完全加载前加载的错误,导致js代码无法取得对应的元素。
今天打开页面的时候遇到个问题,Cannot read property 'addEventListener' of null
原因:在页面还没有加载完成后这段监听的js代码已经执行,所以在执行这段代码的时候监听的DOM节点还没有加载创建,所以根本就找不到监听的元素。所以返回null。
解决方法:
1.等待页面完全加载完了再加载这段Js即可;
2.在原生js中的解决方法:
1.将脚本放在页面的底部。
2.在加载事件中调用附加代码。
3.使用jQuery库,它是DOM就绪事件。
什么是jQuery ready事件?
JavaScript提供了在页面呈现时执行代码的加载事件,但是直到所有资源(如图像)都被完全收到为止,才会触发该事件。 在大多数情况下,只要DOM层次结构完全构建,脚本就可以运行。 传递给.ready()的处理程序保证在DOM准备好后执行,所以这通常是附加所有其他事件处理程序的最佳位置...
最好就是讲js代码放在底部,我在自己的作业中提取了部分代码做成了共享的页面,但是却在共享的页面中讲js代码也写进了body里,这就导致共享部分的js代码先于非共享页面载入,在DOM尚未完全加载之前加载了js代码,所以编译器报错说js未找到对应的元素。
1.当js写在共享页面中时,js代码先于DOM完全载入前载入
导致报错
2.讲该共享部分的js代码隐藏后
不再报错







