first commit

历届学生/front-end-team/.history/.gitignore_20220411220559

@@ -0,0 +1,2 @@
+node_modules
+.idea

历届学生/front-end-team/.history/.gitignore_20220417141005

@@ -0,0 +1,3 @@
+node_modules
+.idea
+.history

历届学生/front-end-team/.history/.gitignore_20220417141006

@@ -0,0 +1,3 @@
+node_modules
+.idea
+.history

历届学生/front-end-team/.history/.gitignore_20220417141007

@@ -0,0 +1,3 @@
+node_modules
+.idea
+.history

历届学生/front-end-team/.history/.gitignore_20220417141010

@@ -0,0 +1,3 @@
+node_modules
+.idea
+.history

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/config/index_20220417135835.js

@@ -0,0 +1,76 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/config/index_20220417233135.js

@@ -0,0 +1,87 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target:'改成我们接口的请求基地址',   // 代理目标
+        changeOrigin:true,    //是否跨域
+        pathRewrite:{
+          '^/api': '/'   //重写路径
+        }
+      }
+————————————————
+版权声明：本文为CSDN博主「Rum chen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
+原文链接：https://blog.csdn.net/Chen_RuiMin/article/details/105326099
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/config/index_20220417233137.js

@@ -0,0 +1,84 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target:'改成我们接口的请求基地址',   // 代理目标
+        changeOrigin:true,    //是否跨域
+        pathRewrite:{
+          '^/api': '/'   //重写路径
+        }
+      }
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/config/index_20220417233138.js

@@ -0,0 +1,84 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target:'改成我们接口的请求基地址',   // 代理目标
+        changeOrigin:true,    //是否跨域
+        pathRewrite:{
+          '^/api': '/'   //重写路径
+        }
+      }
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/config/index_20220417233150.js

@@ -0,0 +1,84 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target:'https://zbhapi.ahtv.cn/h5',   // 代理目标
+        changeOrigin:true,    //是否跨域
+        pathRewrite:{
+          '^/api': '/'   //重写路径
+        }
+      }
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/config/index_20220418003442.js

@@ -0,0 +1,84 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target:'https://zbhapi.ahtv.cn/h5',   // 代理目标
+        changeOrigin:true,    //是否跨域
+        pathRewrite:{
+          '^/api': '/'   //重写路径
+        }
+      }
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/src/config/index_20220417135835.js

