+ 
+ 
+ 
+ 
+ 秒杀模块
+ 
+ 
+
+```html
+
+```
+
+## 简答题：关键字汇总( 能够简单的说出来这些关键字干啥用的 )
+
+- let 定义
+- typeof 判断数据类型
+- if if 判断
+- else if……else 反之
+- switch switch 判断
+- case switch……case 判断
+- default 默认值
+- while while 循环
+- break 跳出
+- continue 继续
+
+
+
+
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231101 \346\225\260\347\273\204.md" "b/13\350\224\241\345\230\211\344\271\220/20231101 \346\225\260\347\273\204.md"
new file mode 100644
index 0000000..058d324
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231101 \346\225\260\347\273\204.md"
@@ -0,0 +1,291 @@
+## 数组
+
+数组不会报下标越界的错误
+
+```js
+// 用 [] 表示数组
+arr['内容']
+```
+
+### 数组长度
+
+```js
+console.log(数组名.length)
+```
+
+### 索引得相关值
+
+```js
+console.log(数组名[位置])
+```
+
+### 给数组赋值
+
+```js
+数组名[位置]=值
+```
+
+### 将元素追加到末尾的元素
+
+```
+数组名.push()
+```
+
+### 将元素追到头部的元素
+
+```js
+数组名.unshift()
+```
+
+### 删除第一个元素
+
+```js
+数组名.shift()
+```
+
+### 删除最后一个元素
+
+```js
+数组名.pop()
+```
+
+### 删除索引位置开始的元素
+
+```js
+数组名.splice(索引,个数)
+```
+
+### 随机数
+
+```js
+Math.random()*数字 // [0,数字)
+Math.floor(Math.random()*数字) // 取整数不然是小数
+```
+
+## 作业
+
+### 数组求和
+
+需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
+分析：
+①：声明一个求和变量 sum。
+②：遍历这个数组，把里面每个数组元素加到 sum 里面。
+③：用求和变量 sum 除以数组的长度就可以得到数组的平均值
+
+```html
+
+```
+
+### 数组求最大值和最小值
+
+需求：求数组 [2,6,1,77,52,25,7] 中的最大值
+分析：
+①：声明一个保存最大元素的变量 max。
+②：默认最大值可以取数组中的第一个元素。
+③：遍历这个数组，把里面每个数组元素和 max 相比较。
+④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
+⑤：最后输出这个 max
+拓展：
+自己求一下最小值
+
+```html
+
+```
+
+### 数组筛选
+
+需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
+分析：
+①：声明一个新的数组用于存放新数据newArr
+②：遍历原来的旧数组， 找出大于等于 10 的元素
+③：依次追加给新数组 newAr
+
+```html
+
+```
+
+### 数组去0案例
+
+需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
+分析：
+①：声明一个新的数组用于存放新数据newArr
+②：遍历原来的旧数组， 找出不等于0的元素
+③：依次追加给新数组 newArr
+
+```html
+
+```
+
+### 根据数据生成柱形图
+
+需求： 用户输入四个季度的数据，可以生成柱形图
+分析：
+①：需要输入4次，所以可以把4个数据放到一个数组里面
+ Ø 利用循环，弹出4次框，同时存到数组里面
+②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
+ Ø 柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
+ Ø div里面包含显示的数字和 第n季
+
+```html
+
+
+
+
+
+
+
+```
+
+### 排序
+
+```html
+
+```
+
+### 抽奖
+
+```html
+
+ 抽奖
++
目前抽奖名单
+ ++
目前中奖名单
+ ++ + + +``` + diff --git "a/13\350\224\241\345\230\211\344\271\220/20231102 \345\207\275\346\225\260.md" "b/13\350\224\241\345\230\211\344\271\220/20231102 \345\207\275\346\225\260.md" new file mode 100644 index 0000000..8bca969 --- /dev/null +++ "b/13\350\224\241\345\230\211\344\271\220/20231102 \345\207\275\346\225\260.md" @@ -0,0 +1,273 @@ +## 函数 + +```js +function sayHello(){ + alert('a'); +} +sayHello(); // 调用函数 + +function sayHello(name){ // 传参 + alert(`${name}`); +} +sayHello('111'); + +function sayHello(name=111){ // 也可以设置默认值 + alert(`${name}`); +} +sayHello(); +``` + +如果传了两个参数，只定义一个话，另一个是undefined + +```js +function getSum(a,b){ + return a+b; + // return 关键字用于马上返回，如果后面有值用于返回如果没有用于终止，没有return返回值undefined +} +``` + +在函数里面定义的局部变量，在函数里调用可以，在函数外面调用不到局部变量 + +```js +let n = function(){……} // 函数表达式 +n(); + +(function(){……})(); // 只调用一次的匿名函数，也能用参数 + +function getSum(a,b){ + a = a || 0; + b = b || 0; + // 这样设置默认值也可以 +} +``` + +函数的前缀为动词 getSum、canSpeak + +## JavaScript基础第四天作业 + +### 主观题 + +#### 练习题1： + +请看以下代码，并说出执行的流程~~~ + +```javascript +function printfInput(content) { // 定义函数，传入 content 参数 + // 将用户输入的内容, 在页面中显示 + document.write(content); +} +let constr = prompt('请输入内容') // 定义 constr 变量 +printfInput(constr) // 调用函数,传入 constr 变量为 content 参数 +``` + +#### 练习题2： + +**目标：**求和函数封装练习 + +**要求:** + +1. 封装函数, 名字为sum + +2. 功能: 根据传入的两个数,求和并且返回求和的结果（函数必须有return返回值） + + ```html + + ``` + +#### 练习题3： + +**目的:** 封装函数, 复习函数的基本写法。 + +**需求：**实现两个数的值交换(函数版本) + +**分析:** + +1. 函数名为 changeNum() + +2. 调用函数时, `changeNum(1，2)` + +3. 经过函数内部处理后,输出 `第一个值的结果是2 第二个值的结果是1` + +4. 可以多调用两次 + + ```html + + ``` + +#### 练习题4： + +**目的:** 复习函数的声明与调用 + +**题目：**封装余额函数 + +**要求:** + +1. 运行程序后, 浏览器显示输入确认框(prompt) + +2. 第一个输入确认框提示输入银行卡余额 + +3. 第二个输入确认框提示输入当月食宿消费金额 + +4. 第三个输入确认框提示输入当月生活消费金额 + +5. 输入完毕后,在页面中显示银行卡剩余金额 + +6. 提示: 所有功能代码封装在函数内部（函数需要把余额返回） + + ```html + + ``` + +#### 练习题5: + +**目标：** 封装一个函数,可以求任意数组的和 或 平均值 + +**要求：** + +- 函数可以传递2个参数，比如 handleData(arr, true) `handleData 处理数据的意思` + * 参数一： 接受实参传递过来的数组 + + * 参数二: 布尔类型 如果是true或者不传递参数 是求和操作， 如果传递过来的参数是 false 则是求平均值 + + ```html + + ``` + +#### 拓展题1 + +需求： 封装 some 函数查看数组是否存在某个元素 。 + +- 要传递2个参数 元素、数组 +- 如果数组存在元素则返回true，如果没有存在元素就返回 false + +例如检测 香蕉 是否存在于 数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中， 返回结果是 true + +格式如下： + +~~~javascript + function some(ele, arr = []) { + // 里面写业务逻辑 + let res=false; + for(let i=0;i
123
+
+
+```
+
+获取元素
+
+```html
+
+
+ 123
+ abc
+
+
+
+
+```
+
+innerText / innerHTML
+
+```html
+
+ 我是文字的内容
+
+
+```
+
+抽奖
+
+```html
+
+
+
+ 年会抽奖
+
+
+
+
+
+
+```
+
+修改对象的属性值
+
+```html
+
+ 一等奖：???
+二等奖：???
+三等奖：???
+ +
+
+
+```
+
+随机更换图片
+
+```html
+
+
+
+
+```
+
+更改属性值
+
+```html
+
+
+
+
+
+```
+
+更改背景
+
+```html
+
+
+```
+
+修改类名
+
+```html
+
+
+
+
+
+```
+
+classList
+
+```html
+
+
+ 文字
+
+
+
+```
+
+## 随机轮播图
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231108 \350\241\250\345\215\225\344\270\216\345\256\232\346\227\266\345\231\250.md" "b/13\350\224\241\345\230\211\344\271\220/20231108 \350\241\250\345\215\225\344\270\216\345\256\232\346\227\266\345\231\250.md"
new file mode 100644
index 0000000..e06cec3
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231108 \350\241\250\345\215\225\344\270\216\345\256\232\346\227\266\345\231\250.md"
@@ -0,0 +1,393 @@
+## 表单与定时器
+
+#### 操作表单元素属性
+
+表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
+
+正常的有属性有取值的跟其他的标签属性没有任何区别
+
+获取:DOM对象.属性名
+
+设置:DOM对象.属性名= 新值
+
+```html
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 自定义属性
+
+
+
+
+~~~
+
+### 间歇函数
+
+> 知道间歇函数的作用，利用间歇函数创建定时任务。
+
+`setInterval` 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
+
+```html
+
+```
+
+### 修改表单属性
+
+```html
+
+
+
+
+
+ 专业：
+
+
+```
+
+### 自定义属性
+
+```html
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ + + + +``` + +## 作业 + +### 轮播图定时版 + +```html + + +
+
+
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231109 \347\233\221\345\220\254\345\231\250.md" "b/13\350\224\241\345\230\211\344\271\220/20231109 \347\233\221\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..1bc2dd9
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231109 \347\233\221\345\220\254\345\231\250.md"
@@ -0,0 +1,421 @@
+## 监听器
+
+```html
+
+
+ 
+
+
+
+ 事件监听
+为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。
+ + + +``` + +```html + + + + +``` + +### 点击关闭 + +```html + +
+ 我是广告
+
+
+
+
+```
+
+### 随机点名案例
+
+```html
+
+
+ X
+ 随机点名
+
+ 名字是：
+
+ 这里显示姓名
+
+
+
+
+
+
+```
+
+oncilck 和 addEventListener 的区别
+
+```html
+
+
+
+
+```
+
+```html
+
+ 111
+
+
+```
+
+### 轮播图
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231110 \344\272\213\344\273\266.md" "b/13\350\224\241\345\230\211\344\271\220/20231110 \344\272\213\344\273\266.md"
new file mode 100644
index 0000000..199a5db
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231110 \344\272\213\344\273\266.md"
@@ -0,0 +1,845 @@
+## 事件
+
+### 焦点事件
+
+```html
+
+
+
+
+```
+
+### 小米搜索框
+
+```html
+
+
+
+
+
+```
+
+### 键盘事件
+
+```html
+
+
+
+
+```
+
+### focus 选择器
+
+```html
+
+
+
+
+
+```
+
+### 评论回车发布
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0/200字
+
+
+
+
+
+
+```
+
+### 事件对象
+
+```html
+
+
+
+
+
+```
+
+### 按下回车发布评论
+
+```html
+style>
+ .wrapper {
+ min-width: 400px;
+ max-width: 800px;
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .avatar {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ overflow: hidden;
+ background: url(./images/avatar.jpg) no-repeat center / cover;
+ margin-right: 20px;
+ }
+
+ .wrapper textarea {
+ outline: none;
+ border-color: transparent;
+ resize: none;
+ background: #f5f5f5;
+ border-radius: 4px;
+ flex: 1;
+ padding: 10px;
+ transition: all 0.5s;
+ height: 30px;
+ }
+
+ .wrapper textarea:focus {
+ border-color: #e4e4e4;
+ background: #fff;
+ height: 50px;
+ }
+
+ .wrapper button {
+ background: #00aeec;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ margin-left: 10px;
+ width: 70px;
+ cursor: pointer;
+ }
+
+ .wrapper .total {
+ margin-right: 80px;
+ color: #999;
+ margin-top: 5px;
+ opacity: 0;
+ transition: all 0.5s;
+ }
+
+ .list {
+ min-width: 400px;
+ max-width: 800px;
+ display: flex;
+ }
+
+ .list .item {
+ width: 100%;
+ display: flex;
+ }
+
+ .list .item .info {
+ flex: 1;
+ border-bottom: 1px dashed #e4e4e4;
+ padding-bottom: 10px;
+ }
+
+ .list .item p {
+ margin: 0;
+ }
+
+ .list .item .name {
+ color: #FB7299;
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ .list .item .text {
+ color: #333;
+ padding: 10px 0;
+ }
+
+ .list .item .time {
+ color: #999;
+ font-size: 12px;
+ }
+
+
+
+
+
+
+
+
+ 0/200字
+
+
+
+
+
+
+```
+
+### trim 方法
+
+```html
+
+
+
+
+```
+
+### 环境对象
+
+```html
+
+
+
+
+```
+
+### tab 栏切换
+
+```html
+
+
+
+
+
+```
+
+## 作业
+
+### tab 栏切换
+
+```html
+
+
+
+
+
+
+```
+
+### 手风琴
+
+```html
+
+
+
+
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231114 \344\272\213\344\273\266.md" "b/13\350\224\241\345\230\211\344\271\220/20231114 \344\272\213\344\273\266.md"
new file mode 100644
index 0000000..28a4ddb
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231114 \344\272\213\344\273\266.md"
@@ -0,0 +1,371 @@
+### 全选按钮
+
+```html
+
+
+ -
+
- 国际大牌◆ +
- 国妆名牌◆ +
- 清洁用品◆ +
- 男士精品 +
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+ | + 全选 + | +商品 | +商家 | +价格 | +
|---|---|---|---|
| + + | +小米手机 | +小米 | +￥1999 | +
| + + | +小米净水器 | +小米 | +￥4999 | +
| + + | +小米电视 | +小米 | +￥5999 | +
+
+
+
+
+```
+
+### 解绑
+
+```html
+
+
+
+
+```
+
+mouseover 和 mouseout 的区别
+
+```html
+
+
+
+
+
+
+
+```
+
+### 事件委托
+
+```html
+
+ -
+
- 第1个孩子 +
- 第2个孩子 +
- 第3个孩子 +
- 第4个孩子 +
- 第5个孩子 +
我需要蓝色
+ 我不需要变色 +
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+ 我里面有很多很多的文字
+
+
+
+```
+
+scrollTop 细节
+
+```html
+
+
+
+
+```
+
+页面尺寸
+
+```html
+
+
+ 123123123123123123123123123123123123123
+
+
+```
+
+offsetLeft
+
+```html
+
+
+
+
+ 我是顶部导航栏
+
+
+
+
+
+
+```
+
+### 电影导航
+
+电梯导航html
+
+```html
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + + 生鲜 + 水果 + 蔬菜 + + + +
- + + 美食 + 面点 + 干果 + + + +
- + + 电器 + 数码产品 + + + +
- + + 居家 + 床品 + 四件套 + 被枕 + + + +
- + + 洗护 + 洗发洗护 + 美妆 + + + +
- + + 孕婴 + 奶粉 + 玩具 + 辅食 + + + +
- + + 餐橱 + 数码产品 + + + +
- + + 服饰 + 女装 + 男装 + + + +
- + + 杂货 + 户外 + 图书 + + + +
- + + 品牌 + 品牌制造 + + + +
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 新鲜好物新鲜出炉 品质靠谱
+ + 查看全部 + +
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 人气推荐人气爆款 不容错过
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+```
+
+common.css
+
+```css
+@charset "UTF-8";
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+ ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+ line-height: 1.15;
+ /* 1 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+ box-sizing: content-box;
+ /* 1 */
+ height: 0;
+ /* 1 */
+ overflow: visible;
+ /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+ font-family: monospace, monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+ border-bottom: none;
+ /* 1 */
+ text-decoration: underline;
+ /* 2 */
+ text-decoration: underline dotted;
+ /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+ font-family: monospace, monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ /* 1 */
+ font-size: 100%;
+ /* 1 */
+ line-height: 1.15;
+ /* 1 */
+ margin: 0;
+ /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+legend {
+ box-sizing: border-box;
+ /* 1 */
+ color: inherit;
+ /* 2 */
+ display: table;
+ /* 1 */
+ max-width: 100%;
+ /* 1 */
+ padding: 0;
+ /* 3 */
+ white-space: normal;
+ /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box;
+ /* 1 */
+ padding: 0;
+ /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+ display: none;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ color: #333;
+ font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
+}
+
+ul, h1, h3, h4, p, dl, dd {
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ text-decoration: none;
+ color: #333;
+}
+
+i {
+ font-style: normal;
+}
+
+input {
+ outline: none;
+ padding: 0;
+ border: none;
+}
+
+img {
+ max-width: 100%;
+ max-height: 100%;
+ vertical-align: middle;
+}
+
+ul {
+ list-style: none;
+}
+
+.clearfix:before,
+.clearfix:after {
+ content: " ";
+ display: table;
+}
+
+.clearfix:after {
+ clear: both;
+}
+
+.clearfix {
+ *zoom: 1;
+}
+
+.wrapper {
+ width: 1240px;
+ margin: 0 auto;
+}
+
+.sprites {
+ background-image: url(../images/sprites.png);
+ background-size: 400px 400px;
+ background-repeat: no-repeat;
+}
+
+.fl {
+ float: left;
+}
+
+.fr {
+ float: right;
+}
+
+.tc {
+ text-align: center;
+}
+
+.green {
+ color: #27BA9B;
+}
+
+.red {
+ color: #CF4444;
+}
+
+.mb10 {
+ margin-bottom: 10px;
+}
+
+.fz20 {
+ font-size: 20px;
+}
+
+.fz18 {
+ font-size: 18px;
+}
+
+.fz16 {
+ font-size: 16px;
+}
+
+.xtx-bread {
+ padding: 10px 0 25px 25px;
+}
+
+.xtx-bread a {
+ color: #999;
+ padding-right: 5px;
+}
+
+.xtx-bread a:hover {
+ color: #27BA9B;
+}
+
+.xtx-common-btn {
+ width: 180px;
+ height: 50px;
+ border-radius: 4px;
+ text-align: center;
+ line-height: 48px;
+ font-size: 16px;
+ color: #FFFFFF;
+ display: inline-block;
+}
+
+.xtx-common-btn[type="primary"] {
+ background: #27BA9B;
+}
+
+.xtx-common-btn[type="info"] {
+ background: #CCCCCC;
+}
+
+.xtx-check {
+ color: #999;
+ line-height: 30px;
+ cursor: pointer;
+}
+
+.xtx-check i {
+ vertical-align: middle;
+}
+
+.xtx-check i.icon-yixuanze {
+ color: #27BA9B;
+ display: none;
+}
+
+.xtx-check i.icon-weixuanze {
+ color: #999;
+}
+
+.xtx-check span {
+ vertical-align: middle;
+}
+
+.xtx-check input {
+ display: none;
+}
+
+.xtx-check input:checked ~ span {
+ color: #27BA9B;
+}
+
+.xtx-check input:checked ~ i.icon-yixuanze {
+ display: inline-block;
+}
+
+.xtx-check input:checked ~ i.icon-weixuanze {
+ display: none;
+}
+
+/** 顶部导航 **/
+.xtx_topnav {
+ background-color: #333;
+}
+
+.xtx_topnav .xtx_navs {
+ height: 53px;
+ text-align: right;
+ line-height: 53px;
+ font-size: 0;
+}
+
+.xtx_topnav .xtx_navs li {
+ display: inline-block;
+ font-size: 14px;
+}
+
+.xtx_topnav .xtx_navs li:last-child a {
+ border-right: none;
+}
+
+.xtx_topnav .xtx_navs .mobile {
+ display: inline-block;
+ width: 20px;
+ height: 16px;
+ position: relative;
+ top: 3px;
+ background-position: -160px -70px;
+}
+
+.xtx_topnav .xtx_navs a {
+ display: inline-block;
+ line-height: 1;
+ padding: 0 15px;
+ border-right: 2px solid #666666;
+ color: #dcdcdc;
+}
+
+.xtx_topnav .xtx_navs a:hover {
+ color: #27BA9B;
+}
+
+/** 主导航及Logo **/
+.xtx_header .wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.xtx_header .xtx_logo {
+ width: 200px;
+ height: 132px;
+ text-indent: -999px;
+ background-image: url(../images/logo.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position-x: center;
+ background-position-y: 20px;
+}
+
+.xtx_header .xtx_navs {
+ padding-left: 50px;
+}
+
+.xtx_header .xtx_navs li {
+ line-height: 1;
+ font-size: 16px;
+ margin-right: 50px;
+ position: relative;
+ float: left;
+}
+
+.xtx_header .xtx_navs li:after {
+ content: '';
+ display: none;
+ width: 30px;
+ height: 2px;
+ background-color: #27BA9B;
+ position: absolute;
+ left: 1px;
+ bottom: -7px;
+}
+
+.xtx_header .xtx_navs li:hover a, .xtx_header .xtx_navs li.active a {
+ color: #27BA9B;
+}
+
+.xtx_header .xtx_navs li:hover:after, .xtx_header .xtx_navs li.active:after {
+ display: block;
+}
+
+.xtx_header .xtx_search {
+ height: 38px;
+ padding-left: 20px;
+}
+
+.xtx_header .xtx_search_wrapper {
+ width: 175px;
+ height: 38px;
+ padding-left: 39px;
+ border-bottom: 1px solid #e7e7e7;
+ position: relative;
+ float: right;
+}
+
+.xtx_header .xtx_search_wrapper:before {
+ content: '';
+ display: block;
+ width: 17px;
+ height: 17px;
+ position: absolute;
+ left: 5px;
+ top: 10px;
+ background-image: url(../images/sprites.png);
+ background-size: 400px 400px;
+ background-position: -80px -70px;
+}
+
+.xtx_header .xtx_search_wrapper input {
+ width: 100%;
+ height: 100%;
+ font-size: 15px;
+ color: #999;
+}
+
+.xtx_header .xtx_search_wrapper input::-webkit-input-placeholder {
+ color: #ccc;
+}
+
+.xtx_header .xtx_search_cart {
+ display: block;
+ width: 22px;
+ height: 22px;
+ position: relative;
+ margin: 8px 12px 0 12px;
+ float: right;
+ background-position: -120px -70px;
+}
+
+.xtx_header .xtx_search_cart i {
+ position: absolute;
+ top: -5px;
+ left: 16px;
+ line-height: 1;
+ padding: 1px 6px;
+ font-style: normal;
+ font-size: 13px;
+ background-color: #E26237;
+ border-radius: 15px;
+ color: #fff;
+}
+
+/** 公共底部 **/
+.xtx_footer .contact {
+ padding: 60px 0 40px 25px;
+}
+
+.xtx_footer .contact dl {
+ height: 190px;
+ text-align: center;
+ padding: 0 72px;
+ border-right: 1px solid #f2f2f2;
+ color: #999;
+ float: left;
+}
+
+.xtx_footer .contact dl:first-child {
+ padding-left: 0;
+}
+
+.xtx_footer .contact dl:last-child {
+ border-right: none;
+ padding-right: 0;
+}
+
+.xtx_footer .contact dt {
+ line-height: 1;
+ font-size: 18px;
+}
+
+.xtx_footer .contact dd {
+ margin: 36px 12px 0 0;
+ float: left;
+}
+
+.xtx_footer .contact dd:last-child {
+ margin-right: 0;
+}
+
+.xtx_footer .contact .chat, .xtx_footer .contact .feedback, .xtx_footer .contact .weixin, .xtx_footer .contact .weibo {
+ width: 92px;
+ height: 92px;
+ padding-top: 20px;
+ border: 1px solid #ededed;
+}
+
+.xtx_footer .contact .chat:before, .xtx_footer .contact .feedback:before, .xtx_footer .contact .weixin:before, .xtx_footer .contact .weibo:before {
+ content: '';
+ display: block;
+ width: 40px;
+ height: 30px;
+ margin: 0 auto 8px;
+ background-image: url(../images/sprites.png);
+ background-size: 400px 400px;
+}
+
+.xtx_footer .contact .chat:before {
+ background-position: -245px -70px;
+}
+
+.xtx_footer .contact .chat:hover:before {
+ background-position: -200px -70px;
+}
+
+.xtx_footer .contact .feedback:before {
+ background-position: -345px -70px;
+}
+
+.xtx_footer .contact .feedback:hover:before {
+ background-position: -295px -70px;
+}
+
+.xtx_footer .contact .weixin:before {
+ background-position: -247px -15px;
+}
+
+.xtx_footer .contact .weixin:hover:before {
+ background-position: -202px -15px;
+}
+
+.xtx_footer .contact .weibo:before {
+ background-position: -347px -15px;
+}
+
+.xtx_footer .contact .weibo:hover:before {
+ background-position: -297px -15px;
+}
+
+.xtx_footer .contact .qrcode {
+ width: 92px;
+ height: 92px;
+ padding: 7px;
+ border: 1px solid #ededed;
+}
+
+.xtx_footer .contact .download {
+ padding-top: 5px;
+ font-size: 14px;
+}
+
+.xtx_footer .contact .download span {
+ display: block;
+}
+
+.xtx_footer .contact .download a {
+ display: block;
+ line-height: 1;
+ padding: 10px 25px;
+ margin-top: 5px;
+ color: #fff;
+ border-radius: 2px;
+ background-color: #27BA9B;
+}
+
+.xtx_footer .contact .hotline {
+ padding-top: 20px;
+ font-size: 22px;
+ color: #666;
+}
+
+.xtx_footer .contact .hotline small {
+ display: block;
+ font-size: 15px;
+ color: #999;
+}
+
+.xtx_footer .extra {
+ background-color: #333;
+}
+
+.xtx_footer .slogan {
+ height: 178px;
+ line-height: 58px;
+ padding: 60px 100px;
+ border-bottom: 1px solid #434343;
+ text-align: justify;
+}
+
+.xtx_footer .slogan:after {
+ content: '';
+ display: inline-block;
+ width: 100%;
+ height: 0;
+}
+
+.xtx_footer .slogan a {
+ display: inline-block;
+ height: 58px;
+ line-height: 58px;
+ color: #fff;
+ font-size: 28px;
+}
+
+.xtx_footer .slogan a:before {
+ content: '';
+ width: 58px;
+ height: 58px;
+ margin-right: 10px;
+ float: left;
+ background-image: url(../images/sprites.png);
+ background-size: 400px 400px;
+}
+
+.xtx_footer .slogan .price:before {
+ background-position: 0 0;
+}
+
+.xtx_footer .slogan .express:before {
+ background-position: -65px 0;
+}
+
+.xtx_footer .slogan .quality:before {
+ background-position: -130px 0;
+}
+
+.xtx_footer .copyright {
+ height: 170px;
+ padding-top: 40px;
+ text-align: center;
+ color: #999;
+ font-size: 15px;
+}
+
+.xtx_footer .copyright p {
+ line-height: 1;
+ margin-bottom: 20px;
+}
+
+.xtx_footer .copyright a {
+ color: #999;
+ line-height: 1;
+ padding: 0 10px 0 6px;
+ border-right: 1px solid #999;
+}
+
+.xtx_footer .copyright a:last-child {
+ border-right: none;
+}
+```
+
+index.html
+
+```css
+@charset "UTF-8";
+
+/* 页面滑动 */
+html {
+ /* 让滚动条丝滑的滚动 */
+ scroll-behavior: smooth;
+}
+
+/** 分类及焦点图 **/
+.xtx_entry {
+ height: 500px;
+ background-color: #f2f2f2;
+ position: relative;
+}
+
+.xtx_category {
+ width: 250px;
+ background-color: rgba(0, 0, 0, 0.8);
+ position: absolute;
+ z-index: 9;
+}
+
+.xtx_category:hover .xtx_category_subset {
+ display: block;
+}
+
+.xtx_category_super li {
+ height: 50px;
+ padding: 0 20px 0 40px;
+ transition: background-color 0.25s;
+ cursor: pointer;
+}
+
+.xtx_category_super li:hover,
+.xtx_category_super li.active {
+ background-color: #27BA9B;
+}
+
+.xtx_category_super a {
+ color: #fff;
+ font-size: 16px;
+ line-height: 50px;
+}
+
+.xtx_category_super a small {
+ font-size: 14px;
+}
+
+.xtx_category_super i {
+ display: block;
+ width: 12px;
+ height: 12px;
+ margin-top: 20px;
+ background-position: -75px -110px;
+ float: right;
+}
+
+.xtx_category_subset {
+ width: 990px;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.9);
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 250px;
+}
+
+.xtx_banner {
+ width: 1240px;
+ height: 500px;
+ overflow: hidden;
+ position: relative;
+}
+
+.xtx_banner:hover a {
+ opacity: 1;
+}
+
+.xtx_banner>a {
+ display: block;
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ margin-top: -22px;
+ opacity: 0;
+ transition: opacity 0.5s;
+ background-color: rgba(0, 0, 0, 0.1);
+ position: absolute;
+ top: 50%;
+}
+
+.xtx_banner>a.prev {
+ left: 270px;
+ background-position: 14px -59px;
+}
+
+.xtx_banner>a.next {
+ right: 20px;
+ background-position: -24px -59px;
+}
+
+.xtx_banner .indicator {
+ width: 990px;
+ text-align: center;
+ font-size: 0;
+ position: absolute;
+ left: 250px;
+ bottom: 22px;
+}
+
+.xtx_banner .indicator span {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin: 0 8px;
+ cursor: pointer;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.43);
+}
+
+.xtx_banner .indicator span.active {
+ background-color: #fff;
+}
+
+/** 公共面板 **/
+.xtx_panel .xtx_panel_header {
+ height: 115px;
+ padding: 40px 0;
+}
+
+.xtx_panel .xtx_panel_header h3 {
+ height: 35px;
+ line-height: 35px;
+ margin-left: 6px;
+ font-size: 32px;
+ font-weight: 400;
+ color: #333;
+ float: left;
+}
+
+.xtx_panel .xtx_panel_header small {
+ margin-left: 22px;
+ font-size: 16px;
+ color: #999;
+}
+
+.xtx_panel .xtx_panel_header .more {
+ line-height: 1;
+ margin-top: 14px;
+ font-size: 16px;
+ color: #999;
+ float: right;
+}
+
+.xtx_panel .xtx_panel_header .more i {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ position: relative;
+ top: 1px;
+ background-position: 8px -106px;
+}
+
+.xtx_panel .xtx_panel_header .tabs-bar {
+ height: 35px;
+ padding-top: 13px;
+ font-size: 16px;
+ margin-right: 80px;
+ float: right;
+}
+
+.xtx_panel .xtx_panel_header .tabs-bar a {
+ padding: 2px 8px;
+ margin-left: 5px;
+ border-radius: 2px;
+}
+
+.xtx_panel .xtx_panel_header .tabs-bar a:hover,
+.xtx_panel .xtx_panel_header .tabs-bar a.active {
+ background-color: #27BA9B;
+ color: #fff;
+}
+
+.xtx_panel .xtx_panel_goods_1 {
+ text-align: justify;
+ font-size: 0;
+}
+
+.xtx_panel .xtx_panel_goods_1:after {
+ content: "";
+ display: inline-block;
+ width: 306px;
+ height: 0;
+}
+
+.xtx_panel .xtx_panel_goods_1 a {
+ display: inline-block;
+ width: 306px;
+ height: 406px;
+ text-align: center;
+}
+
+.xtx_panel .xtx_panel_goods_1 img {
+ width: 306px;
+ height: 306px;
+}
+
+.xtx_panel .xtx_panel_goods_2 {
+ height: 610px;
+}
+
+.xtx_panel .xtx_panel_goods_2 li {
+ width: 240px;
+ height: 300px;
+ padding-top: 10px;
+ margin-left: 10px;
+ background-color: #fff;
+ border: 1px solid #fff;
+ overflow: hidden;
+ transition: 0.3s;
+ position: relative;
+ float: left;
+}
+
+.xtx_panel .xtx_panel_goods_2 li:hover {
+ border-color: #27BA9B;
+}
+
+.xtx_panel .xtx_panel_goods_2 li:hover .extra {
+ bottom: 0;
+}
+
+.xtx_panel .xtx_panel_goods_2 li:first-child {
+ height: 610px;
+ padding-top: 0;
+ margin-left: 0;
+ border: 0;
+}
+
+.xtx_panel .xtx_panel_goods_2 li:nth-last-child(-n + 4) {
+ margin-top: 10px;
+}
+
+.xtx_panel .xtx_panel_goods_2 a {
+ display: block;
+}
+
+.xtx_panel .xtx_panel_goods_2 .img-box {
+ width: 240px;
+ height: 160px;
+ padding: 0 33px;
+ text-align: center;
+ margin: 0 auto;
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.xtx_panel .xtx_panel_goods_2 .meta {
+ height: 130px;
+ line-height: 1.3;
+ padding: 10px 22px 0;
+ font-size: 19px;
+ position: relative;
+}
+
+.xtx_panel .xtx_panel_goods_2 .name {
+ word-break: break-all;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+}
+
+.xtx_panel .xtx_panel_goods_2 .price {
+ font-size: 22px;
+ color: #CF4444;
+ position: absolute;
+ bottom: 10px;
+}
+
+.xtx_panel .xtx_panel_goods_2 .price small {
+ font-size: 17px;
+}
+
+.xtx_panel .xtx_panel_goods_2 .extra {
+ width: 100%;
+ height: 86px;
+ padding-top: 10px;
+ transition: bottom 0.3s;
+ background-color: #27BA9B;
+ position: absolute;
+ bottom: -86px;
+}
+
+.xtx_panel .xtx_panel_goods_2 .extra span {
+ display: block;
+ width: 124px;
+ line-height: 1;
+ padding: 9px 0 8px;
+ margin: 0 auto;
+ text-align: center;
+ font-size: 19px;
+ color: #fff;
+}
+
+.xtx_panel .xtx_panel_goods_2 .extra span:last-child {
+ font-size: 13px;
+ border-top: 1px solid #fff;
+}
+
+.xtx_panel .xtx_panel_goods_2 .label {
+ position: absolute;
+ left: 0;
+ bottom: 266px;
+ width: 188px;
+ height: 66px;
+ text-align: center;
+ line-height: 66px;
+ color: #fff;
+ font-size: 17px;
+ border-radius: 0 2px 2px 0;
+ background-color: rgba(0, 0, 0, 0.8);
+ position: relative;
+}
+
+.xtx_panel .xtx_panel_goods_2 .label span:first-child {
+ display: block;
+ width: 76px;
+ background-color: #000;
+}
+
+.xtx_panel .xtx_panel_goods_2 .label span:last-child {
+ width: 112px;
+ line-height: 1.4;
+ transform: translate(0, -50%);
+ position: absolute;
+ left: 76px;
+ right: 0;
+ top: 50%;
+}
+
+/** 新鲜好物 **/
+.xtx_goods_new .xtx_panel_goods_1 a {
+ background-color: #f0f9f4;
+ transition: 0.5s;
+ position: relative;
+ top: 0;
+}
+
+.xtx_goods_new .xtx_panel_goods_1 a:hover {
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+ top: -3px;
+}
+
+.xtx_goods_new .xtx_panel_goods_1 .name {
+ display: inline-block;
+ width: 100%;
+ margin: 12px 0 10px;
+ font-size: 22px;
+}
+
+.xtx_goods_new .xtx_panel_goods_1 .price {
+ font-size: 23px;
+ color: #CF4444;
+}
+
+.xtx_goods_new .xtx_panel_goods_1 small {
+ font-size: 16px;
+}
+
+/** 人气推荐 **/
+.xtx_goods_popular {
+ padding-bottom: 42px;
+}
+
+.xtx_goods_popular .xtx_panel_goods_1 a {
+ transition: 0.5s;
+}
+
+.xtx_goods_popular .xtx_panel_goods_1 a:hover {
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+ transform: translate(0, -3px);
+}
+
+.xtx_goods_popular .xtx_panel_goods_1 .title {
+ display: inline-block;
+ width: 100%;
+ line-height: 1;
+ margin: 20px 0 16px;
+ font-size: 22px;
+}
+
+.xtx_goods_popular .xtx_panel_goods_1 .alt {
+ font-size: 18px;
+ color: #999;
+}
+
+/** 热门品牌 **/
+.xtx_goods_brand {
+ padding-bottom: 32px;
+ background-color: #f5f5f5;
+}
+
+.xtx_goods_brand .page-bar {
+ float: right;
+}
+
+.xtx_goods_brand .page-bar a {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ line-height: 1;
+ margin-top: 10px;
+ background-color: #e2e2e2;
+}
+
+.xtx_goods_brand .page-bar a:hover,
+.xtx_goods_brand .page-bar a.active {
+ background-color: #27BA9B;
+}
+
+.xtx_goods_brand .page-bar .prev {
+ margin-right: 5px;
+ background-position: -32px -106px;
+ transform: rotate(180deg);
+}
+
+.xtx_goods_brand .page-bar .next {
+ background-position: -32px -106px;
+}
+
+.xtx_goods_brand .xtx_goods {
+ height: 305px;
+}
+
+.xtx_goods_brand .xtx_goods li {
+ float: left;
+ font-size: 0;
+}
+
+.xtx_goods_brand .xtx_goods a {
+ margin-right: 10px;
+}
+
+.xtx_goods_brand .xtx_goods a img {
+ width: 240px;
+ height: 305px;
+}
+
+.xtx_goods_brand .xtx_goods a:last-child {
+ margin-right: 0;
+}
+
+/** 生鲜 **/
+.xtx_goods_category {
+ padding-bottom: 80px;
+}
+
+/** 最新主题 **/
+.xtx_goods_topic {
+ background-color: #f5f5f5;
+ padding-bottom: 52px;
+}
+
+.xtx_goods_topic li {
+ width: 406px;
+ margin-left: 11px;
+ transition: 0.5s;
+ float: left;
+ background: white;
+}
+
+.xtx_goods_topic li:hover {
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+ transform: translate(0, -3px);
+}
+
+.xtx_goods_topic li:first-child {
+ margin-left: 0;
+}
+
+.xtx_goods_topic li a {
+ display: block;
+ height: 287px;
+ position: relative;
+}
+
+.xtx_goods_topic .meta {
+ width: 100%;
+ height: 100%;
+ color: #fff;
+ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
+ position: absolute;
+ bottom: 0;
+}
+
+.xtx_goods_topic .meta .title {
+ height: 70px;
+ padding-left: 16px;
+ font-size: 22px;
+ position: absolute;
+ bottom: 0px;
+}
+
+.xtx_goods_topic .meta .title small {
+ display: block;
+ font-size: 19px;
+ color: #999;
+}
+
+.xtx_goods_topic .meta .price {
+ position: absolute;
+ bottom: 25px;
+ right: 16px;
+ display: block;
+ line-height: 1;
+ padding: 4px 8px 4px 7px;
+ color: #CF4444;
+ font-size: 17px;
+ background-color: #fff;
+ border-radius: 2px;
+}
+
+.xtx_goods_topic .meta .price small {
+ font-size: 15px;
+}
+
+.xtx_goods_topic .social {
+ height: 70px;
+ line-height: 70px;
+ padding: 0 20px;
+ font-size: 16px;
+}
+
+.xtx_goods_topic .social i {
+ display: inline-block;
+ width: 15px;
+ height: 14px;
+ margin-right: 5px;
+ position: relative;
+ top: 2px;
+}
+
+.xtx_goods_topic .social .like,
+.xtx_goods_topic .social .liked,
+.xtx_goods_topic .social .view {
+ float: left;
+ margin-right: 25px;
+}
+
+.xtx_goods_topic .social .reply {
+ float: right;
+}
+
+.xtx_goods_topic .social .like i {
+ background-position: -120px -110px;
+}
+
+.xtx_goods_topic .social .liked i {
+ background-position: -240px -110px;
+}
+
+.xtx_goods_topic .social .view i {
+ background-position: -160px -110px;
+}
+
+.xtx_goods_topic .social .reply i {
+ width: 17px;
+ height: 16px;
+ top: 4px;
+ background-position: -200px -110px;
+}
+
+.xtx-wrapper {
+ background: #f5f5f5;
+ line-height: 1.4;
+}
+
+.xtx-wrapper .container {
+ width: 1240px;
+ margin: 0 auto;
+}
+
+.xtx-wrapper .container .title {
+ height: 215px;
+ line-height: 215px;
+ font-size: 32px;
+ text-align: center;
+ font-weight: normal;
+}
+
+.xtx-bg-title {
+ width: 100%;
+ height: 180px;
+ padding-left: 213px;
+ background: no-repeat center / cover;
+}
+
+.xtx-bg-title h4 {
+ padding-top: 52px;
+ font-size: 32px;
+ font-weight: bold;
+}
+
+.xtx-bg-title p {
+ padding-top: 5px;
+ font-size: 20px;
+}
+
+.xtx-large-product {
+ margin-top: 40px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.xtx-large-product .item {
+ width: 610px;
+ height: 420px;
+ background: white;
+ position: relative;
+}
+
+.xtx-large-product .item img {
+ width: 100%;
+ height: 320px;
+ display: block;
+}
+
+.xtx-large-product .item p {
+ padding-left: 55px;
+}
+
+.xtx-large-product .item p.tit {
+ padding-top: 22px;
+ font-size: 16px;
+}
+
+.xtx-large-product .item p.desc {
+ padding-top: 12px;
+ color: #999;
+ font-size: 14px;
+}
+
+.xtx-large-product .item .price {
+ position: absolute;
+ bottom: 37px;
+ right: 33px;
+ color: #CF4444;
+ font-size: 18px;
+}
+
+.xtx-large-product .item .tag {
+ width: 170px;
+ height: 40px;
+ border: 1px solid #fff;
+ border-radius: 4px;
+ position: absolute;
+ top: 17px;
+ left: 15px;
+ line-height: 40px;
+ color: #fff;
+ text-align: center;
+ font-size: 16px;
+}
+
+.xtx-mini-product {
+ padding-top: 40px;
+ padding-bottom: 20px;
+}
+
+.xtx-mini-product ul li {
+ width: 232px;
+ height: 320px;
+ float: left;
+ background: white;
+ margin-right: 20px;
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+.xtx-mini-product ul li:nth-child(5n) {
+ margin-right: 0;
+}
+
+.xtx-mini-product ul li img {
+ width: 160px;
+ height: 160px;
+ display: block;
+ margin: 22px auto 0;
+}
+
+.xtx-mini-product ul li .tit {
+ padding-top: 23px;
+ font-size: 16px;
+}
+
+.xtx-mini-product ul li .desc {
+ padding-top: 12px;
+ color: #999;
+}
+
+.xtx-mini-product ul li .price {
+ font-size: 18px;
+ color: #CF4444;
+ padding-top: 16px;
+}
+
+.xtx-simpla-title {
+ height: 40px;
+ font-size: 28px;
+ text-align: center;
+}
+
+.xtx-large-brand {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+.xtx-large-brand .item {
+ width: 610px;
+ height: 480px;
+ background: white;
+ margin-bottom: 40px;
+}
+
+.xtx-large-brand .item img {
+ width: 100%;
+ height: 320px;
+ display: block;
+}
+
+.xtx-large-brand .item .info {
+ padding: 0 35px;
+ position: relative;
+}
+
+.xtx-large-brand .item .info p.name {
+ padding-top: 22px;
+ padding-bottom: 12px;
+ font-size: 20px;
+}
+
+.xtx-large-brand .item .info p.name i {
+ width: 36px;
+ height: 18px;
+ line-height: 18px;
+ background: #27BA9B;
+ border-radius: 2px;
+ color: #fff;
+ font-size: 14px;
+ display: inline-block;
+ text-align: center;
+}
+
+.xtx-large-brand .item .info p.desc {
+ color: #999;
+ font-size: 14px;
+ height: 40px;
+ line-height: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ padding-right: 40px;
+}
+
+.xtx-large-brand .item .info .price {
+ position: absolute;
+ top: 20px;
+ right: 35px;
+ color: #CF4444;
+ font-size: 18px;
+}
+
+.xtx-large-brand .item .comment {
+ padding: 15px 35px 0;
+ line-height: 40px;
+ color: #999;
+}
+
+.xtx-large-brand .item .comment .line {
+ width: 100%;
+ height: 1px;
+ background: #E4E4E4;
+}
+
+.xtx-large-brand .item .comment .red {
+ color: #CF4444;
+}
+
+.xtx-large-brand .item .comment .mr18 {
+ margin-right: 18px;
+}
+
+.xtx-elevator {
+ position: fixed;
+ left: 50%;
+ top: 280px;
+ z-index: 999;
+ margin-left: 640px;
+ opacity: 0;
+ transition: all .5s;
+}
+
+.xtx-elevator .xtx-elevator-list {
+ width: 60px;
+ height: 300px;
+ background: #fff;
+ float: right;
+ border: 1px solid #f5f5f5;
+ position: relative;
+}
+
+.xtx-elevator .xtx-elevator-list li {
+ height: 60px;
+ padding: 15px;
+}
+
+.xtx-elevator .xtx-elevator-list li a {
+ width: 30px;
+ height: 30px;
+ display: block;
+}
+
+.xtx-elevator .xtx-elevator-list li a:hover,
+.xtx-elevator .xtx-elevator-list li a.active {
+ color: #27BA9B;
+}
+
+.xtx-elevator .xtx-elevator-list li a i {
+ display: block;
+ width: 16px;
+ height: 16px;
+ position: relative;
+ left: 4px;
+ background-position: 8px -106px;
+ font-size: 20px;
+ transform: rotate(-90deg);
+}
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231122 \346\227\266\351\227\264\344\270\216\350\212\202\347\202\271.md" "b/13\350\224\241\345\230\211\344\271\220/20231122 \346\227\266\351\227\264\344\270\216\350\212\202\347\202\271.md"
new file mode 100644
index 0000000..035a59f
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231122 \346\227\266\351\227\264\344\270\216\350\212\202\347\202\271.md"
@@ -0,0 +1,856 @@
+### 实例化日期对象
+
+```html
+
+```
+
+### 常见的日期对象方法
+
+```html
+
+```
+
+### 时间的另一个写法
+
+```html
+
+
+
+
+
+```
+
+### 得到时间戳
+
+```html
+
+```
+
+### 父节点
+
+```html
+
+
+
+
+
+
+
+
+ -
+
- 客户服务 +
- 在线客服 +
- 问题反馈 +
-
+
- 关注我们 +
- 公众号 +
- 微博 +
-
+
- 下载APP +
-
+
+
+ - + 扫描二维码 + 立马下载APP + 下载页面 + +
-
+
- 服务热线 +
- + 400-0000-000 + 周一至周日 8:00-18:00 + +
+
+
+
+```
+
+### 子节点
+
+```html
+
+
+
+ x
+ -
+
- 1 +
- 2 +
- 3 +
- 4 +
- 5 +
-
+
- 我是老大 +
-
+
- 1 +
- 2 + +
- 3 + +
123
+ -
+
- 1 +
- 2 +
- 3 +
- 4 +
+
+
+
+```
+
+### 点击关闭
+
+```html
+
+
+ 今天是2023年11月21日
+下班倒计时
++ 00 + : + 25 + : + 20 +
+17:40:00下课
+
+ 我是广告
+
+
+
+```
+
+
+
+### 学生信息案例
+
+```html
+
+
+
+
+
+
+
+ X
+ 新增学员
+ + +就业榜
+| 学号 | +姓名 | +年龄 | +性别 | +薪资 | +就业城市 | +操作 | +
|---|
+
+
+
+
+
+```
+
+css 样式
+
+```css
+* {
+ margin: 0;
+ padding: 0;
+}
+.w {
+ width: 1200px;
+ margin: auto;
+}
+body {
+ background-color: #f3f5f7;
+}
+li {
+ list-style: none;
+}
+a {
+ text-decoration: none;
+}
+.clearfix:before,.clearfix:after {
+ content:"";
+ display:table;
+ }
+ .clearfix:after {
+ clear:both;
+ }
+ .clearfix {
+ *zoom:1;
+ }
+
+
+.box {
+ margin-top: 30px;
+}
+.box-hd {
+ height: 45px;
+}
+.box-hd h3 {
+ float: left;
+ font-size: 20px;
+ color: #494949;
+}
+.box-hd a {
+ float: right;
+ font-size: 12px;
+ color: #a5a5a5;
+ margin-top: 10px;
+ margin-right: 30px;
+}
+/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
+.box-bd ul {
+ width: 1225px;
+}
+.box-bd ul li {
+ position: relative;
+ top: 0;
+ float: left;
+ width: 228px;
+ height: 270px;
+ background-color: #fff;
+ margin-right: 15px;
+ margin-bottom: 15px;
+ transition: all .3s;
+
+}
+.box-bd ul li a {
+ display: block;
+}
+.box-bd ul li:hover {
+ top: -8px;
+ box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
+}
+.box-bd ul li img {
+ width: 100%;
+}
+.box-bd ul li h4 {
+ margin: 20px 20px 20px 25px;
+ font-size: 14px;
+ color: #050505;
+ font-weight: 400;
+}
+.box-bd .info {
+ margin: 0 20px 0 25px;
+ font-size: 12px;
+ color: #999;
+}
+.box-bd .info span {
+ color: #ff7c2d;
+}
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231123 \346\227\266\351\227\264.md" "b/13\350\224\241\345\230\211\344\271\220/20231123 \346\227\266\351\227\264.md"
new file mode 100644
index 0000000..035a59f
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231123 \346\227\266\351\227\264.md"
@@ -0,0 +1,856 @@
+### 实例化日期对象
+
+```html
+
+```
+
+### 常见的日期对象方法
+
+```html
+
+```
+
+### 时间的另一个写法
+
+```html
+
+
+
+
+
+```
+
+### 得到时间戳
+
+```html
+
+```
+
+### 父节点
+
+```html
+
+
+
+ 精品推荐
+ 查看全部 +
+
+ -
+
+
+
+
+
+```
+
+### 子节点
+
+```html
+
+
+
+ x
+ -
+
- 1 +
- 2 +
- 3 +
- 4 +
- 5 +
-
+
- 我是老大 +
-
+
- 1 +
- 2 + +
- 3 + +
123
+ -
+
- 1 +
- 2 +
- 3 +
- 4 +
+
+
+
+```
+
+### 点击关闭
+
+```html
+
+
+ 今天是2023年11月21日
+下班倒计时
++ 00 + : + 25 + : + 20 +
+17:40:00下课
+
+ 我是广告
+
+
+
+```
+
+
+
+### 学生信息案例
+
+```html
+
+
+
+
+
+
+
+ X
+ 新增学员
+ + +就业榜
+| 学号 | +姓名 | +年龄 | +性别 | +薪资 | +就业城市 | +操作 | +
|---|
+
+
+
+
+
+```
+
+css 样式
+
+```css
+* {
+ margin: 0;
+ padding: 0;
+}
+.w {
+ width: 1200px;
+ margin: auto;
+}
+body {
+ background-color: #f3f5f7;
+}
+li {
+ list-style: none;
+}
+a {
+ text-decoration: none;
+}
+.clearfix:before,.clearfix:after {
+ content:"";
+ display:table;
+ }
+ .clearfix:after {
+ clear:both;
+ }
+ .clearfix {
+ *zoom:1;
+ }
+
+
+.box {
+ margin-top: 30px;
+}
+.box-hd {
+ height: 45px;
+}
+.box-hd h3 {
+ float: left;
+ font-size: 20px;
+ color: #494949;
+}
+.box-hd a {
+ float: right;
+ font-size: 12px;
+ color: #a5a5a5;
+ margin-top: 10px;
+ margin-right: 30px;
+}
+/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
+.box-bd ul {
+ width: 1225px;
+}
+.box-bd ul li {
+ position: relative;
+ top: 0;
+ float: left;
+ width: 228px;
+ height: 270px;
+ background-color: #fff;
+ margin-right: 15px;
+ margin-bottom: 15px;
+ transition: all .3s;
+
+}
+.box-bd ul li a {
+ display: block;
+}
+.box-bd ul li:hover {
+ top: -8px;
+ box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
+}
+.box-bd ul li img {
+ width: 100%;
+}
+.box-bd ul li h4 {
+ margin: 20px 20px 20px 25px;
+ font-size: 14px;
+ color: #050505;
+ font-weight: 400;
+}
+.box-bd .info {
+ margin: 0 20px 0 25px;
+ font-size: 12px;
+ color: #999;
+}
+.box-bd .info span {
+ color: #ff7c2d;
+}
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231124 \345\273\266\350\277\237\345\207\275\346\225\260.md" "b/13\350\224\241\345\230\211\344\271\220/20231124 \345\273\266\350\277\237\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..28de8c8
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231124 \345\273\266\350\277\237\345\207\275\346\225\260.md"
@@ -0,0 +1,530 @@
+### 延迟函数
+
+```html
+
+```
+
+### 延迟函数的执行顺序
+
+```html
+
+```
+
+### location 对象
+
+```html
+
+```
+
+### history 对象
+
+```html
+
+
+
+
+
+```
+
+### localStorage 存储
+
+```html
+
+
+
+```
+
+### 本地存储复杂数据类型
+
+```html
+
+
+
+```
+
+### 数组map方法
+
+```html
+
+```
+
+### 数组的join方法
+
+```html
+
+```
+
+### 5秒自动关闭的广告
+
+```html
+
+
+
+
+ 精品推荐
+ 查看全部 +
+
+ -
+
+
+
+
+```
+
+### 5秒钟之后自动跳转页面
+
+```html
+
+
+ 支付成功5秒钟之后跳转到首页
+
+
+```
+
+### 自动跳转到移动端
+
+```html
+
+```
+
+### 学生信息表案例
+
+```html
+
+ 新增学员
+ + +就业榜
+| 学号 | +姓名 | +年龄 | +性别 | +薪资 | +就业城市 | +操作 | +
|---|
+
+
+
+
+```
+
+### 价格筛选
+
+```html
+
+
+
+
+
+
+
+```
+
+### filter筛选数组
+
+```html
+
+```
+
+## 作业
+
+```html
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231205 \345\210\233\345\273\272\345\257\271\350\261\241.md" "b/13\350\224\241\345\230\211\344\271\220/20231205 \345\210\233\345\273\272\345\257\271\350\261\241.md"
new file mode 100644
index 0000000..95b5e5a
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231205 \345\210\233\345\273\272\345\257\271\350\261\241.md"
@@ -0,0 +1,444 @@
+# JavaScript 进阶 - 第2天
+
+> 了解面向对象编程的基础概念及构造函数的作用，体会 JavaScript 一切皆对象的语言特征，掌握常见的对象属性和方法的使用。
+
+- 了解面向对象编程中的一般概念
+- 能够基于构造函数创建对象
+- 理解 JavaScript 中一切皆对象的语言特征
+- 理解引用对象类型值存储的的特征
+- 掌握包装类型对象常见方法的使用
+
+## 深入对象
+
+> 了解面向对象的基础概念，能够利用构造函数创建对象。
+
+### 构造函数
+
+构造函数是专门用于创建对象的函数，如果一个函数使用 `new` 关键字调用，那么这个函数就是构造函数。
+
+```html
+
+```
+
+总结：
+
+2. 使用 `new` 关键字调用函数的行为被称为实例化
+3. 实例化构造函数时没有参数时可以省略 `()`
+4. 构造函数的返回值即为新创建的对象
+5. 构造函数内部的 `return` 返回的值无效！
+
+注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。
+
+### 实例成员
+
+通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
+
+```html
+
+```
+
+总结：
+
+1. 构造函数内部 `this` 实际上就是实例对象，为其动态添加的属性和方法即为实例成员
+2. 为构造函数传入参数，动态创建结构相同但值不同的对象
+
+注：构造函数创建的实例对象彼此独立互不影响。
+
+### 静态成员
+
+在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。
+
+```html
+
+```
+
+总结：
+
+1. 静态成员指的是添加到构造函数本身的属性和方法
+2. 一般公共特征的属性或方法静态成员设置为静态成员
+3. 静态成员方法中的 `this` 指向构造函数本身
+
+## 内置构造函数
+
+> 掌握各引用类型和包装类型对象属性和方法的使用。
+
+在 JavaScript 中**最主要**的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。
+
+在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 `Date` 就是内置的构造函数。
+
+```html
+
+```
+
+甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。
+
+### Object
+
+`Object` 是内置的构造函数，用于创建普通对象。
+
+```html
+
+```
+
+。
+
+总结：
+
+1. 推荐使用字面量方式声明对象，而不是 `Object` 构造函数
+2. `Object.assign` 静态方法创建新的对象
+3. `Object.keys` 静态方法获取对象中所有属性
+4. `Object.values` 表态方法获取对象中所有属性值
+
+### Array
+
+`Array` 是内置的构造函数，用于创建数组。
+
+```html
+
+```
+
+数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。
+
+总结：
+
+1. 推荐使用字面量方式声明数组，而不是 `Array` 构造函数
+
+2. 实例方法 `forEach` 用于遍历数组，替代 `for` 循环 (重点)
+
+3. 实例方法 `filter` 过滤数组单元值，生成新数组(重点)
+
+4. 实例方法 `map` 迭代原数组，生成新数组(重点)
+
+5. 实例方法 `join` 数组元素拼接为字符串，返回字符串(重点)
+
+6. 实例方法 `find` 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点) indexOf()
+
+7. 实例方法`every` 检测数组所有元素是否都符合指定条件，如果**所有元素**都通过检测返回 true，否则返回 false(重点)
+
+8. 实例方法`some` 检测数组中的元素是否满足指定条件 **如果数组中有**元素满足条件返回 true，否则返回 false
+
+9. 实例方法 `concat` 合并两个数组，返回生成新数组
+
+10. 实例方法 `sort` 对原数组单元值排序
+
+11. 实例方法 `splice` 删除或替换原数组单元
+
+12. 实例方法 `reverse` 反转数组
+
+13. 实例方法 `findIndex` 查找元素的索引值
+
+
+
+### 包装类型
+
+在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例：
+
+```html
+
+```
+
+之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。
+
+#### String
+
+`String` 是内置的构造函数，用于创建字符串。
+
+```html
+
+```
+
+总结：
+
+1. 实例属性 `length` 用来获取字符串的度长(重点)
+2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点)
+3. 实例方法 `substring（需要截取的第一个字符的索引[,结束的索引号]）` 用于字符串截取(重点)
+4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点)
+5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)
+5. 实例方法 `toUpperCase` 用于将字母转换成大写
+7. 实例方法 `toLowerCase` 用于将就转换成小写
+8. 实例方法 `indexOf` 检测是否包含某字符
+9. 实例方法 `endsWith` 检测是否以某字符结尾
+10. 实例方法 `replace` 用于替换字符串，支持正则匹配
+13. 实例方法 `match` 用于查找字符串，支持正则匹配
+
+注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。
+
+#### Number
+
+`Number` 是内置的构造函数，用于创建数值。
+
+```html
+
+```
+
+总结：
+
+1. 推荐使用字面量方式声明数值，而不是 `Number` 构造函数
+2. 实例方法 `toFixed` 用于设置保留小数位的长度
+
+## 综合案例
+
+```html
+
+```
+
+## 购物车
+
+```html
+
+```
+
+
+
+
+
+
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231206 Ajax\351\242\204\344\271\240.md" "b/13\350\224\241\345\230\211\344\271\220/20231206 Ajax\351\242\204\344\271\240.md"
new file mode 100644
index 0000000..864bf28
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231206 Ajax\351\242\204\344\271\240.md"
@@ -0,0 +1,149 @@
+### Ajax
+
+```html
+//test.josn的代码
+{
+ "reply":"我收到啦！"
+}
+
+const xhr = new XMLHttpRequest();
+xhr.onreadystatechange = () => {
+ if (xhr.readyState !== 4) return;
+ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
+ console.log(xhr.responseText);
+ }
+};
+xhr.open('GET', 'text.json', true);
+xhr.send(null);
+
+// “replay” : {"我收到啦！"，“”}
+```
+
+1.创建xhr对象
+
+```js
+const xhr = new XMLHttpRequest();
+```
+
+2.利用onreadystatechange属性，封装一个函数，用于监听 readyState的变化。
+
+```js
+xhr.onreadystatechange = () => {
+if (xhr.readyState !== 4) return;
+if (xhr.status >= 200 && xhr.status < 300 ){
+ console.log(xhr.responseText);
+ }
+};
+```
+
+2.1在xhr对象执行收发数据的时候，它会经历五种状态：
+
+
+| Ajax状态码 | 状态 |
+| ---------- | ------------------------------------------------------------ |
+| 0 | （**未初始化**）未启动 |
+| 1 | （**启动**）已经调用 open()，但尚未调用 send() |
+| 2 | （**发送**）发送状态，已经调用 send()，但尚未接收到响应 |
+| 3 | （**接收**）已经接收到部分响应数据 |
+| 4 | （**完成**）已经接收到全部响应数据，而且已经可以在浏览器中使用了 |
+
+2.2判断HTTP状态码是否为200-299
+
+Ajax状态码为4是不够的，这仅仅表明收到服务器端响应的全部数据，并不能保障数据都是正确的。
+
+所以，我们还需要判断HTTP的状态码，判断xhr对象的status属性值是否在200到300之间（200-299 用于表示请求成功）
+
+```js
+if (xhr.status >= 200 && xhr.status < 300 ){
+ console.log(xhr.responseText);
+}
+```
+
+所以要想请求成功完成，必须要满足上面两个条件。
+
+3.准备发送请求
+
+```js
+xhr.open('GET','text.json', true);
+```
+
+参数1：选用"GET"或者“POST”的请求方式
+
+参数2：发送请求的地址
+
+参数3：是否异步
+
+4.发送请求
+
+```js
+xhr.send(null)
+```
+
+ 注意：send() 的参数是通过请求体携带的数据，而GET请求是通过请求头携带数据的，所以要把send的参数置为null
+
+```html
+
+```
+
+### 复习
+
+```html
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231207 \347\231\273\345\275\225\346\241\210\344\276\213.md" "b/13\350\224\241\345\230\211\344\271\220/20231207 \347\231\273\345\275\225\346\241\210\344\276\213.md"
new file mode 100644
index 0000000..e271eda
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231207 \347\231\273\345\275\225\346\241\210\344\276\213.md"
@@ -0,0 +1,71 @@
+## 登录案例
+
+```html
+
+```
+
+## 问答机器人
+
+```html
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" "b/13\350\224\241\345\230\211\344\271\220/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md"
new file mode 100644
index 0000000..172e941
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md"
@@ -0,0 +1,125 @@
+图书管理
+
+```html
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231212 jQuery .md" "b/13\350\224\241\345\230\211\344\271\220/20231212 jQuery .md"
new file mode 100644
index 0000000..cdab22e
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231212 jQuery .md"
@@ -0,0 +1,301 @@
+## jQuery 语法实例
+
+- [$(this).hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_hide_this)
+
+ 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
+
+- [$("#test").hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_hide_id)
+
+ 演示 jQuery hide() 函数，隐藏 id="test" 的元素。
+
+- [$("p").hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_hide_p)
+
+ 演示 jQuery hide() 函数，隐藏所有
+
+ 元素。
+
+- [$(".test").hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_hide_class)
+
+ 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
+
+ ## jQuery 语法
+
+ jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
+
+ 基础语法是：*$(selector).action()*
+
+ - 美元符号定义 jQuery
+ - 选择符（selector）“查询”和“查找” HTML 元素
+ - jQuery 的 action() 执行对元素的操作
+
+ ### 示例
+
+ $(this).hide() - 隐藏当前元素
+
+ $("p").hide() - 隐藏所有段落
+
+ $(".test").hide() - 隐藏所有 class="test" 的所有元素
+
+ $("#test").hide() - 隐藏所有 id="test" 的元素
+
+ **提示：**jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法
+
+```html
+
+
+```
+
diff --git "a/13\350\224\241\345\230\211\344\271\220/20231213 jQuery.md" "b/13\350\224\241\345\230\211\344\271\220/20231213 jQuery.md"
new file mode 100644
index 0000000..09300e3
--- /dev/null
+++ "b/13\350\224\241\345\230\211\344\271\220/20231213 jQuery.md"
@@ -0,0 +1,143 @@
+tab栏切换
+
+```html
+
+
+
+```
+
+轮播图
+
+```html
+
+
+```
+
--
Gitee