diff --git "a/39 \351\203\255\346\202\246\350\277\216/20231122 js\347\224\265\346\242\257\345\257\274\350\210\252.md" "b/39 \351\203\255\346\202\246\350\277\216/20231122 js\347\224\265\346\242\257\345\257\274\350\210\252.md" new file mode 100644 index 0000000000000000000000000000000000000000..bc3597ada27a51be4d03a0c95ea66a21787f14fd --- /dev/null +++ "b/39 \351\203\255\346\202\246\350\277\216/20231122 js\347\224\265\346\242\257\345\257\274\350\210\252.md" @@ -0,0 +1,1521 @@ +# JS课堂笔记 + +scroll页面滚动事件,只要滚动条有变化,就触发该事件 + +document.documentElement表示整个html页面 + +document.documentElement.scrollTop html页面被上面卷走 + +scrollTop表示向上圈起来了多少 + + + +clientWith包括盒子本身的宽度,+padding,但不含边框 + +clientHeigh包括盒子本身的高度,+padding + +console.log(div.offsetWidth);内容+内边距+边框 + + + +行内:inline不换行,所有行内元素共用一行,不能设置高和宽 + +块状:block换行,独占一行,可以设置高和宽 div h1 p + +行内块状:inline-block即有行内的特点,又有块状的特点 img + + + +在JS中想知道对象的距离顶部或左边的距离可以用offsetTop、offsetLeft + +其实找该对象最近一级相对父元素的位置(参照物),如果找不到相对父元素,就以body为父元素 + + + +# 作业 + +### 导航 + +``` html + + + + + + + + Document + + + + +
我是顶部导航栏
+
+
秒杀模块
+
+
+ + +
+ + + + + +``` + +### 电梯 + +```html + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + +
+
+ + +
+
+ +
+
+ +

小兔鲜儿

+ +
+ +
+ + +
+
+ +
+
+ + + +
+ + + + + + +
+ + + + + +
+ +
+
+
+ +
+
+ +
+

新鲜好物新鲜出炉 品质靠谱

+ + 查看全部 + +
+ + +
+
+ + + + + +
+
+
+

热门品牌国际经典 品质保证

+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+
+
+ + +
+
+
+

最新专题

+ + 查看全部 + +
+ +
+
+ + + +
+ +
+ + + + +``` \ No newline at end of file