@@ -0,0 +1,40 @@
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+import VueVideoPlayer from 'vue-video-player'
+import "videojs-contrib-hls"
+import 'video.js/dist/video-js.css'
+
+import service from '../service/_'
+import utils from '../utils/index'
+
+
+export default {
+    devBaseUrl: 'https://zbhapi.ahtv.cn/h5', // 开发阶段地址
+    testBaseUrl: 'http://192.168.31.100:3000/api/json/test', // 测试阶段地址
+    prodBaseUrl: 'https://zbhapi.ahtv.cn/h5', // 上线后的地址
+    urlList: {
+      radio: "/radio",
+      channelList: "channelList"
+    },
+    vuePlugins: [ Vant, VueVideoPlayer ], // vue插件
+    noVuePlugins: [
+      { name: '$http', value: service },
+      { name: '$utils', value: utils }
+    ],
+    checkBaseUrl: function () {
+        switch (process.env.NODE_ENV) {
+            case "development":
+                return this.devBaseUrl;
+                break;
+
+            case "test":
+                return this.testBaseUrl;
+                break;
+
+            case "production":
+                return this.prodBaseUrl;
+                break;
+        }
+    }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/src/config/index_20220417233155.js

@@ -0,0 +1,40 @@
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+import VueVideoPlayer from 'vue-video-player'
+import "videojs-contrib-hls"
+import 'video.js/dist/video-js.css'
+
+import service from '../service/_'
+import utils from '../utils/index'
+
+
+export default {
+    devBaseUrl: '/api', // 开发阶段地址
+    testBaseUrl: 'http://192.168.31.100:3000/api/json/test', // 测试阶段地址
+    prodBaseUrl: 'https://zbhapi.ahtv.cn/h5', // 上线后的地址
+    urlList: {
+      radio: "/radio",
+      channelList: "channelList"
+    },
+    vuePlugins: [ Vant, VueVideoPlayer ], // vue插件
+    noVuePlugins: [
+      { name: '$http', value: service },
+      { name: '$utils', value: utils }
+    ],
+    checkBaseUrl: function () {
+        switch (process.env.NODE_ENV) {
+            case "development":
+                return this.devBaseUrl;
+                break;
+
+            case "test":
+                return this.testBaseUrl;
+                break;
+
+            case "production":
+                return this.prodBaseUrl;
+                break;
+        }
+    }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/src/config/index_20220417233418.js

@@ -0,0 +1,40 @@
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+import VueVideoPlayer from 'vue-video-player'
+import "videojs-contrib-hls"
+import 'video.js/dist/video-js.css'
+
+import service from '../service/_'
+import utils from '../utils/index'
+
+
+export default {
+    devBaseUrl: '/api', // 开发阶段地址
+    testBaseUrl: 'http://192.168.31.100:3000/api/json/test', // 测试阶段地址
+    prodBaseUrl: 'https://zbhapi.ahtv.cn/h5', // 上线后的地址
+    urlList: {
+      radio: "/radio",
+      channelList: "channelList"
+    },
+    vuePlugins: [ Vant, VueVideoPlayer ], // vue插件
+    noVuePlugins: [
+      { name: '$http', value: service },
+      { name: '$utils', value: utils }
+    ],
+    checkBaseUrl: function () {
+        switch (process.env.NODE_ENV) {
+            case "development":
+                return this.devBaseUrl;
+                break;
+
+            case "test":
+                return this.testBaseUrl;
+                break;
+
+            case "production":
+                return this.prodBaseUrl;
+                break;
+        }
+    }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/src/config/index_20220417233712.js

@@ -0,0 +1,40 @@
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+import VueVideoPlayer from 'vue-video-player'
+import "videojs-contrib-hls"
+import 'video.js/dist/video-js.css'
+
+import service from '../service/_'
+import utils from '../utils/index'
+
+
+export default {
+    devBaseUrl: '/api', // 开发阶段地址
+    testBaseUrl: 'http://192.168.31.100:3000/api/json/test', // 测试阶段地址
+    prodBaseUrl: 'https://zbhapi.ahtv.cn/h5', // 上线后的地址
+    urlList: {
+      radio: "/radio",
+      channelList: "channelList"
+    },
+    vuePlugins: [ Vant, VueVideoPlayer ], // vue插件
+    noVuePlugins: [
+      { name: '$http', value: service },
+      { name: '$utils', value: utils }
+    ],
+    checkBaseUrl: function () {
+        switch (process.env.NODE_ENV) {
+            case "development":
+                return this.devBaseUrl;
+                break;
+
+            case "test":
+                return this.testBaseUrl;
+                break;
+
+            case "production":
+                return this.prodBaseUrl;
+                break;
+        }
+    }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/src/config/index_20220417233713.js

@@ -0,0 +1,40 @@
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+import VueVideoPlayer from 'vue-video-player'
+import "videojs-contrib-hls"
+import 'video.js/dist/video-js.css'
+
+import service from '../service/_'
+import utils from '../utils/index'
+
+
+export default {
+    devBaseUrl: '/api', // 开发阶段地址
+    testBaseUrl: 'http://192.168.31.100:3000/api/json/test', // 测试阶段地址
+    prodBaseUrl: 'https://zbhapi.ahtv.cn/h5', // 上线后的地址
+    urlList: {
+      radio: "/radio",
+      channelList: "channelList"
+    },
+    vuePlugins: [ Vant, VueVideoPlayer ], // vue插件
+    noVuePlugins: [
+      { name: '$http', value: service },
+      { name: '$utils', value: utils }
+    ],
+    checkBaseUrl: function () {
+        switch (process.env.NODE_ENV) {
+            case "development":
+                return this.devBaseUrl;
+                break;
+
+            case "test":
+                return this.testBaseUrl;
+                break;
+
+            case "production":
+                return this.prodBaseUrl;
+                break;
+        }
+    }
+}

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/笔记_20220417140449.txt

@@ -0,0 +1,81 @@
+webpack  项目的总管家 （项目的打包构建工具）
+
+build : 项目打包上线的时候使用到的一些配置文件
+config：项目配置文件
+node_modules ： 依赖文件
+src：项目真正源代码
+  assets  存放静态资源的，css，图标（较小的）
+  components  存放公共组件的地方
+  config  存放应用配置的地方（接口地址）
+  http  axios请求的封装
+  service 请求中检测
+  utils 公共方法
+  router  vue-router 的配置文件
+  App.vue 网站最外层最顶级的 父组件
+  main.js 是整个项目的入口（启动文件）  做插件的初始化，全局组件，全局混入
+  page  存放路由能访问的页面
+
+static 存放静态（万年不变的，体积较大的资源）资源的，css，js，图片，字体
+.babelrc  是插件 babel 的配置文件
+          babel 帮我们帮高版本的js语法转化为低版本的js   es5  es6 7 8 9
+.editorconfig 编辑器的格式配置文件
+
+
+都是eslint的配置文件
+.eslintignore eslint的忽略文件，规定了哪些文件不进行语法检查
+.eslintrc.js   eslint的真正配置文件
+.gitignore git忽略文件，规定哪些文件不上传仓库
+.postcssrc.js 插件 postcss 的配置文件
+index.html    项目唯一的一个html文件
+package.json  nodejs的项目配置文件
+README.md 项目的帮助文档  https://www.jianshu.com/p/191d1e21f7ed
+
+css 预处理器
+
+  让我们通过编程的方式来写css
+
+
+hls 视频切片技术
+
+1000MB   mp4
+
+100 个小视频
+10MB
+
+m3u8  是一个txt文本文件  eee.m3u8
+1.ts
+2.ts
+...
+100.ts
+
+
+作业：
+
+
+  页面：
+
+  【李康】1: 新闻页面  图 1 2
+  https://zbhh5.ahtv.cn/newInfo?id=625
+  参数：id 625
+  接口：
+
+  【缪虎】2: 视频页面  图 3 4
+  https://zbhh5.ahtv.cn/dibbling?id=147
+  参数：id 147
+
+  【陆旗】3：帖子页面 图 7
+  https://zbhh5.ahtv.cn/postInfo?id=218
+  参数：id 218
+
+
+  组件：
+
+    【李康】1 评论组件 data数组  v-if data 有数据显示评论列表 没有数据 显示暂无数据   打开app查看全部评论
+
+    【缪虎】2 相关推荐  data数组  theme  1（横向布局） 2（垂直布局）
+
+     【陆旗】3 头部组件  不需要 props
+
+
+
+

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/笔记_20220417140954.txt

@@ -0,0 +1,81 @@
+webpack  项目的总管家 （项目的打包构建工具）
+
+build : 项目打包上线的时候使用到的一些配置文件
+config：项目配置文件
+node_modules ： 依赖文件
+src：项目真正源代码
+  assets  存放静态资源的，css，图标（较小的）
+  components  存放公共组件的地方
+  config  存放应用配置的地方（接口地址）
+  http  axios请求的封装
+  service 请求中检测
+  utils 公共方法
+  router  vue-router 的配置文件
+  App.vue 网站最外层最顶级的 父组件
+  main.js 是整个项目的入口（启动文件）  做插件的初始化，全局组件，全局混入
+  page  存放路由能访问的页面
+
+static 存放静态（万年不变的，体积较大的资源）资源的，css，js，图片，字体
+.babelrc  是插件 babel 的配置文件
+          babel 帮我们帮高版本的js语法转化为低版本的js   es5  es6 7 8 9
+.editorconfig 编辑器的格式配置文件
+
+
+都是eslint的配置文件
+.eslintignore eslint的忽略文件，规定了哪些文件不进行语法检查
+.eslintrc.js   eslint的真正配置文件
+.gitignore git忽略文件，规定哪些文件不上传仓库
+.postcssrc.js 插件 postcss 的配置文件
+index.html    项目唯一的一个html文件
+package.json  nodejs的项目配置文件
+README.md 项目的帮助文档  https://www.jianshu.com/p/191d1e21f7ed
+
+css 预处理器
+
+  让我们通过编程的方式来写css
+
+
+hls 视频切片技术
+
+1000MB   mp4
+
+100 个小视频
+10MB
+
+m3u8  是一个txt文本文件  eee.m3u8
+1.ts
+2.ts
+...
+100.ts
+
+
+作业：
+
+
+  页面：
+
+  【李康】1: 新闻页面  图 1 2
+  https://zbhh5.ahtv.cn/newInfo?id=625
+  参数：id 625
+  接口：
+
+  【缪虎】2: 视频页面  图 3 4
+  https://zbhh5.ahtv.cn/dibbling?id=147
+  参数：id 147
+
+  【陆旗】3：帖子页面 图 7
+  https://zbhh5.ahtv.cn/postInfo?id=218
+  参数：id 218
+
+
+  组件：
+
+    【李康】1 评论组件 data数组  v-if data 有数据显示评论列表 没有数据 显示暂无数据   打开app查看全部评论
+
+    【缪虎】2 相关推荐  data数组  theme  1（横向布局） 2（垂直布局）
+
+     【陆旗】3 头部组件  不需要 props
+
+
+
+

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/笔记_20220417141105.txt

@@ -0,0 +1,81 @@
+webpack  项目的总管家 （项目的打包构建工具）
+
+build : 项目打包上线的时候使用到的一些配置文件
+config：项目配置文件
+node_modules ： 依赖文件
+src：项目真正源代码
+  assets  存放静态资源的，css，图标（较小的）
+  components  存放公共组件的地方
+  config  存放应用配置的地方（接口地址）
+  http  axios请求的封装
+  service 请求中检测
+  utils 公共方法
+  router  vue-router 的配置文件
+  App.vue 网站最外层最顶级的 父组件
+  main.js 是整个项目的入口（启动文件）  做插件的初始化，全局组件，全局混入
+  page  存放路由能访问的页面
+
+static 存放静态（万年不变的，体积较大的资源）资源的，css，js，图片，字体
+.babelrc  是插件 babel 的配置文件
+          babel 帮我们帮高版本的js语法转化为低版本的js   es5  es6 7 8 9
+.editorconfig 编辑器的格式配置文件
+
+
+都是eslint的配置文件
+.eslintignore eslint的忽略文件，规定了哪些文件不进行语法检查
+.eslintrc.js   eslint的真正配置文件
+.gitignore git忽略文件，规定哪些文件不上传仓库
+.postcssrc.js 插件 postcss 的配置文件
+index.html    项目唯一的一个html文件
+package.json  nodejs的项目配置文件
+README.md 项目的帮助文档  https://www.jianshu.com/p/191d1e21f7ed
+
+css 预处理器
+
+  让我们通过编程的方式来写css
+
+
+hls 视频切片技术
+
+1000MB   mp4
+
+100 个小视频
+10MB
+
+m3u8  是一个txt文本文件  eee.m3u8
+1.ts
+2.ts
+...
+100.ts
+
+
+作业：
+
+
+  页面：
+
+  【李康】1: 新闻页面  图 1 2
+  https://zbhh5.ahtv.cn/newInfo?id=625
+  参数：id 625
+  接口：
+
+  【缪虎】2: 视频页面  图 3 4
+  https://zbhh5.ahtv.cn/dibbling?id=147
+  参数：id 147
+
+  【陆旗】3：帖子页面 图 7
+  https://zbhh5.ahtv.cn/postInfo?id=218
+  参数：id 218
+
+
+  组件：
+
+    【李康】1 评论组件 data数组  v-if data 有数据显示评论列表 没有数据 显示暂无数据   打开app查看全部评论
+
+    【缪虎】2 相关推荐  data数组  theme  1（横向布局） 2（垂直布局）
+
+     【陆旗】3 头部组件  不需要 props
+
+
+
+

历届学生/front-end-team/.history/项目练习/上课项目/在包河vue/笔记_20220417141106.txt

@@ -0,0 +1,81 @@
+webpack  项目的总管家 （项目的打包构建工具）
+
+build : 项目打包上线的时候使用到的一些配置文件
+config：项目配置文件
+node_modules ： 依赖文件
+src：项目真正源代码
+  assets  存放静态资源的，css，图标（较小的）
+  components  存放公共组件的地方
+  config  存放应用配置的地方（接口地址）
+  http  axios请求的封装
+  service 请求中检测
+  utils 公共方法
+  router  vue-router 的配置文件
+  App.vue 网站最外层最顶级的 父组件
+  main.js 是整个项目的入口（启动文件）  做插件的初始化，全局组件，全局混入
+  page  存放路由能访问的页面
+
+static 存放静态（万年不变的，体积较大的资源）资源的，css，js，图片，字体
+.babelrc  是插件 babel 的配置文件
+          babel 帮我们帮高版本的js语法转化为低版本的js   es5  es6 7 8 9
+.editorconfig 编辑器的格式配置文件
+
+
+都是eslint的配置文件
+.eslintignore eslint的忽略文件，规定了哪些文件不进行语法检查
+.eslintrc.js   eslint的真正配置文件
+.gitignore git忽略文件，规定哪些文件不上传仓库
+.postcssrc.js 插件 postcss 的配置文件
+index.html    项目唯一的一个html文件
+package.json  nodejs的项目配置文件
+README.md 项目的帮助文档  https://www.jianshu.com/p/191d1e21f7ed
+
+css 预处理器
+
+  让我们通过编程的方式来写css
+
+
+hls 视频切片技术
+
+1000MB   mp4
+
+100 个小视频
+10MB
+
+m3u8  是一个txt文本文件  eee.m3u8
+1.ts
+2.ts
+...
+100.ts
+
+
+作业：
+
+
+  页面：
+
+  【李康】1: 新闻页面  图 1 2
+  https://zbhh5.ahtv.cn/newInfo?id=625
+  参数：id 625
+  接口：
+
+  【缪虎】2: 视频页面  图 3 4
+  https://zbhh5.ahtv.cn/dibbling?id=147
+  参数：id 147
+
+  【陆旗】3：帖子页面 图 7
+  https://zbhh5.ahtv.cn/postInfo?id=218
+  参数：id 218
+
+
+  组件：
+
+    【李康】1 评论组件 data数组  v-if data 有数据显示评论列表 没有数据 显示暂无数据   打开app查看全部评论
+
+    【缪虎】2 相关推荐  data数组  theme  1（横向布局） 2（垂直布局）
+
+     【陆旗】3 头部组件  不需要 props
+
+
+
+

历届学生/front-end-team/README.md

@@ -0,0 +1,15 @@
+上课的课件 强无敌无群多
+
+
+同事B提交的新功能
+
+同事A的代码
+同事B的代码
+aagkjkj
+kahkf
+dfghjk
+aagkjkj
+zxcvh
+我去打球我的
+sdfgh
+ikwuegk

历届学生/front-end-team/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "front-end-team",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

历届学生/front-end-team/每天课程/2020-04-12/component.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>组件</title>
+</head>
+
+<body>
+    <div class="app">
+        
+        <lb-header text="测试" :list-arr="newsList" @type="getData">
+            <template #text>
+                <span>text</span>
+            </template>
+
+            <template #right>
+                <span>right</span>
+            </template>
+        </lb-header>
+        <div class="content">内容部分</div>
+        <lb-footer></lb-footer>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+
+    // var a = require("./index.js")
+    // 父子关系
+    //  父组件 ——>  子组件 
+    //    基本数据类型 props
+    //    传html   props 插槽
+    //      别名插槽
+    //      作用域插槽
+    //  子组件 ——> 父组件
+    //    $emit
+    // 组件？？？？
+    //   全局组件  
+    Vue.component('lb-header', {
+        // 存放html代码
+        template: `
+          <div class="header">
+            <h2>{{text}}</h2>  
+            <ul>
+              <li v-for="item,index in listArr" @click="liClick(item)">{{item.title}}</li>    
+            </ul>
+            <div class="right">
+              <slot name="right"></slot>
+            </div>
+            <div class="text">
+              <slot name="text"></slot>
+            </div>
+          </div>
+        `,
+        // props: [ 'text' ],
+        props: {
+            text: {
+                default: '默认参数',
+                type: String,
+                required: true
+            },
+            listArr: {
+                default: () => [],
+                type: Array
+            }
+        },
+        data() {
+            return {
+                
+            }
+        },
+        methods: {
+            liClick(item) {
+                this.$emit("type", item)
+            }
+        }
+    });
+
+    //   局部组件
+    var footer = {
+        template: `
+         <div class="footer">底部</div>
+        `,
+        data () {
+            return {}
+        },
+        methods: {
+
+        }
+    }
+
+    var vm = new Vue({
+        el: '.app',
+        data: {
+            test: '你好',
+            title: '首页',
+            newsList: [
+                { id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
+                { id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
+                { id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
+            ]
+        },
+        mounted() {
+            console.log("mounted");
+            console.log(this.test);
+        },
+        methods: {
+            getData(item) {
+                console.log(item);
+            }
+        },
+        components: {
+            'lb-footer': footer
+        }
+    })
+</script>
+</html>

历届学生/front-end-team/每天课程/2020-04-12/demo.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        ul {
+            display: flex;
+        }
+
+        .tabs_title {
+            height: 45px;
+            align-items: center;
+        }
+
+        .tabs_title li {
+            margin: 0 10px;
+        }
+
+        .tabs_content li {
+            display: none;
+        }
+
+        .active_content {
+            display: block !important;
+        }
+
+        .active_title {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="app">
+
+        <ul class="tabs_title">
+            <li :class="index == currentIndex ? 'active_title' : '' "
+                @click="changeActive(index)"
+                v-for="item,index in tabs">
+                {{ item.title }}
+            </li>
+        </ul>
+
+
+        <ul class="tabs_content">
+            <li :class="index == currentIndex ? 'active_content' : '' " 
+            v-for="item,index in tabs">
+              {{ item.content }}
+            </li>
+        </ul>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    new Vue({
+        el: '.app',
+        data: {
+            currentIndex: 0,
+            tabs: [
+                { id: 1, title: '首页', content: '首页 的内容' },
+                { id: 2, title: '社会', content: '社会 的内容' },
+                { id: 3, title: '财经', content: '财经 的内容' },
+                { id: 4, title: '体育', content: '体育 的内容' },
+            ]
+        },
+        methods: {
+            changeActive(index) {
+                console.log(index);
+                this.currentIndex = index
+            }
+        }
+    })
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2020-04-12/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue 基础学习</title>
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class="app" v-cloak>
+        <h1 v-once>{{ test }}</h1>
+        <h2>{{ hello }}</h2>
+        <a :href="baidu">baidu</a>
+        <img :src="img" alt="">
+
+        <ul>
+            <li v-for="item,index in newsList" @click.stop.prevent="demos(index)">
+                {{ item.title }}
+            </li>
+        </ul>
+
+
+        <ul>
+            <li v-for="value,key in list">{{ key }} {{ value }}</li>
+        </ul>
+
+        <div v-html="htmlTest"></div>
+
+        <div v-if="vip == 1">vip1</div>
+        <div v-else-if="vip == 2">vip2</div>
+        <div v-else-if="vip == 3">vip3</div>
+        <div v-else>等级非法</div>
+
+
+        <div v-show="islogin">登录才可以查看</div>
+
+
+        <input type="text" v-model.trim="userName">
+
+        <button @click="login">点我</button>
+
+        <div>{{ jil }}</div>
+
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    // v-bind  将data中的变量绑定到标签的属性上 
+    //  简写 :
+    // v-for 可以遍历数组和对象
+    // v-html 显示 html 到网页上
+    // v-text 显示纯文本
+    // v-if -v-else
+    // v-show 
+    //  v-if 和 v-show 区别
+    //  v-if 多分支的复杂情况进行判断  把不符合条件的html删除
+    //  v-show 只适合简单情况        把不符合条件的html进行 display:none 
+    // v-on:事件类型="事件处理函数"  
+    //  简写：@事件类型="事件处理函数"  @click="test"
+    // v-model 给输入框用的
+    // v-pre 原样输出
+    // computed 计算属性  当参与计算的数值未发生变化，第二次调用不进行计算而是返回上一次的结果
+    //  实现 get（读）  set（写） 监听
+    // methods  存放方法
+    // watch    侦听器（监视器）
+    var vm = new Vue({
+        el: '.app',
+        data: {
+            test: '你好，vue.js',
+            hello: '哈哈哈哈哈哈',
+            baidu: 'https://www.baidu.com/',
+            img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
+            newsList: [
+                { id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
+                { id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
+                { id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
+            ],
+            list: { name: '刘兵', age: 18 },
+            htmlTest: '<h2><span>测试</span></h2>',
+            vip: 1, // 1  2  3
+            islogin: true,
+            userName: '',
+        },
+        methods: {
+            login() {
+                console.log(this.userName);
+            },
+            demos(index) {
+                console.log("demo 方法: ", index);
+            }
+        },
+        computed: {
+            jil() {
+                return 1000 * 100000000
+            }
+        },
+        watch: {
+            test(newvalue,oldvalue) {
+                console.log("oldvalue: ",oldvalue);
+                console.log("newvalue: ",newvalue);
+            }
+        }
+    })
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2020-04-12/login.html

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .router-link-active {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div id="app">
+        <h1>Hello App!</h1>
+        <p>
+            <router-link to="/index">首页</router-link>
+            <router-link to="/car">购物车</router-link>
+            <router-link to="/about">我的</router-link>
+        </p>
+        <router-view></router-view>
+    </div>
+</body>
+<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
+<script>
+    const index = {
+        template: `
+        <ul>
+            <li @click="enterInfo(item.id)"
+              v-for="item,index in newsList">{{ item.title }}</li>
+        </ul>
+        `,
+        data() {
+            return {
+                newsList: [
+                    { id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
+                    { id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
+                    { id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
+                ],
+            }
+        },
+        methods: {
+            enterInfo(id) {
+                this.$router.replace({
+                    name: 'info',
+                    query: {
+                        id: id
+                    }
+                })
+            }
+        }
+    }
+    const info = {
+        template: `<div>info {{ id }}</div>`,
+        data() {
+            return {
+                id: null
+            }
+        },
+        created() {
+            this.id = this.$route.query.id
+        }
+    }
+    const about = { template: '<div>about</div>' }
+    const car = { template: '<div>car</div>' }
+    const login = {
+        template: `<div>
+                <h2>登录</h2>
+                <button @click="Login">点我登录</button>
+            </div>`,
+        methods: {
+            Login() {
+                // 发送接口，后端返回token
+                var token = "sefwefewr345346456457657"
+                localStorage.setItem("token", token);
+                if (this.$route.query.hasOwnProperty("from")) {
+                    this.$router.replace({
+                        path: this.$route.query.from
+                    })
+                } else {
+                    this.$router.replace({
+                        path: "/index"
+                    })
+                }
+            }
+        }
+    }
+
+    const routes = [
+        {
+            path: '/',
+            redirect: "/index",
+            meta: {
+                isLogin: false
+            }
+        },
+        {
+            path: '/index',
+            component: index,
+            meta: {
+                isLogin: false
+            }
+        },
+        {
+            path: '/info',
+            name: 'info',
+            component: info,
+            meta: {
+                isLogin: false
+            }
+        },
+        {
+            path: '/about',
+            component: about,
+            meta: {
+                isLogin: true
+            }
+        },
+        {
+            path: '/car',
+            component: car,
+            meta: {
+                isLogin: true
+            }
+        },
+        {
+            path: '/login',
+            component: login,
+            meta: {
+                isLogin: false
+            },
+            beforeEnter: (to, from, next) => {
+                if (localStorage.getItem("token") == null) {
+                    next()
+                } else {
+                    router.back()
+                    next()
+                }
+            }
+        },
+    ]
+
+    const router = new VueRouter({
+        routes,
+        // linkActiveClass: 'active'
+    })
+
+    router.beforeEach((to, from, next) => {
+        console.log("to: ", to);
+        //    console.log("from: ", from);
+        // 表示需要登录
+        if (to.meta.isLogin) {
+
+            // 检查当前用户是否登录
+            // 已登录，放行
+            // 未登录，去登录
+
+            // 未登录，去登录
+            if (localStorage.getItem("token") == null) {
+                next({
+                    path: '/login',
+                    query: {
+                        from: to.fullPath
+                    }
+                })
+            } else {
+                next()
+            }
+
+            // 不需要登录    
+        } else {
+            next();
+        }
+
+    })
+
+    const app = new Vue({
+        el: '#app',
+        router
+    })
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2020-04-12/mixins.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue 基础学习</title>
+    <style>
+        .fade-enter-active,
+        .fade-leave-active {
+            transition: opacity 2s;
+        }
+
+        .fade-enter,
+        .fade-leave-to
+
+            {
+            opacity: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="app">
+        <h2>{{ test | sl }}</h2>
+
+        <transition name="fade">
+            <div v-if="isShow">true</div>
+        </transition>
+
+
+        <button @click="isShow = !isShow ">点我</button>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+
+
+    var a = {
+        data() {
+            return {
+                page: 1,
+                totalpage: 1
+            }
+        },
+        methods: {
+            more() {
+                console.log("加载更多");
+            }
+        }
+    }
+
+    // 混入
+    //  作用：用一种不会影响this指向的方式去封装代码
+    var vm = new Vue({
+        el: '.app',
+        mixins: [a],
+        data: {
+            test: '自定义指令学习',
+            isShow: true
+        },
+        created() {
+            console.log(this.more());
+        },
+        methods: {
+
+        },
+        computed: {
+
+        },
+        filters: {
+            sl(val) {
+                return val.substring(0, 3) + '..'
+            },
+        },
+        watch: {
+
+        }
+    })
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2020-04-12/router.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .router-link-active {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div id="app">
+        <h1>Hello App!</h1>
+        <p>
+            <router-link to="/index">首页</router-link>
+            <router-link to="/about">我的</router-link>
+        </p>
+        <router-view></router-view>
+    </div>
+</body>
+<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.3/vue.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.4/vue-router.min.js"></script>
+<script>
+    const index = {
+        template: `
+        <ul>
+            <li @click="enterInfo(item.id)"
+              v-for="item,index in newsList">{{ item.title }}</li>
+        </ul>
+        `,
+        data() {
+            return {
+                newsList: [
+                    { id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
+                    { id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
+                    { id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
+                ],
+            }
+        },
+        methods: {
+            enterInfo(id) {
+                this.$router.replace({
+                    name: 'info',
+                    query: {
+                        id: id
+                    }
+                })
+            }
+        }
+    }
+    const info = {
+        template: `<div>info {{ id }}</div>`,
+        data() {
+            return {
+                id: null
+            }
+        },
+        created() {
+            this.id = this.$route.query.id
+        }
+    }
+    const about = { template: '<div>about</div>' }
+
+    const routes = [
+        {
+            path: '/',
+            redirect: "/index"
+        },
+        { path: '/index', component: index },
+        {
+            path: '/info',
+            name: 'info',
+            component: info
+        },
+        { path: '/about', component: about },
+
+    ]
+
+    const router = new VueRouter({
+        routes,
+        // linkActiveClass: 'active'
+    })
+
+    router.beforeEach((to, from, next) => {
+       console.log("to: ", to);
+       console.log("from: ", from);
+    //    next();
+    })
+
+    const app = new Vue({
+        el: '#app',
+        router
+    })
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2020-04-12/smzq.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="app">
+        <h2 ref="test">{{ test }}</h2>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    // 生命周期
+    //   
+    var vm = new Vue({
+        el: '.app',
+        data: {
+            test: '你好'
+        },
+        beforeCreate() {
+            console.log("beforeCreate");
+            console.log(this.test);
+        },
+        // 一般用来发送ajax
+        created() {
+            console.log("created");
+            console.log(this.test);
+            console.log(this.$refs.test);
+        },
+        mounted() {
+            console.log("mounted");
+            console.log(this.test);
+            console.log(this.$refs.test);
+        },
+        beforeUpdate() {
+            console.log("数据被更新了");
+        },
+        methods: {
+
+        }
+    })
+</script>
+</html>

历届学生/front-end-team/每天课程/2020-04-12/swiper.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>组件</title>
+</head>
+
+<body>
+    <div class="app">
+        
+        <v-swiper :list="newsList">
+            <template #html="{ item }">
+                <img :src="item.src">
+            </template>
+        </v-swiper>
+
+
+
+        <v-swiper :list="dd">
+            <template #html="{ item }">
+                <a :href="item.href">{{ item.title }}</a>
+            </template>
+        </v-swiper>
+
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+
+    Vue.component('v-swiper', {
+        // 存放html代码
+        template: `
+          <div class="swiper">
+            <li v-for="item,index in list">
+                <slot name="html" v-bind:item="item"></slot>
+            </li>
+          </div>
+        `,
+        props: {
+            list: {
+                default: () => [],
+                type: Array
+            }
+        },
+        data() {
+            return {
+
+            }
+        }
+    });
+
+    //   局部组件
+    var vm = new Vue({
+        el: '.app',
+        data: {
+            newsList: [
+                { id: 1, title: '新闻1', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
+                { id: 2, title: '新闻2', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
+                { id: 3, title: '新闻3', src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' },
+            ],
+            dd: [
+                { id: 1, title: '新闻1', href: 'https://www.baidu.com' },
+                { id: 2, title: '新闻2', href: 'https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD' },
+                { id: 3, title: '新闻3', href: 'https://www.bilibili.com/' },
+            ]
+        },
+        mounted() {
+        },
+        methods: {
+
+        }
+    })
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2020-04-12/笔记.txt

@@ -0,0 +1,122 @@
+
+原生js （jquery）
+
+dom 操作
+
+
+mvc
+m（model 数据）v（view 视图）c（controller 控制器） 
+
+
+vue.js  react.js  angular.js
+
+去 dom 操作
+
+m（model 数据 ajax数据）v（view 页面） vm（view and model） 
+
+双向绑定  
+
+模块（组件）系统
+
+插槽
+
+
+选看
+  自定义指令
+
+  混入
+
+  过滤器
+  动画
+
+Vue Router 路由
+
+vue官方提供的 路由 管理工具
+
+页面地址
+www.baidu.com /index
+www.baidu.com /about
+
+
+路由模式：
+
+  路径变化的时候，页面不会刷新
+
+  hash
+  www.baidu.com/#/index?id=1
+  www.baidu.com/#/about
+
+  window.location.hash
+
+  onhashchange 监听地址栏的 hash 地址变化，然后拿到新的 hash地址，然后去映射表中找到这个地址对应
+               的页面，然后把页面显示到指定位置
+
+
+  history
+  www.baidu.com/index
+  www.baidu.com/about
+
+    pushState() 和 replaceState()
+
+    补发代码实现的网址
+
+
+   
+有两种页面跳转的方式
+
+  query
+  www.baidu.com/index?id=1&page=1
+    :to="{ name: '/info', query: { id:item.id } }" 
+
+    取参数：this.$route.query.参数字段名
+
+  params
+  www.baidu.com/index/1/2
+
+    :to="{ name: '/info', params: { id:item.id } }" 
+
+    取参数：this.$route.params.参数字段名
+
+    注意： path: '/info/:id/:name',  
+
+
+ $router  vue-router 提供的方法   
+ $route   获取路由信息 
+
+ this.$router.push 跳转后，可以返回之前页面
+
+ xxx.replace  不能返回
+
+
+ 导航守卫
+
+   全局导航守卫
+     beforeEach
+   路由导航守卫
+     beforeEnter
+   页面导航守卫
+    beforeRouteEnter
+    beforeRouteUpdate
+    beforeRouteLeave
+
+
+
+vue.js   
+
+ 2.x
+
+ 3.x
+
+  this 指向
+
+  setup(){
+
+
+  }
+
+
+vue-cli 脚手架  开箱即用
+
+  vue-cli 2.x 
+
+  vue-cli 3.x 以上

历届学生/front-end-team/每天课程/2020-04-12/自定义指令.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue 基础学习</title>
+</head>
+
+<body>
+    <div class="app">
+        <div v-demo="test">你好</div>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    Vue.directive('demo', {
+        bind: function (el, binding, vnode) {
+            document.title = binding.value
+            console.log("el: ",el);
+            console.log("binding: ",binding);
+            console.log("vnode: ",vnode);
+        }
+    })
+
+    var vm = new Vue({
+        el: '.app',
+        data: {
+            test: '自定义指令学习',
+        },
+        methods: {
+
+        },
+        computed: {
+
+        },
+        watch: {
+
+        }
+    })
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-02/div.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <title>div 结构学习</title>
+</head>
+<body>
+    <div class="header">
+        <div class="top">
+            <img src="" alt="">
+            <input type="text">
+        </div>
+        <div class="menu">
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_warp">
+            <div class="menu_lef"></div>
+            <div class="content_list"></div>
+            <div class="menu_right"></div>
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer_top">
+            <ul>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+            </ul>
+            <div class="code">
+                <h2>扫码</h2>
+                <img src="" alt="">
+            </div>
+        </div>
+        <div class="footer_bottom">
+            Copyright © 2013-2022 菜鸟教程  runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
+        </div>
+    </div>
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-03-02/index.html

@@ -0,0 +1,128 @@
+<html>
+
+
+<head>
+    <meta charset="UTF-8" />
+    <title>html学习</title>
+    <meta name="description" content="这是我的第一个html网站">
+</head>
+
+<body>
+    <h1 title="提示文字">1</h1>
+    <h2>1</h2>
+    <h3>1</h3>
+    <h4>1</h4>
+    <h5>1</h5>
+    <h6>1</h6>
+
+
+    <img title="提示文字" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法加载" />
+
+    <input type="text" placeholder="请输入用户名">
+
+    <input type="number" placeholder="请输入手机号">
+
+    <input type="password" placeholder="请输入密码">
+
+    <h2>请选择你的性别：</h2>
+    男 <input type="radio" name="sss">
+    女 <input type="radio" name="sss">
+
+    <h2>请选择你的爱好：</h2>
+    汽车 <input type="checkbox" name="a">
+    编程 <input type="checkbox" name="a">
+    游戏 <input type="checkbox" name="a">
+
+    <h3>出生日期：</h3>
+    <input type="date">
+
+    <input type="file">
+
+    <input type="color">
+
+    <input type="button" value="登 录">
+
+    <input type="submit" value="登 录">
+
+    <button>登 录</button>
+
+
+    <form action="http://127.0.0.1/login.php" method="get">
+        <input type="text" placeholder="用户名" name="name">
+        <input type="password" placeholder="用户密码" name="pwd">
+
+        <input type="button" value="登 录 1">
+
+        <!-- submit 的作用是用来提交表单的 -->
+        <input type="submit" value="登 录 2">
+    </form>
+
+    <select name="" id="">
+        <option value="">-请选择-</option>
+        <option value="">合肥</option>
+        <option value="">南京</option>
+        <option value="">北京</option>
+        <option value="">苏州</option>
+    </select>
+
+    <a href="https://fanyi.baidu.com/#en/zh/padding" target="_blank">呵呵哈哈哈</a>
+
+    <a href="tel:15155145354">拨打客户电话</a>
+
+    <p>&nbsp;查看更多 &lt; </p>
+
+    <p>
+        上课的课件 <strong>强无敌</strong> 无群 <i>多同事B</i> 提交的新功能同事A的代码 强无敌无群 <big>多同事</big> B提交的 <small>新功能</small> 同事A的代码强无敌
+        <del>无群多同</del> 事B提交的新功能同事A的代码强无敌无群多同事B提 <em>交的新</em>
+        功能同事A的代码<br /><br />强无敌无群多同事B提交的新功能同事A的代码强无敌无群多同事B提交的新功能同事A的代码
+    </p>
+
+
+    <!-- 无序列表 重复性的布局结构-->
+    <ul>
+        <li>无序列表 1</li>
+        <li>无序列表 2</li>
+        <li>无序列表 3</li>
+        <li>无序列表 4</li>
+    </ul>
+
+    <!-- 有序列表 -->
+    <ol>
+        <li>有序列表 1</li>
+        <li>有序列表 2</li>
+        <li>有序列表 3</li>
+        <li>有序列表 4</li>
+    </ol>
+
+
+    <div>div 标签？？？  用来组织其他标签的</div>
+
+
+    <table border="1">
+        <tr>
+            <th> 标题</th>
+            <th> 价格</th>
+        </tr>
+
+        <tr>
+            <td>html</td>
+            <td>10元</td>
+        </tr>
+        <tr>
+            <td>css</td>
+            <td>20元</td>
+        </tr>
+        <tr>
+            <td>js</td>
+            <td>100元</td>
+        </tr>
+    </table>
+
+    <video src="https://www.runoob.com/try/demo_source/movie.mp4" loop poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" controls  muted></video>
+
+    <audio src=""></audio>
+
+</body>
+
+
+</html>

历届学生/front-end-team/每天课程/2022-03-02/笔记.txt

@@ -0,0 +1,131 @@
+
+
+
+学的是什么？
+
+
+web 前端开发 
+
+  html  标签 h1
+
+    人体骨骼
+
+    实现网页的排版和布局
+
+  css  层叠样式表
+    
+    化妆品（美化html的）
+
+  javascript (js)  脚本
+
+    人的思想
+
+    网站的功能，网页特效
+
+     
+
+web 后端开发（php，java，python，go，.net(c#), nodejs，ruby）  +  数据库  
+
+前端：
+
+  以前：网站的页面   美工
+        前端工资：3000 -  5000
+
+
+        nodejs  命运的转折点（留坑）
+
+
+
+  现在：大前端的年代（nodejs作为基石）：页面，手机app（android ios），xxx小程序，桌面应用，后端开发
+
+       前端工资： 6000 - 不封顶
+
+       1-3
+
+       3-5
+
+       5-10   
+
+       10-
+
+
+
+
+github   全球最大的代码（同性交友网站）仓库   linus : 他是linux的作者
+
+gitee  码云
+
+git  代码的 版本控制 系统 （命令行的软件）
+
+  gui 图形界面
+
+  shell（命令行）
+
+
+版本控制：
+
+  回滚
+
+
+  分支
+
+     dev 开发
+
+     test  测试
+
+     prod  上线
+
+
+仓库：
+
+   远程仓库 https://gitee.com/bmycode/front-end-team
+
+   本地仓库  
+
+
+git init 初始化一个本地的git仓库
+
+git add 文件名1 文件名2 文件名3 ... 
+    表示选中哪些文件进行上传
+
+    git add -A  全选所有文件都上传
+
+    git commit -m "备注"  设置上传备注
+
+  
+    git pull 拉取代码
+
+    git push 上传代码
+
+
+md：markdown（留坑）
+
+
+标签：
+
+  作用：实现网页上各种功能的 英文单词
+
+
+  <开始 英文字母> 你自己的文字 </结束 英文字母>
+
+  head  头部
+
+  body  主体  放内容
+
+  meta 元数据标签
+
+  form 表单 标签
+
+  <h1> 你好 </h1>
+
+
+
+  标签分类：
+
+    块标签  独占一行的标签，可以被css 设置宽高
+        div h1~h6  ul li  p  
+ 
+    行标签  不独占一行的标签，不可以被css 设置宽高
+
+      input  img  a  span
+      

历届学生/front-end-team/每天课程/2022-03-03/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>hao123</title>
+</head>
+
+<body>
+
+
+    <div class="header">
+        <div class="center">
+            <div class="header_top">
+                <div class="left">
+                    <img src="" alt="">
+                    <div class="dropmenu">
+                        <img src="" alt="">
+                        <span>导航</span>
+                        <img src="" alt="">
+
+                        <ul class="hidden_menu">
+                            <li>
+                                <div class="left_text">休闲娱乐</div>
+                                <ul>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                                <div class="left_text">休闲娱乐</div>
+                                <ul>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                                <div class="left_text">休闲娱乐</div>
+                                <ul>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                    <li>
+                                        <a href=""></a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="right">
+                    <img src="" alt="">
+                    <span>一键登录</span>
+                    <img src="" alt="">
+                    <div class="search">
+                        <input type="text">
+                        <div class="submit">
+                            <img src="" alt="">
+                            <span></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ul class="header_bottom">
+                <li>
+                    <a href="">推荐</a>
+                </li>
+                <li>
+                    <a href="">推荐</a>
+                </li>
+                <li>
+                    <a href="">推荐</a>
+                </li>
+                <li>
+                    <a href="">推荐</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="content">
+        <div class="center"></div>
+    </div>
+    <div class="footer">
+        <div class="center"></div>
+    </div>
+
+</body>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-03/笔记.txt

@@ -0,0 +1,16 @@
+1:  重复性布局用ul（如果只有一个ul，那么外面不需要包div），如果li内部结构有细微差异，没关系，统一用ul
+
+2:  header  content  footer  里面都有center 居中层，你应该在居中层里面分左右，左中右
+
+3： 画结构的用div，具体功能性的用某个标签（例如img，a）
+
+4： div 除了画结构，也可以用来显示文字  <div>登录/注册</div>
+
+
+5: 边距较小的情况下 center 中不需要分左中右
+
+6：如果div内部只有一个标签，那么div省略不写
+
+7: 左右，左中右 这种画分方法，一般用在画结构
+
+8： content 里面 按照功能来划分上下结构

历届学生/front-end-team/每天课程/2022-03-04/box.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box {
+            width: 200px;
+            height: 100%;
+            background: red;
+            /* margin: 10px;  上右下左 */
+            /* margin: 10px 20px;  上下  左右 */
+            /* margin: 10px 20px 30px;  上  左右  下 */
+            /* margin: 10px 20px 30px 40px; */
+            /* margin-left: 30px; */
+            padding: 10px;
+            /* border: 20px solid #000; */
+
+            /* border-left: 5px solid blue ; */
+
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box">
+       你好
+    </div>
+</body>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-04/index.css

@@ -0,0 +1,3 @@
+h1 {
+    color: plum !important;
+}

历届学生/front-end-team/每天课程/2022-03-04/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        h1 {
+            color: blue !important;
+        }
+    </style>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    
+
+    <h1>你好1</h1>
+
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-03-04/select.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>选择器</title>
+    <style>
+        .left span {
+            color: red;
+        }
+
+        .menu li:first-child,
+        .menu li:last-child {
+            color: green;
+        }
+
+        .menu li:nth-child(3n) {
+            color: royalblue;
+        }
+
+        .test>p {
+            color: bisque;
+        }
+        .test h2 p {
+            color: blue;
+        }
+
+        .right:hover {
+            background: red;
+        }
+        
+    </style>
+</head>
+
+<body>
+    <div class="header">
+        <div class="center">
+
+            <div class="left">
+                <img src="" alt="">
+                <span>头部1</span>
+                <span>头部2</span>
+            </div>
+
+            <div class="test">
+                <p>1</p>
+                <h2>
+                    <p>3</p>
+                </h2>
+            </div>
+
+
+            <ul class="menu">
+                <li>标题1</li>
+                <li>标题2</li>
+                <li>标题3</li>
+                <li>标题4</li>
+                <li>标题5</li>
+                <li>标题6</li>
+                <li>标题7</li>
+                <li>标题8</li>
+                <li>标题9</li>
+                <li>标题10</li>
+            </ul>
+
+            <div class="right">登录 | 注册</div>
+        </div>
+    </div>
+</body>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-04/test.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+         p { 
+              color: red;
+        }
+    </style>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-03-04/笔记.txt

@@ -0,0 +1,155 @@
+css 层叠样式表  
+
+
+
+写法：
+
+  1：内部写法  优先级最高
+
+     写在开始标签上
+
+     <p style="color:red;"></p>
+
+    
+
+  2：内链写法
+
+      <heade>
+          ...
+          <style>
+            p { 
+              color: red;
+            }
+          </style>
+      </heade>
+
+  3：外链写法
+
+
+  css结构
+
+  选择器 {
+      css属性名: css属性值;
+      css属性名: css属性值;
+      css属性名: css属性值;
+      css属性名: css属性值;
+  }
+ 11111111111111
+
+  选择器 (暂留坑)
+
+    标签（标签名）选择器
+
+    class 类选择器    .类名称
+
+    * 通配符 选择器  （优先级最低）   用来 清除  标签自带 的样式
+
+    id 选择器    #id名称
+
+    伪类选择器  :xxxxxx
+111111111111111
+
+css 优先级    
+
+   !important 可以让元素的优先级最高
+
+路径：
+
+
+  绝对路径
+     C:\Users\bmy\Desktop\front-end-team\每天课程\index.css
+
+  相对路径
+
+        C:\Users\bmy\Desktop\front-end-team\每天课程\2022-03-04\index.css
+
+        /    根路径  C:\
+
+        ./   当前路径
+
+
+        ../  上一级
+
+
+注意事项：
+
+  1：避免使用公共类名 选中 标签
+
+
+
+
+
+
+
+盒子模型
+
+  外边距  margin
+
+  内边距  padding
+
+  边框 border
+
+  内容  content
+
+  标准盒子模型：
+
+    元素的真实宽度  =  你写的 （宽度+左右padding+左右边框） +  高 （上下内边距+上下边框）
+
+  怪异盒子模型：
+
+    box-sizing: border-box;   
+
+
+
+
+
+
+
+常用css 属性：
+
+  list-style: none;  清除 li 标签的小圆点
+  text-decoration: none;  清除 a 标签的下划线
+
+  display: 
+    inline  行内标签
+    block   块标签
+    inline-block   行内块标签
+    none    隐藏元素
+
+  font-size  字体大小 
+  background  背景色 
+  outline: none; 清除  input  button 外边框
+  border-radius 圆角
+
+  overflow：设置子元素宽高 超过 父元素 宽高后 如何显示
+
+    scroll  超过部分，以滚动的显示展示
+    hidden 
+
+
+居中的一些方式：
+
+  水平居中：
+
+    块标签的居中  margin: 0 auto;
+      必须在子元素上设置宽度
+
+    块标签内部行标签(文字)  text-align: center;
+
+  垂直居中：
+
+    单行文字（行标签 & 文字）在父标签内部垂直居中 line-height: 就是父标签的高度
+
+    两个行内标签进行相互对其的时候使用的： vertical-align: bottom;
+
+
+ 被定位的元素，如何设置垂直水平居中？？？
+
+    元素设置 50% 距离，然后margin 减去自身宽度或者高度的一半
+
+    left: 50%;
+    margin-left: -8px
+
+    calc 数学计算函数，可以进行加减乘除运算
+
+       

历届学生/front-end-team/每天课程/2022-03-08/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>css 浮动</title>
+    <style>
+        * {
+            margin: 0;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            float: left;
+        }
+
+        .box_1 {
+            background: red;
+        }
+
+        .box_2 {
+            background: yellow;
+        }
+
+        .box_3 {
+            width: 300px;
+            height: 300px;
+            background: blue;
+        }
+
+        .father {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="father">
+        <div class="box box_1"></div>
+        <div class="box box_2"></div>
+    </div>
+
+    <div class="box_3"></div>
+
+</body>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-08/overflow.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>overflow</title>
+    <style>
+        * {
+            margin: 0;
+        }
+
+        .box {
+            width: 100px;
+            height: 100px;
+            border: 1px solid #000;
+            overflow-y: scroll;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <p>奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧奥迪车程度后侧</p>
+    </div>
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-03-08/笔记.txt

@@ -0,0 +1,16 @@
+浮动 float ：
+
+  作用 ： 把块元素放一行
+
+
+
+父元素的宽高   被内部子元素 撑开 的  
+
+
+当 子元素设置浮动后，子元素漂浮走了，所以父元素内部其实没有子元素，所以高度为0
+
+  如何解决：
+
+    1：可以给父元素手动设置高度
+
+    2：overflow: hidden;

历届学生/front-end-team/每天课程/2022-03-09/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> css 定位 </title>
+    <style>
+        * {
+            margin: 0;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            float: left;
+        }
+
+        .box_1 {
+            background: red;
+            position: relative;
+            left: 299px;
+            top: 57px;
+            z-index: 4;
+        }
+
+        .box_2 {
+            background: yellow;
+        }
+
+        .box_3 {
+            background: green;
+            position: relative;
+            left: 40px;
+            top: 30px;
+            z-index: 4;
+        }
+
+        .box_3_1 {
+            width: 100px;
+            height: 100px;
+            background: black;
+            position: absolute;
+            left: 10px;
+            top: 10px;
+            z-index: 9999999999;
+        }
+
+        .box_4 {
+            background: blue;
+            position: fixed;
+            right: 0;
+            bottom: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="box box_1"></div>
+    <div class="box box_2"></div>
+    <div class="box box_3">
+        <div class="box_3_1"></div>
+    </div>
+    <div class="box box_4"></div>
+
+</body>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-11/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-03-15/媒体查询.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        @media screen and (min-width: 100px) and (max-width: 800px) {
+            body {
+                background: red;
+            }
+
+            h2 {
+                display: none;
+            }
+        }
+
+        @media screen and (min-width: 800px) {
+            body {
+                background: yellow;
+            }
+        }
+    </style>
+</head>
+<body>
+    
+    <h2>你好我在pc上显示</h2>
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-03-15/弹性盒子.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>弹性盒子</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        ul {
+            display: flex;
+            height: 45px;
+            background: #e0dbdb;
+            align-items: center;
+            justify-content: space-around;
+        }
+
+        ul li {
+        }
+    </style>
+</head>
+
+<body>
+    <ul>
+        <li>首页1</li>
+        <li>首页2</li>
+        <li>首页3</li>
+        <li>首页4</li>
+        <li>首页5</li>
+    </ul>
+</body>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-15/笔记.txt

@@ -0,0 +1,49 @@
+媒体查询（响应式）：
+
+
+  作用：让pc网站兼容手机屏幕
+
+  html4 
+
+
+
+  html5
+
+
+
+
+弹性盒子
+
+display: flex; 开启弹性盒子 (在最近的父标签上)
+
+
+  只要开启：子元素全部放一行
+
+     就算这一行放不下，也放一行
+
+     子元素如果没有设置高度，那么子元素高度自动继承父元素
+
+总共13个css属性
+
+  6个用在父元素上
+
+    align-items  设置垂直方向的对其方式  center
+    justify-content  设置水平方向的对其方式
+    flex-wrap  决定元素是否换行
+         在子元素上设置宽度，人为创造一行放不下的情况
+
+    flex-direction  决定元素的排列方向  column
+        align-items 水平方向
+        justify-content  垂直方向
+
+
+   align-content
+     和   align-items   作用一样，但这个是设置多行的
+
+  6个用在子元素上
+
+    flex-grow  定义元素的放大比例，
+
+    flex-shrink 让元素不缩放
+
+    flex: 就是  flex-grow 简写

历届学生/front-end-team/每天课程/2022-03-16/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        .box_1 {
+            float: left;
+            width: 3.75rem;
+            height: 3.75rem;
+            background: red;
+        }
+
+        .box_2 {
+            float: left;
+            width: 3.75rem;
+            height: 3.75rem;
+            background: black;
+        }
+    </style>
+
+    <script>
+        window.onload = function () {
+            getRem(750, 100)
+        };
+        window.onresize = function () {
+            getRem(750, 100)
+        };
+        function getRem(pwidth, prem) {
+            var html = document.getElementsByTagName("html")[0];
+            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+            html.style.fontSize = oWidth / pwidth * prem + "px";
+        }
+    </script>
+</head>
+
+<body>
+    <div class="box_1"></div>
+    <div class="box_2"></div>
+</body>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-16/笔记.txt

@@ -0,0 +1,12 @@
+rem
+   和 px，%，em，vw vh
+
+
+   一种响应式的尺寸单位，一般用在移动端(H5)开发。
+
+   你写的 1 rem * html上font-size  16px = 实际的px单位
+
+
+   1: 媒体查询
+
+   2: 用js动态计算

历届学生/front-end-team/每天课程/2022-03-21/Function.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Function</title>
+</head>
+<body>
+    
+</body>
+<script>
+
+    // Function 函数 方法  作用：实现代码的封装，降低代码冗余提高复用率
+    // 定义  function 方法名(方法参数1,方法参数2,.....) { // 你的代码 }
+    //     返回结果  返回值  return 
+
+    // 匿名函数
+
+    // function xyf(money, action) {
+    //    console.log("你的室友收到了你给的钱：", money);
+    //    return "衣服洗完了，给你衣服"
+    // }
+
+    // 变量作用域
+    //   局部作用域
+    //   变量提升
+
+    var xyf = function () {
+         b = 2;
+        console.log("1: ",b);
+    }
+
+    xyf();
+
+
+
+    // var a = xyf(10, "我的衣服");
+
+    // console.log(a);
+
+
+</script>
+</html>

历届学生/front-end-team/每天课程/2022-03-21/array.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数组 array </title>
+   
+</head>
+
+<body>
+
+
+</body>
+
+<script>
+    // 数组 Array ：一组数据（什么数据都可以存）的组合
+    //  注意：数组里面的数据是通过下标来存储读取的
+    //        从 0 开始
+    //   定义：
+
+    // var arr = new Array()
+    // arr[0] = "你好"
+    // arr[1] = "你好2"
+    // arr[2] = "你好3"
+
+
+    // var arr = new Array("你好", "你好1", "你好2")
+
+    var arr = ["刘兵", 18, ["骑车", "编程"]]
+
+    // console.log(arr);
+
+
+
+    // 循环语句
+
+    // for (循环开始的变量;循环结束条件;循环的步增变量;) {}
+    // break 终止循环语句
+
+    // for (i = 1; i <= 10; i++) {
+    //     console.log(i);
+    //     if (i == 3) {
+    //         break;
+    //     }
+    // }
+
+//   for (var i = 0; i<arr.length; i++) {
+//       console.log(arr[i]);
+//   }
+
+     // while 循环
+    //  do {
+         
+    //  } while (condition);
+    // 先上车，后补票
+
+    // var i = 0;
+    // while (i<arr.length) {
+    //     console.log(arr[i]);
+    //     i++
+    // }
+
+    // var a = 10
+
+    // do {
+    //     console.log(a);
+    // } while (a <= 9);
+
+    // 模板字符串拼接  `在这里面的都是字符串，如果需要写变量，参考这个${我是变量}` 
+    // ${变量名}
+
+    // 九九乘法表
+    var result = ""
+    for (var i = 1; i <= 9; i++) { // i = 2
+        for (var j = 1; j <= i; j++) { //
+            // result += " "+j + 'x' + i +"="+ j * i  // 1x1=1
+            result += ` ${j}x${i}=${j * i}`
+        }
+
+        result+= "<br/>"
+    }
+
+    document.write(result)
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-21/event.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>事件</title>
+</head>
+
+<body>
+
+    <button class="demo">登 录</button>
+
+</body>
+<script>
+    // 事件：在网页上完成的操作
+    // 构成：
+    //   事件源  事件类型  事件处理函数
+
+    // 写法
+    // dom document
+    // var button = document.querySelector("button");
+
+    // button.onclick = function () {
+    //     alert("点我干什么1？？")
+    // }
+
+
+    // 方法的回调 （重点！！！等会提）
+    // button.addEventListener('click', function (){
+    //     alert("点我干什么2？？")
+    // } )
+
+    // button.addEventListener('click', function (){
+    //     alert("点我干什么3？？")
+    // } )
+
+
+
+    // 同步
+    //  
+    // 异步   数据请求
+    //  setTimeOut 延时    ？ 定时
+    //  如何拿到异步的返回值   回调函数
+    // function a(money, callback) {
+    //     var c = 0;
+    //     setTimeout(function () {
+    //         c = money * 10;
+    //         callback(c)
+    //     }, 3000)
+    //     // return c
+    // }
+
+
+    // a(10, function(hb) {
+    //     console.log(hb);
+    // })
+
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-21/hb.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            height: 100%;
+            position: relative;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        img {
+            position: absolute;
+            width: 80px;
+            /* transition: all 0.2s; */
+        }
+
+        .alert {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: #0000008f;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 8;
+
+        }
+
+        .alert .alert_warp {
+            width: 32%;
+            background: #fff;
+            height: 300px;
+            padding: 15px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .alert_warp .alert_title {
+            display: flex;
+            justify-content: space-between;
+            height: 45px;
+            align-items: center;
+            border-bottom: 1px solid #e6e6e6;
+        }
+
+        .alert_title span {}
+
+        .alert_body {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class="alert hidden">
+        <div class="alert_warp">
+            <div class="alert_title">
+                <span>恭喜中奖</span>
+                <span class="close">x</span>
+            </div>
+            <div class="alert_body">
+                恭喜抽中9折优惠券
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+
+    // 随机生成红包 + 红包移动
+    // 点击开红包，红包点击事件，中奖弹窗，所有红包暂停，关闭弹出的时候红包重新运动
+
+    var clientWidth = $("body").clientWidth,   // 屏幕的宽度
+        clientHeight = $("body").clientHeight,  // 屏幕的高度
+        alert = $("alert"),     // 获取 alert里的hidden
+        text = $(".alert_body"),
+        close = $(".alert_title .close"),   //绑定关闭按钮 
+        chickImg = null,       // 保存你点击的图片的虚拟dom对象
+        body = $("body"),  // 红包放网页上
+        createdId = null;  // 保存创建红包的定时器
+
+    function createdHb() {   //创建红包 
+        var x = parseInt(Math.random() * (clientWidth - 80)) //拿到屏幕X轴  (放里面)
+        var img = document.createElement("img"); //创建img对象
+        img.src = "./hb.png" // img地址
+        img.style = `
+              left: ${x}px;
+              top:-105px;    
+              `  //定位值 负屏幕高度
+               // 红包的点击事件
+        img.onclick = function () {
+            clickImg = img;
+
+            probability()
+             // 显示弹窗
+            alert.classList.remove("hidden")
+            // 停止生成红包
+            clearInterval(createdId)
+             // 停止页面上所有红包
+            allImgAction(2)
+        }
+
+        body.appendChild(img)  //在网页创建红包
+        motion(img) //开始运行
+    }
+
+
+    // motion 运动
+    function motion(el) {
+        el.num = setInterval(function () {  //设置定时器让红包移动
+            var topSet = parseInt(el.style.top) + 1  //一次移动的距离 1px
+            el.style.top = `${topSet}px`
+            if (topSet > clientHeight) {   //top值大于屏幕高度删除红包
+                $("body").removeChild(el)
+                clearInterval(el.num)  //清除定时器
+            }
+        }, 6)
+
+    }
+   //关闭弹窗
+    close.onclick = function () {
+        // 删除你点击的红包
+        $("body").removechild(chickImg)
+        alert.classList.add("hidden")
+        // 让页面上的其他红包重新运动起来
+        allImgAction(1)
+        // 开始重新创建红包
+        aotoCreated()
+    }
+    function probability() {
+        var prob = Math.random();
+        if (prob <= 0.021) {
+            text.innerText = `${prob}恭喜您中了1折优惠券`
+        } else if (0.021 < prob && prob <= 0.8) {
+            text.innerText = `${prob}恭喜您中了7折优惠券`
+        } else if (prob > 0.8) {
+            text.innerText = `${prob}恭喜您中了3折优惠券`
+        }
+    }
+    function allImgAction(type) {
+        var allImg = document.querySelectorAll("img");
+        allImg.forEach(function (v) {
+            type == 1 ? motion(v) : clearInterval(v.num)
+        })
+    }
+
+
+    function autoCreated() {
+        createdId = setInterval(function () {   // setInterval 每隔一段时间执行一次代码
+            createdHb()
+        }, 1000)
+    }
+    autoCreated()
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+</script>
+
+
+
+</html>

历届学生/front-end-team/每天课程/2022-03-21/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>js 基础学习</title>
+</head>
+<body>
+    
+</body>
+<script>
+
+    // console 调试
+    // console.log("大青蛙多无群")
+    // documente dom 文档  dom 树
+    // console.log(document)
+    // console.log(window);
+    // alert("哈哈哈哈")
+
+
+    // js 基础语法
+
+    // 变量
+    //  含义：计算机中用来存储临时可以变得数值
+    //  作用：用来保存数值（类似用户的账户）
+    //  定义：用 var  关键字（js里面内置一些单词，这些单词具有特定的含义）
+    //  格式：var 变量名称  = 变量值 (可以不给变量值，如果不给 那么变量默认就是 undefined)
+    //  注意：先定义后使用
+
+    //  变量名称 的 规范：
+    //    变量名必须的字母，特$）殊符号（_   开头
+    //    变量名区分大小写 
+    //    变量名 不能中文
+    //    变量名 命名 最好采用 驼峰命名法
+
+
+    // 常量
+    //  含义：不能改变的
+    //  定义：用 const  关键字（js里面内置一些单词，这些单词具有特定的含义）
+
+    const drr = "你好"
+    drr = "ddd"
+    console.log(drr);
+
+ 
+    var UserName = "刘兵", 
+    a = "哈哈哈", 
+    test = "sddd";
+
+    var ddd;
+
+    UserName = "张三"
+
+    console.log(ddd);
+
+    console.log(UserName);
+
+</script>
+</html>

历届学生/front-end-team/每天课程/2022-03-21/object.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>object</title>
+</head>
+
+<body>
+
+</body>
+<script>
+    // 对象 object  
+    //  1：存储数据的方式（通过名字来存数据  key（键）-value(值)），
+    //     类似数组（下标来存数据的）
+    //  2：类似后端编程语言中 类 class  的 概念
+    //    类：对现实生活中事物的描述（特征，功能）
+    //      封装  继承  多态 （一车多用）
+    //      构造函数 constructor  当类被初始化的时候，第一个默认运行的方法（代码）   析构函数
+    //       面向对象的编程
+    //       面向过程的编程
+
+    // 以前的js 都是 通过 object 来模拟 class
+    // 但是  js  是不断升级的语言   class
+    class people {
+        name = ""
+        age = ""
+
+        eat() { }
+    }
+
+    class peopleA extends people {
+        constructor() {
+            super()
+            this.name = "张三"
+        }
+    }
+
+    class peopleB extends people {
+        constructor() {
+            super()
+            this.name = "李四"
+        }
+    }
+
+    var a = new peopleA()
+    var b = new peopleB()
+
+
+    console.log(a.name);
+    console.log(b.name);
+
+    // var obj = new Object();
+    // obj.name = "刘兵"
+    // obj.age = 18
+    // console.log(obj);
+
+    // var obj = new Object({ name: '刘兵', age: 18 });
+    // var obj = {
+    //     name: '刘兵',
+    //     age: 18,
+    //     like: [
+    //         '骑车', '编程'
+    //     ]
+    // }
+
+
+    // delete obj.like  // 删除数据
+
+    // obj.test = "测试增加数据"
+
+    // console.log(obj);
+
+
+
+    // for in 循环
+
+    // for (var key in obj) {
+    //     if (key == 'like') {
+    //         for (var i = 0; i<obj[key].length; i++) {
+    //             console.log( obj[key][i] );
+    //         }
+    //     } else {
+    //         console.log(obj[key])
+    //     }
+    // }
+
+    // console.log(obj.name);
+
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-21/type.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数据类型</title>
+</head>
+
+<body>
+
+</body>
+
+<script>
+    // 数据类型
+    // 基本类型：
+    //  字符串（String） 用双引号 ""  和  单引号''  包裹起来的就是字符串
+
+    // 数字(Number)  0-9
+    // 布尔(Boolean)  真(true 1) 或者  假(false 0)  
+    // 对空（Null） 不存在，没有
+    // 未定义（Undefined）  未赋值
+
+    // 现在不说（留坑）
+    // 引用数据类型：对象(Object)、数组(Array)、函数(Function)
+
+    var a = 1, b = "1", c = 3;
+    // 算数运算符  +  -   *  /
+    // +  + 号两边如果都是number 类型，可以直接数学运算
+    //    + 号只要有一个(两个)不是number，那么进行 字符串拼接
+    // console.log(a * b);
+    // ++ 让数值自己+1
+    // -- 让数值自己-1
+    // ++a  先让变量 + 1，然后使用 变量
+    // a++  先用变量，之后变量再+1
+
+    // console.log(  
+    //     ( (a++) + ( ++a - (b --) ) ) + (++b - (a++))
+    // );
+    // console.log(
+    //     (  (--c)+ (++b-c) - (c++)  )  +  ( --a + (b--) + (a++)    )  -  (   a+b+c  )
+    // );
+
+    // 赋值运算符
+    //  += -= *= /=  %=
+    // console.log(a-=c);
+
+    // 比较运算符
+    // = 
+    // == 判断数值是否一样
+    // === （强等于） 判断数值  和  数据类型 是否都一样 
+
+    // 逻辑运算符  
+    // &&  ||   !
+    // && 表达式两边都为true才能返回true
+    // || 表达式两边只要有一个为true，则返回 true
+
+    // console.log(a === b);
+   
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-21/条件语句.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>条件语句</title>
+</head>
+
+<body>
+
+</body>
+
+<script>
+
+    // 控制语句
+    // if 条件语句
+    //  简写：三元运算
+    // var money = 10;
+    // money > 20 ? console.log("吃点好的") : console.log("吃拉面")
+    // if (money > 20) {
+    //     console.log("吃点好的");
+    // } else {
+    //     console.log("吃拉面");
+    // }
+
+
+    // var cj = 56;
+    // if (cj<60) {
+    //     console.log("成绩不及格");
+    // } else if ( cj >= 60 && cj <= 70 ) {
+    //     console.log("一般");
+    // } else if ( cj > 70 && cj <= 80 ) {
+    //     console.log("普通");
+    // } else if ( cj > 80 && cj <= 90 ) {
+    //     console.log("良好");
+    // } else if ( cj > 90 && cj <= 100 ) {
+    //     console.log("优秀");
+    // } else {
+    //     console.log("成绩不合法");
+    // }
+
+
+    // switch
+    // var name = "李低洼瞧得起我四搜索"
+    // switch (name) {
+    //     case "张三":
+    //         console.log("欢迎业主，给你开门");
+    //         break;
+    //     case "李四":
+    //         console.log("不是业主，不给开门");
+    //         break;
+
+    //     default:
+    //         console.log("你是谁？");
+    //         break;
+    // }
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-21/案例.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>案例</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        .box {
+            background: red;
+        }
+    </style>
+</head>
+
+<body>
+    <button>点我</button>
+    <div class="box" style="width: 100px; height: 100px;"></div>
+</body>
+
+<script>
+    var button = $("button"),
+        box = $(".box");
+
+    button.onclick = function () {
+        box.style.width = `${parseInt(box.style.width) + 20}px`
+        box.style.height = `${parseInt(box.style.height) + 20}px`
+        console.dir(box);
+    }
+
+    button.oncontextmenu = function () {
+        box.style.width = `${parseInt(box.style.width) - 20}px`
+        box.style.height = `${parseInt(box.style.height) - 20}px`
+
+        // 阻止 浏览器的默认事件
+        return false;
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }    
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-21/笔记.txt

@@ -0,0 +1,4 @@
+js  :  思想       控制 html  和  css 
+
+
+   

历届学生/front-end-team/每天课程/2022-03-23/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <select name="" id="">
+        <option value="null">-请选择搜索引擎-</option>
+        <option value="https://www.baidu.com/s?wd=">百度</option>
+        <option value="https://www.google.com.hk/search?q=">谷歌</option>
+        <option value="https://www.so.com/s?q=">360搜索</option>
+    </select>
+
+    <input type="text" placeholder="输入关键字">
+    <button>搜索</button>
+</body>
+<script>
+    var button = document.querySelector("button"),
+        searchKeyWord = document.querySelector("input"),
+        select = document.querySelector("select");
+
+    button.onclick = function () {
+        var youSelect = select.selectedOptions[0].value;
+
+        if (youSelect == "null") {
+            alert("请选择搜索引擎")
+        } else {
+            open(`${youSelect}${searchKeyWord.value}`)
+        }
+    }
+</script>
+</html>

历届学生/front-end-team/每天课程/2022-03-23/message.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>留言</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            border: none;
+            outline: none;
+        }
+
+        .main {
+            width: 400px;
+            height: 300px;
+            border: 1px solid #000;
+            position: relative;
+        }
+
+        .main textarea {
+            width: 100%;
+            height: 100%;
+            resize: none;
+        }
+
+        .main .tips {
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+
+        .hui {
+            color: #cfc8c8;
+        }
+
+        .red {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <textarea name="" id=""></textarea>
+        <span class="tips hui">100/100</span>
+    </div>
+</body>
+
+<script>
+    
+    var message = document.querySelector("textarea"),
+        tips = document.querySelector(".main .tips"),
+        total = 100;
+
+    message.oninput = function () {
+        var sy = total - message.value.length;
+        
+        if (sy <= 0) {
+            // 超过限制
+            tips.innerText = "已达限制"
+            // replace 替换，将 hui 替换 成 red
+            tips.classList.replace("hui", "red")
+            message.value = message.value.substring(0, 100)
+        } else {
+            tips.innerText = `100/${sy}`
+            tips.classList.replace("red", "hui")
+        }
+    }
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-23/search.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>搜索建议</title>
+</head>
+
+<body>
+    <input type="text" placeholder="输入关键字">
+    <ul></ul>
+</body>
+
+<script>
+    var result = [];
+
+    var list = [
+        '明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
+        '明天我想学习', '明天我们出去玩'
+    ];
+
+    var mes = document.querySelector("input"),
+        ul = document.querySelector("ul");
+
+    mes.oninput = function () {
+        result = []
+        if (mes.value.length != 0) {
+            for (var i = 0; i < list.length; i++) {
+                if (list[i].includes(mes.value)) {
+                    var spanText = `<span style="color:red">${mes.value}</span>`
+                    var pushText = list[i].replace(mes.value, spanText)
+                    result.push(pushText)
+                }
+            }
+            renderHTML()
+        } else {
+            ul.innerHTML = ""
+        }
+    }
+
+
+    function renderHTML() {
+        var html = ""
+        console.log(result);  // 明天
+        // Array.prototype.forEach = function(callback) {
+        //    for(var i = 0; i < this.length; i++) {
+        //        callback(this[i], i, this)
+        //    }
+        // }
+        result.forEach(function (v, i) {
+            html += `<li>${v}</li>`
+        })
+
+        ul.innerHTML = html
+    }
+
+
+
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-23/富强.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>富强</title>
+    <style>
+        body {
+            height: 100vh;
+            position: relative;
+        }
+
+        span {
+            position: absolute;
+            transition: all 1s;
+            user-select: none;
+        }
+    </style>
+</head>
+
+<body>
+
+</body>
+<script>
+    var index = 0;
+    var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]
+    var body = document.querySelector("body")
+    body.onclick = function (e) {
+        var x = e.x,
+            y = e.y;
+
+        var span = document.createElement("span")
+        span.innerText = text[index]
+
+        span.style = `
+          left: ${x}px;
+          top: ${y}px;
+          color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
+        `
+        body.appendChild(span)
+        motion(span)
+        index++
+        if (index > 11) {
+            index = 0
+        }
+    }
+
+
+    function motion(el) {
+        // 让span 的top 自减 150px，也就是向上运动
+        setTimeout(function() {
+            el.style.top = `${parseInt(el.style.top) - 150}px`
+        }, 100)
+
+        // 运动完成后从body中删除这个span标签
+        setTimeout(function() {
+            body.removeChild(el)
+        }, 1200)
+        
+    }
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-23/过渡.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>过渡</title>
+    <style>
+        .box {
+            width: 100px;
+            height: 100px;
+            background: red;
+            transition: all 0.5s
+        }
+
+        .box:hover {
+            width: 200px;
+            background: blue;
+        }
+    </style>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-03-24/game/video.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>弹幕</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            outline: none;
+            border: none;
+        }
+
+        .mian {
+            width: 800px;
+            height: 400px;
+            background: #000;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .mian span {
+            position: absolute;
+            color: #fff;
+            white-space: nowrap;
+        }
+
+        .mian video {
+            height: 360px;
+        }
+
+        .bulletchat {
+            height: 40px;
+            display: flex;
+            background: #fff;
+            align-items: center;
+        }
+
+        .bulletchat .inputText {
+            flex: 1;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="mian">
+
+        <video src="./video.mp4" controls autoplay muted></video>
+
+        <div class="bulletchat">
+            <input class="inputText" type="text" placeholder="请输入弹幕">
+
+            <input value="#ffffff" type="color" class="color">
+            <div class="all">全屏&nbsp;</div>
+            <div class="half">半屏&nbsp</div>
+            <div class="small">3/1屏&nbsp</div>
+            <button>发送</button>
+        </div>
+    </div>
+
+</body>
+
+<script>
+    // 我做半屏弹幕，你们自己实现 全屏 和 3/1弹幕
+    // 点击按钮获得输入框的文字，用文字生成标签放到网页上，运动起来。
+
+    var send = $(".bulletchat button"),
+        input = $(".bulletchat .inputText"),
+        color = $(".bulletchat .color"),
+        mian = $(".mian"),
+        height = $(".mian video").clientHeight,
+<<<<<<< HEAD
+        offsetTop = null,
+        h=height - 21,
+        width = $(".mian").clientWidth;
+
+
+ 
+    send.onclick = function () {
+        var span = document.createElement("span");
+        offsetTop = Math.random() * h;
+=======
+        h = height - 21,  // 默认全屏
+        width = $(".mian").clientWidth;
+
+        console.log(h);
+
+    send.onclick = function () {
+        var span = document.createElement("span");
+>>>>>>> 1cf4dd3941996ba23835ad4cc9146a85a3ba8f6b
+        span.innerText = input.value;
+        // input.value = ""
+        var offsetTop = Math.random() * h;
+
+        mian.appendChild(span)
+
+        span.style = `
+              top: ${offsetTop}px;
+              right: ${-span.clientWidth}px;
+              color: ${color.value}
+            `
+
+        motion(span)
+    }
+    $(".all").onclick=function(){
+        h=height - 21
+
+    }
+    $(".half").onclick=function(){
+        h=height/2 - 21
+
+<<<<<<< HEAD
+    }
+    $(".small").onclick=function(){
+        h=height/3 - 21
+
+    }
+     
+=======
+    $(".all").onclick = function () {
+        h = height - 21;
+    }
+
+    // 
+    $(".half").onclick = function () {
+        h = height / 2 - 21;
+    }
+
+    $(".small").onclick = function () {
+        h = height / 3 - 21;
+    }
+
+>>>>>>> 1cf4dd3941996ba23835ad4cc9146a85a3ba8f6b
+    function motion(el) {
+        el.intervalId = setInterval(function () {
+            var rightOffset = parseInt(el.style.right) + 1;
+            el.style.right = `${rightOffset}px`
+            if (rightOffset > width) {
+                mian.removeChild(el)
+                clearInterval(el.intervalId)
+            }
+        }, 6)
+    }
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-24/index.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>红包雨</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            height: 100%;
+            position: relative;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        img {
+            position: absolute;
+            width: 80px;
+            /* transition: all 0.2s; */
+        }
+
+        .alert {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: #0000008f;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 8;
+
+        }
+
+        .alert .alert_warp {
+            width: 32%;
+            background: #fff;
+            height: 300px;
+            padding: 15px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .alert_warp .alert_title {
+            display: flex;
+            justify-content: space-between;
+            height: 45px;
+            align-items: center;
+            border-bottom: 1px solid #e6e6e6;
+        }
+
+        .alert_title span {}
+
+        .alert_body {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="alert hidden">
+        <div class="alert_warp">
+            <div class="alert_title">
+                <span>恭喜中奖</span>
+                <span class="close">x</span>
+            </div>
+            <div class="alert_body">
+                恭喜抽中9折优惠券
+            </div>
+        </div>
+    </div>
+
+
+</body>
+
+<script>
+    // 随机生成红包 + 红包移动
+    // 点击开红包，红包点击事件，中奖弹窗，所有红包暂停，关闭弹出的时候红包重新运动
+
+    var clientWidth = $("body").clientWidth,  // 获取屏幕宽度
+        clientHeight = $("body").clientHeight, // 获取屏幕高度
+        alert = $(".alert"),
+        text = $(".alert_body"),
+        close = $(".alert_title .close"),
+        clickImg = null,  // 保存你点击的图片的虚拟dom对象
+        body = $("body"),
+        createdId = null; // 保存创建红包的定时器
+
+    // 创建红包的方法    
+    function createdHb() {
+        var x = parseInt(Math.random() * (clientWidth - 80))
+        var img = document.createElement("img");
+        img.src = "./hb.png"
+        img.style = `
+          left: ${x}px;
+          top: -105px;
+        `
+
+        // 红包的点击事件
+        img.onclick = function () {
+             clickImg = img;
+            
+            probability()
+            // 显示弹窗
+            alert.classList.remove("hidden")
+            // 停止生成红包
+            clearInterval(createdId)
+            // 停止页面上所有红包
+            allImgAction(2)
+        }
+
+        body.appendChild(img)
+        motion(img)
+    }
+
+    function motion(el) {
+        // 设置定时器让红包移动起来
+        el.num = setInterval(function () {
+
+            var topSet = parseInt(el.style.top) + 1
+            el.style.top = `${topSet}px`
+            // 超过屏幕高度删除
+            if (topSet > clientHeight) {
+                $("body").removeChild(el)
+                clearInterval(el.num)
+            }
+        }, 6)
+    }
+
+    // 关闭弹窗
+    close.onclick = function () {
+        // 删除你点击的红包
+        $("body").removeChild(clickImg)
+        alert.classList.add("hidden")
+        // 让页面上的其他红包重新运动起来
+        allImgAction(1)
+        // 开始重新创建红包
+        autoCreated()
+    }
+
+    // 计算概率
+    function probability() {
+        var prob = Math.random();
+        if (prob <= 0.021) {
+            text.innerText = `${prob}恭喜您中了 1 折优惠券`
+        } else if (0.021 < prob && prob <= 0.8) {
+            text.innerText = `${prob}恭喜您中了 7 折优惠券`
+        } else if (prob > 0.8) {
+            text.innerText = `${prob}恭喜您中了 3 折优惠券`
+        }
+    }
+
+    function allImgAction(type) {
+        var allImg = document.querySelectorAll("img");
+        allImg.forEach(function (v) {
+            type == 1 ? motion(v) : clearInterval(v.num)
+        })
+    }
+
+    function autoCreated() {
+        createdId = setInterval(function () {
+            createdHb()
+        },1000)
+    }
+
+    autoCreated()
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-28/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> ajax 网络请求 </title>
+</head>
+
+<body>
+
+    <ul>
+
+    </ul>
+</body> 
+<script>
+    // ajax 是什么东西？
+    //  请求
+    //   请求头 寄件人信息
+    //   请求体  包裹（快递的物品）  数据格式： json 解析 （字符串转化为数组或对象的） （数组和对象的组合）   xml
+    //   响应头  收集人信息
+    //   
+    //    异步的前后端数据交互的一种方式
+    //   单向的通讯技术   前端   ---->   后端
+
+    // 1 拿出电话   创建一个ajax对象
+    var http = new XMLHttpRequest();
+
+    // 2 设置号码  设置ajax请求的后端网址
+    // 请求方式：
+    //   GET  找后端要数据
+    //     http://www.bmy.com/index?page=index&action=video
+
+    //   POST 给后端数据的过程
+    //     请求体里面
+
+    //   更多区别：https://www.cnblogs.com/logsharing/p/8448446.html
+
+
+    //   PUT  给数据 + 更新的操作
+    //   DELETE 给数据 + 删除的操作
+    http.open("GET", "http://127.0.0.1:3000/api/index/threeMeals")
+
+    // 3 拨号  发送ajax请求
+    http.send();
+
+
+    // json
+    http.onreadystatechange = function () {
+        if (http.readyState == 4) {
+            if (http.status == 200) {
+                var data = JSON.parse(http.response)
+                console.log(data);
+                data.result.forEach(function (item, index) {
+                    document.querySelector("ul").innerHTML += `<li>${item.title}</li>`
+                    console.log(item.title);
+                });
+            } else {
+                alert("网络请求错误")
+            }
+        }
+    }
+
+
+
+    // ajax 跨域
+    //  前端的地址： file:///C:/Users/bmy/Desktop/front-end-team/%E6%AF%8F%E5%A4%A9%E8%AF%BE%E7%A8%8B/2022-03-28/index.html
+    //  后端的地址： http://127.0.0.1:3000/api/index/threeMeals
+
+    //   同源策略 （CORS ）
+    //   从三方面进行安全检查：
+    //     协议   http (80)    https (443)
+    //     域名  
+    //     端口
+    //  什么是跨域？
+
+    //  跨域如何解决？有几种方式？
+    //   1：后端设置请求头 Access-Control-Allow-Origin ，告诉浏览器，放行这个前端
+    //   2：jsonp 将ajax请求伪装成 js 文件请求 + callback 回调函数 拿回数据
+    //   3: 服务端代理
+
+    //  A(我的前端)   ---  C（别人的后端）
+    //  A(我的前端)   ---  B (我的后端)
+    //   B -- C
+</script >
+
+</html >

历届学生/front-end-team/每天课程/2022-03-28/kuaishou/ajax.js

@@ -0,0 +1,70 @@
+class ajax {
+    constructor() {  // 类的参数初始化
+        this.baseUrl = "http://127.0.0.1:8090/api";
+        this.xhr = new XMLHttpRequest();
+    }
+
+
+    /**
+     * 
+     * @param {*} params 
+     * {
+     *   url: 'http://127.0.0.1:3000/api/index/threeMeals',
+     *   data: {
+     *     page: 1,
+     *     id: 1
+     *   },
+     *   success: function() {}
+     * }
+     */
+    get(params) {
+        // 判断你传的参数里面是否有 data，没有的话就报错提示你
+        if (params.hasOwnProperty("data")) {
+            var str = ""
+
+            // 将 object 类型的 data 转为为  ?key=value&key=value
+            for (const key in params.data) {
+                str += `&${key}=${params.data[key]}`
+            }
+            str = str.replace("&", "?")
+
+            // 设置请求地址
+            this.xhr.open("GET", `${this.baseUrl}${params.url}${str}`)
+            // 
+            this.xhr.send();
+
+            // 状态监听
+            this.onreadystatechange(params.success)
+
+
+        } else {
+            throw new Error("data参数必传")
+        }
+
+    }
+
+
+
+    onreadystatechange(callback) {
+        // this 指向
+        // 如何解决 this 指向
+        //    提前保存this
+        //    箭头函数  es6  es5
+        //    bind
+
+        // var self = this;
+
+        this.xhr.onreadystatechange = () => {
+
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    callback(JSON.parse(this.xhr.response))
+                } else {
+                    alert("网络请求错误")
+                }
+            }
+        }
+    }
+}
+
+var http = new ajax();

历届学生/front-end-team/每天课程/2022-03-28/kuaishou/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>首页</title>
+    <style>
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        li {
+            width: 220px;
+            margin-right: 10px;
+        }
+
+        li img {
+            width: 100%;
+        }
+
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+        }
+    </style>
+</head>
+
+<body>
+
+    <ul>
+
+    </ul>
+
+    <button>下一页</button>
+
+</body>
+<script src="./ajax.js"></script>
+<script>
+
+    var pcursor = "";
+
+
+    function getIndex() {
+        http.get({
+            url: '/likeList',
+            data: {
+                pcursor: pcursor
+            },
+            success: function (res) {
+
+                pcursor = res.pcursor;
+                renderPage(res.feeds)
+
+            }
+        });
+    }
+
+    function renderPage(feeds) {
+        feeds.forEach(item => {
+            document.querySelector("ul").innerHTML += `
+            <li>
+               <a target="_blank" href="./play.html?principalId=${item.author.id}&photoId=${item.photo.id}">
+                <img src="${item.photo.coverUrl}" alt="">
+                <p>${item.photo.caption}</p>
+               </a>
+            </li>
+            `
+        });
+    }
+
+
+    document.querySelector("button").onclick = () => {
+        getIndex()
+    }
+
+
+
+    getIndex();
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-28/kuaishou/play.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>视频播放页面</title>
+</head>
+
+<body>
+
+    <video src="" controls autoplay muted></video>
+</body>
+<script src="./ajax.js"></script>
+<script>
+
+    var video = document.querySelector("video");
+    function getVideoUrl() {
+        http.get({
+            url: '/play',
+            data: {
+                principalId: GetQueryString("principalId"),
+                photoId:  GetQueryString("photoId")
+            },
+            success: function (res) {
+                video.src = res.playUrl
+                video.poster = res.poster
+            }
+        });
+    }
+
+    getVideoUrl();
+
+    function GetQueryString(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]); return null;
+    }
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-03-28/笔记.txt

@@ -0,0 +1,27 @@
+
+
+
+web 网站
+
+  1：服务端渲染
+
+       前端: 写页面   3000k    20%
+
+       后端：写页面+写功能+数据库+服务器  15000   80%
+
+
+    优点：前后端沟通成本低   
+    缺点：项目迭代成本高
+
+
+  ajax
+
+
+  2：前后端分离
+
+     前端：写页面  写功能   50%     12000
+
+     
+
+     后端：数据库  服务器   50%     14000
+

历届学生/front-end-team/每天课程/2022-04-03/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>js 复习</title>
+</head>
+
+<body>
+
+    <input type="text" placeholder="关键字">
+    <button>搜索</button>
+    <div class="result"></div>
+
+
+</body>
+<script>
+    // 数组&对象  循环  事件&方法（代码封装） ajax请求   dom操作  
+
+    // 
+
+    // 数组 for forEach while map filter
+    var a = [1, 2, 3, 4, 5, 6]
+    console.log(a[0]);
+
+    a.forEach((v) => {
+        console.log(v);
+    })
+
+
+    // for in 对象   key（键 名字） - value（值） 来存值
+    var obj = {
+        name: '刘兵',
+        age: 18
+    }
+
+    for (const key in obj) {
+        console.log(obj[key]);
+    }
+
+
+    // 作业 遍历打印出下面数组中的所有数值
+    // typeof 变量名   作用：求变量类型
+    var test = [1, 2, 3, 4, [5, 6, 7, 8], [9, 10, 11, 12, 13]];
+
+    test.forEach(v => {
+
+        // 如果外层循环遇到了 数字，才打印
+        if (typeof v == "number") {
+            console.log(v);
+
+            // 如果外层循环的时候遇到了 数组，那么就进行二次遍历    
+        } else {
+            v.forEach(j => {
+                console.log(j);
+            });
+        }
+    })
+
+
+    // 使用  querySelector  获取一个按钮并存放到变量button中
+    // 获取多个  querySelectorAll
+    // innerText 插入文字
+    // innerHTML 插入html
+    var button = $("button");
+    var input = $("input");
+    var result = $(".result");
+
+    button.onclick = () => {
+        console.log(input.value)
+        result.innerText = input.value
+    }
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+
+
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-04-03/tab.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>tabs切换</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        ul {
+            display: flex;
+        }
+        .tabs_title {
+            height: 45px;
+            align-items: center;
+        }
+        .tabs_title li {
+            margin: 0 10px;
+        }
+
+        .tabs_content li {
+            display: none;
+        }
+        .active_content {
+            display: block !important;
+        }
+
+        .active_title {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+    
+    <ul class="tabs_title">
+        <li class="active_title">首页</li>
+        <li>社会</li>
+        <li>财经</li>
+        <li>体育</li>
+    </ul>
+
+
+    <ul class="tabs_content">
+        <li class="active_content">首页 的内容</li>
+        <li>社会 的内容</li>
+        <li>财经 的内容</li>
+        <li>体育 的内容</li>
+    </ul>
+
+</body>
+<script>
+    var titleLi = _(".tabs_title li");
+    var contentLi = _(".tabs_content li");
+    console.log(titleLi);
+
+    // 为标题的li标签批量绑定点击事件
+    titleLi.forEach((v,i) => {
+        v.onclick = () => {
+
+            // 当你点击li的时候，先删除所有li标签上的类名
+            titleLi.forEach((j,index) => {
+                j.classList.remove("active_title")
+
+                // 利用 标题遍历时候产生的下标，来关联 内容  数组+下标
+                contentLi[index].classList.remove("active_content")
+            });
+
+            // 然后再为你点击的那个li标签加激活样式的类名
+            v.classList.add("active_title");
+
+            //
+            contentLi[i].classList.add("active_content");
+        }
+    })
+
+
+    // 封装的方法，用来获取所有li标签的数组
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+</html>

历届学生/front-end-team/每天课程/2022-04-03/tabsV2.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>tabs切换</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        ul {
+            display: flex;
+        }
+
+        .tabs_title {
+            height: 45px;
+            align-items: center;
+        }
+
+        .tabs_title li {
+            margin: 0 10px;
+        }
+
+        .tabs_content li {
+            display: none;
+        }
+
+        .active_content {
+            display: block !important;
+        }
+
+        .active_title {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="tabs_title"></ul>
+    <ul class="tabs_content">
+
+    </ul>
+</body>
+<script>
+
+
+    var index = 0;
+    var tabsData = [
+        {
+            id: 1,
+            title: '首页',
+            page: 1,
+            content: [
+                { text: '首页的内容1' },
+                { text: '首页的内容2' },
+                { text: '首页的内容3' },
+            ]
+        },
+        {
+            id: 2,
+            title: '社会',
+            page: 1,
+            content: [
+                { text: '社会的内容1' },
+                { text: '社会的内容2' }
+            ]
+        },
+        {
+            id: 3,
+            title: '财经',
+            page: 1,
+            content: [
+                { text: '财经的内容1' },
+                { text: '财经的内容2' },
+                { text: '财经的内容3' },
+                { text: '财经的内容4' },
+            ]
+        },
+    ];
+
+
+    // 渲染 tabs标题的li标签
+    function renderTitle() {
+        tabsData.forEach((v, i) => {
+            $(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title' : ''}">${v.title}</li>`;
+            $(".tabs_content").innerHTML += `<li class="${i == 0 ? 'active_content' : ''}"></li>`;
+        })
+
+
+        _(".tabs_title li").forEach((v,i) => {
+            v.onclick = () => {
+
+                // 保存你点击的li标签的下标，方便下面 renderContent 使用
+                index = i;
+
+                // 当你点击li的时候，先删除所有li标签上的类名
+                _(".tabs_title li").forEach((j, idx) => {
+                    j.classList.remove("active_title")
+
+                    _(".tabs_content li")[idx].classList.remove("active_content");
+
+                });
+
+
+                // 然后再为你点击的那个li标签加激活样式的类名
+                v.classList.add("active_title");
+                _(".tabs_content li")[i].classList.add("ative_content");
+               
+                renderContent();
+            }
+        })
+    }
+
+
+    // 渲染和标题对应的内容（content）
+    function renderContent() {
+        // 访问到你点击的标题所对应的内容的li
+        _(".tabs_content li")[index].innerHTML = ""
+        tabsData[index].content.forEach(v => {
+            _(".tabs_content li")[index].innerHTML += `<p>${v.text}</p>`
+        })
+    }
+
+
+    renderTitle();
+    renderContent();
+
+
+
+    // 封装的方法，用来获取所有li标签的数组
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+</script>
+
+</html>

历届学生/front-end-team/每天课程/2022-04-07/config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    url: 'www.baidu.com'
+}

历届学生/front-end-team/每天课程/2022-04-07/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+  <h2>你好</h2>
+</body>
+</html>

历届学生/front-end-team/每天课程/2022-04-07/index.js

@@ -0,0 +1,13 @@
+const http = require('http');
+const fs = require('fs');
+
+// request 请求
+// response 响应
+const server = http.createServer((req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    var data = fs.readFileSync("./index.html", { encoding: 'utf-8' })
+    res.end(data);
+});
+
+
+server.listen(80);

历届学生/front-end-team/每天课程/2022-04-07/package-lock.json

@@ -0,0 +1,69 @@
+{
+  "name": "2022-04-07",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "2022-04-07",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@types/node": "^17.0.23",
+        "axios": "^0.26.1"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "17.0.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+    },
+    "node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "@types/node": {
+      "version": "17.0.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+    },
+    "axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
+    }
+  }
+}

历届学生/front-end-team/每天课程/2022-04-07/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "2022-04-07",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@types/node": "^17.0.23",
+    "axios": "^0.26.1"
+  }
+}

历届学生/front-end-team/每天课程/2022-04-07/笔记.txt

@@ -0,0 +1,55 @@
+Node.js
+
+其实js，但是 它是运行在服务器上的js的运行环境，所以nodejs其实也是后端编程语言。
+
+nodejs
+
+c++ +  v8(js运行环境)
+
+deno 
+
+前端
+
+1：html+css
+
+
+2: jquery
+|
+Node.js   分工  前后端分离
+|
+3: vue react an....
+
+啥玩意？
+
+为什么学？
+
+
+nodejs
+
+
+ package.json  
+
+npm init 初始化一个nodejs项目
+      -y
+
+npm run 命令名称（在 package.json  的 scripts 里面定义的）
+
+
+npm 包（依赖）（插件）管理工具
+
+
+npm i 下载项目依赖
+npm install（i） 插件名字  阶段参数
+npm i 插件名字 阶段参数
+阶段：
+    开发阶段  --save-dev  -D
+    正式阶段  --save      -S
+    全局安装 -g
+
+npm uninstall 插件名  卸载删除插件
+
+
+// hosts 文件
+
+www.baidu.com 127.0.0.1
+abc.com   127.0.0.1

历届学生/front-end-team/每天课程/2022-04-26/笔记.txt

@@ -0,0 +1,24 @@
+uniapp  混合开发框架
+
+  
+
+  纯粹 html css js 
+
+
+  原生（使用 android（java）   object-c  Swift）
+   
+  
+  混合
+
+    1：老路子 
+      
+       原生 + webview
+
+
+    2：uniapp  flutter  react_navict  
+
+       
+
+  uniapp
+
+  

历届学生/front-end-team/项目练习/上课项目/admin/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie <= 11

历届学生/front-end-team/项目练习/上课项目/admin/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

历届学生/front-end-team/项目练习/上课项目/admin/README.md

@@ -0,0 +1,19 @@
+# hello-world
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

历届学生/front-end-team/项目练习/上课项目/admin/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

历届学生/front-end-team/项目练习/上课项目/admin/jsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@less/*": [
+        "src/assets/less/*"
+      ],
+      "@page/*": [
+        "src/assets/less/page/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

历届学生/front-end-team/项目练习/上课项目/admin/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "hello-world",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.26.1",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.8",
+    "vant": "^2.12.47",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.5.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "compression-webpack-plugin": "^9.2.0",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "style-resources-loader": "^1.5.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-template-compiler": "^2.6.14"
+  }
+}

历届学生/front-end-team/项目练习/上课项目/admin/public/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+        <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>">
+      <% } %>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
+  </body>
+</html>

历届学生/front-end-team/项目练习/上课项目/admin/src/App.vue

@@ -0,0 +1,10 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="less">
+@import "~@less/config/normalize";
+@import "~@less/mixins/restUI";
+</style>

历届学生/front-end-team/项目练习/上课项目/admin/src/assets/less/_.less

@@ -0,0 +1,2 @@
+@import "./config/color";
+@import "./mixins/mixins";

历届学生/front-end-team/项目练习/上课项目/admin/src/assets/less/config/color.less

@@ -0,0 +1,304 @@
+@red50: #ffebee;
+@red100: #ffcdd2;
+@red200: #ef9a9a;
+@red300: #e57373;
+@red400: #ef5350;
+@red500: #f44336;
+@red600: #e53935;
+@red700: #d32f2f;
+@red800: #c62828;
+@red900: #b71c1c;
+@redA100: #ff8a80;
+@redA200: #ff5252;
+@redA400: #ff1744;
+@redA700: #d50000;
+@red: @red500;
+
+@pink50: #fce4ec;
+@pink100: #f8bbd0;
+@pink200: #f48fb1;
+@pink300: #f06292;
+@pink400: #ec407a;
+@pink500: #e91e63;
+@pink600: #d81b60;
+@pink700: #c2185b;
+@pink800: #ad1457;
+@pink900: #880e4f;
+@pinkA100: #ff80ab;
+@pinkA200: #ff4081;
+@pinkA400: #f50057;
+@pinkA700: #c51162;
+@pink: @pink500;
+
+@purple50: #f3e5f5;
+@purple100: #e1bee7;
+@purple200: #ce93d8;
+@purple300: #ba68c8;
+@purple400: #ab47bc;
+@purple500: #9c27b0;
+@purple600: #8e24aa;
+@purple700: #7b1fa2;
+@purple800: #6a1b9a;
+@purple900: #4a148c;
+@purpleA100: #ea80fc;
+@purpleA200: #e040fb;
+@purpleA400: #d500f9;
+@purpleA700: #aa00ff;
+@purple: @purple500;
+
+@deepPurple50: #ede7f6;
+@deepPurple100: #d1c4e9;
+@deepPurple200: #b39ddb;
+@deepPurple300: #9575cd;
+@deepPurple400: #7e57c2;
+@deepPurple500: #673ab7;
+@deepPurple600: #5e35b1;
+@deepPurple700: #512da8;
+@deepPurple800: #4527a0;
+@deepPurple900: #311b92;
+@deepPurpleA100: #b388ff;
+@deepPurpleA200: #7c4dff;
+@deepPurpleA400: #651fff;
+@deepPurpleA700: #6200ea;
+@deepPurple: @deepPurple500;
+
+@indigo50: #e8eaf6;
+@indigo100: #c5cae9;
+@indigo200: #9fa8da;
+@indigo300: #7986cb;
+@indigo400: #5c6bc0;
+@indigo500: #3f51b5;
+@indigo600: #3949ab;
+@indigo700: #303f9f;
+@indigo800: #283593;
+@indigo900: #1a237e;
+@indigoA100: #8c9eff;
+@indigoA200: #536dfe;
+@indigoA400: #3d5afe;
+@indigoA700: #304ffe;
+@indigo: @indigo500;
+
+@blue50: #e3f2fd;
+@blue100: #bbdefb;
+@blue200: #90caf9;
+@blue300: #64b5f6;
+@blue400: #42a5f5;
+@blue500: #2196f3;
+@blue600: #1e88e5;
+@blue700: #1976d2;
+@blue800: #1565c0;
+@blue900: #0d47a1;
+@blueA100: #82b1ff;
+@blueA200: #448aff;
+@blueA400: #2979ff;
+@blueA700: #2962ff;
+@blue: @blue500;
+
+@lightBlue50: #e1f5fe;
+@lightBlue100: #b3e5fc;
+@lightBlue200: #81d4fa;
+@lightBlue300: #4fc3f7;
+@lightBlue400: #29b6f6;
+@lightBlue500: #03a9f4;
+@lightBlue600: #039be5;
+@lightBlue700: #0288d1;
+@lightBlue800: #0277bd;
+@lightBlue900: #01579b;
+@lightBlueA100: #80d8ff;
+@lightBlueA200: #40c4ff;
+@lightBlueA400: #00b0ff;
+@lightBlueA700: #0091ea;
+@lightBlue: @lightBlue500;
+
+@cyan50: #e0f7fa;
+@cyan100: #b2ebf2;
+@cyan200: #80deea;
+@cyan300: #4dd0e1;
+@cyan400: #26c6da;
+@cyan500: #00bcd4;
+@cyan600: #00acc1;
+@cyan700: #0097a7;
+@cyan800: #00838f;
+@cyan900: #006064;
+@cyanA100: #84ffff;
+@cyanA200: #18ffff;
+@cyanA400: #00e5ff;
+@cyanA700: #00b8d4;
+@cyan: @cyan500;
+
+@teal50: #e0f2f1;
+@teal100: #b2dfdb;
+@teal200: #80cbc4;
+@teal300: #4db6ac;
+@teal400: #26a69a;
+@teal500: #009688;
+@teal600: #00897b;
+@teal700: #00796b;
+@teal800: #00695c;
+@teal900: #004d40;
+@tealA100: #a7ffeb;
+@tealA200: #64ffda;
+@tealA400: #1de9b6;
+@tealA700: #00bfa5;
+@teal: @teal500;
+
+@green50: #e8f5e9;
+@green100: #c8e6c9;
+@green200: #a5d6a7;
+@green300: #81c784;
+@green400: #66bb6a;
+@green500: #4caf50;
+@green600: #43a047;
+@green700: #388e3c;
+@green800: #2e7d32;
+@green900: #1b5e20;
+@greenA100: #b9f6ca;
+@greenA200: #69f0ae;
+@greenA400: #00e676;
+@greenA700: #00c853;
+@green: @green500;
+
+@lightGreen50: #f1f8e9;
+@lightGreen100: #dcedc8;
+@lightGreen200: #c5e1a5;
+@lightGreen300: #aed581;
+@lightGreen400: #9ccc65;
+@lightGreen500: #8bc34a;
+@lightGreen600: #7cb342;
+@lightGreen700: #689f38;
+@lightGreen800: #558b2f;
+@lightGreen900: #33691e;
+@lightGreenA100: #ccff90;
+@lightGreenA200: #b2ff59;
+@lightGreenA400: #76ff03;
+@lightGreenA700: #64dd17;
+@lightGreen: @lightGreen500;
+
+@lime50: #f9fbe7;
+@lime100: #f0f4c3;
+@lime200: #e6ee9c;
+@lime300: #dce775;
+@lime400: #d4e157;
+@lime500: #cddc39;
+@lime600: #c0ca33;
+@lime700: #afb42b;
+@lime800: #9e9d24;
+@lime900: #827717;
+@limeA100: #f4ff81;
+@limeA200: #eeff41;
+@limeA400: #c6ff00;
+@limeA700: #aeea00;
+@lime: @lime500;
+
+@yellow50: #fffde7;
+@yellow100: #fff9c4;
+@yellow200: #fff59d;
+@yellow300: #fff176;
+@yellow400: #ffee58;
+@yellow500: #ffeb3b;
+@yellow600: #fdd835;
+@yellow700: #fbc02d;
+@yellow800: #f9a825;
+@yellow900: #f57f17;
+@yellowA100: #ffff8d;
+@yellowA200: #ffff00;
+@yellowA400: #ffea00;
+@yellowA700: #ffd600;
+@yellow: @yellow500;
+
+@amber50: #fff8e1;
+@amber100: #ffecb3;
+@amber200: #ffe082;
+@amber300: #ffd54f;
+@amber400: #ffca28;
+@amber500: #ffc107;
+@amber600: #ffb300;
+@amber700: #ffa000;
+@amber800: #ff8f00;
+@amber900: #ff6f00;
+@amberA100: #ffe57f;
+@amberA200: #ffd740;
+@amberA400: #ffc400;
+@amberA700: #ffab00;
+@amber: @amber500;
+
+@orange50: #fff3e0;
+@orange100: #ffe0b2;
+@orange200: #ffcc80;
+@orange300: #ffb74d;
+@orange400: #ffa726;
+@orange500: #ff9800;
+@orange600: #fb8c00;
+@orange700: #f57c00;
+@orange800: #ef6c00;
+@orange900: #e65100;
+@orangeA100: #ffd180;
+@orangeA200: #ffab40;
+@orangeA400: #ff9100;
+@orangeA700: #ff6d00;
+@orange: @orange500;
+
+@deepOrange50: #fbe9e7;
+@deepOrange100: #ffccbc;
+@deepOrange200: #ffab91;
+@deepOrange300: #ff8a65;
+@deepOrange400: #ff7043;
+@deepOrange500: #ff5722;
+@deepOrange600: #f4511e;
+@deepOrange700: #e64a19;
+@deepOrange800: #d84315;
+@deepOrange900: #bf360c;
+@deepOrangeA100: #ff9e80;
+@deepOrangeA200: #ff6e40;
+@deepOrangeA400: #ff3d00;
+@deepOrangeA700: #dd2c00;
+@deepOrange: @deepOrange500;
+
+@brown50: #efebe9;
+@brown100: #d7ccc8;
+@brown200: #bcaaa4;
+@brown300: #a1887f;
+@brown400: #8d6e63;
+@brown500: #795548;
+@brown600: #6d4c41;
+@brown700: #5d4037;
+@brown800: #4e342e;
+@brown900: #3e2723;
+@brown: @brown500;
+
+@blueGrey50: #eceff1;
+@blueGrey100: #cfd8dc;
+@blueGrey200: #b0bec5;
+@blueGrey300: #90a4ae;
+@blueGrey400: #78909c;
+@blueGrey500: #607d8b;
+@blueGrey600: #546e7a;
+@blueGrey700: #455a64;
+@blueGrey800: #37474f;
+@blueGrey900: #263238;
+@blueGrey: @blueGrey500;
+
+@grey50: #fafafa;
+@grey100: #f5f5f5;
+@grey200: #eeeeee;
+@grey300: #e0e0e0;
+@grey400: #bdbdbd;
+@grey500: #9e9e9e;
+@grey600: #757575;
+@grey700: #616161;
+@grey800: #424242;
+@grey900: #212121;
+@grey: @grey500;
+
+@black: #000000;
+@white: #ffffff;
+
+@transparent: rgba(0, 0, 0, 0);
+@fullBlack: rgba(0, 0, 0, 1);
+@darkBlack: rgba(0, 0, 0, 0.87);
+@lightBlack: rgba(0, 0, 0, 0.54);
+@minBlack: rgba(0, 0, 0, 0.26);
+@faintBlack: rgba(0, 0, 0, 0.12);
+@fullWhite: rgba(255, 255, 255, 1);
+@darkWhite: rgba(255, 255, 255, 0.87);
+@lightWhite: rgba(255, 255, 255, 0.54);

历届学生/front-end-team/项目练习/上课项目/admin/src/assets/less/config/normalize.less

@@ -0,0 +1,424 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body,ul,li,p,h1,h2,h3,h4,h5,h6 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+  text-decoration: none;
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 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 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 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 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+  outline: none;
+  border: none;
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 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 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+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 and cancel buttons in Chrome and Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 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 */
+}