theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

练习

Browse Source
This commit is contained in:
asd 2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
csspress/4.flex.pdf Normal file
View File

Binary file not shown.

9
csspress/Untitled.md
View File

@ -1,9 +0,0 @@
通过蓝湖这样的工具 根据主流分辨率来更改设计图的缩放比例
![image-20210111160939515](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210111160939515.png)
![image-20210111161518157](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210111161518157.png)
![image-20210111161815157](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210111161815157.png)

6
csspress/float.md
View File

@ -19,7 +19,11 @@
1. 浮动的包裹性 1. 浮动的包裹性
抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。 抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果 display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果 也是每个都要加的属性
注：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
但是 float和display:inline-block 无法完全等同 但是 float和display:inline-block 无法完全等同

BIN
csspress/float.pdf Normal file
View File

Binary file not shown.

BIN
csspress/pdfs/1.css基础.pdf Normal file
View File

Binary file not shown.

BIN
csspress/pdfs/2.盒模型.pdf Normal file
View File

Binary file not shown.

BIN
csspress/pdfs/3.定位.pdf Normal file
View File

Binary file not shown.

93
demos/html/html常用标签.md Normal file
View File

@ -0,0 +1,93 @@
# HTML常用标签
## 文字相关
* HTML标题
* h1~h6
* ``` <h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
* <h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
从h1到h6 字逐渐变小
* HTML段落
* p(块级元素)
* 实例：
```
<p>不是一个人的王者，而是五个人的荣耀</p>
```
<p>不是一个人的王者，而是五个人的荣耀</p>
```
<p>人生若只如初见，何事秋风悲画扇</p>
<p>等闲变却故人心，却道故人心易变</p>
```
<p>人生若只如初见，何事秋风悲画扇</p>
<p>等闲变却故人心，却道故人心易变</p>
p+h1
```
<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>
<h3>却说张飞</h3>
<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>
```
<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>
<h3>却说张飞</h3>
<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>
* span(内联元素)
* ```
<p>不是一个人的王者，而是五个人的荣耀</p>
```
<p>不是一个人的王者，而是五个人的荣耀</p>
*
```
<p>
<span>人生若只如初见，</span>
<span>何事秋风悲画扇</span>
</p>
<p>
<span>等闲变却故人心，</span>
<span>却道故人心易变</span>
</p>
```
<p>人生若只如初见，何事秋风悲画扇</p>
<p>等闲变却故人心，却道故人心易变</p>
*
* HTML 链接

BIN
html/html简介.pdf Normal file
View File

Binary file not shown.

BIN
html/表单.pdf Normal file
View File

Binary file not shown.

BIN
html/表格.pdf Normal file
View File

Binary file not shown.

8
htmlpress/1.html基础.md
View File

@ -253,16 +253,16 @@ html 元素和标签的区别：
3. 新建一个html文件，页面上展示hello world 3. 新建一个html文件，页面上展示hello world
world加粗 world加粗
完成内网通发截图 完成微信发截图
4. 新建一个html文件，页面上展示一篇文章的题目，作者，发布日期，正文内容，阅读量，点赞量，评论量 4. 新建一个html文件，页面上展示一篇文章的题目，作者，发布日期，正文内容，阅读量，点赞量，评论量
其中，标题单独一行，下面放作者，发布日期，下面放正文内容，最下面放阅读量，点赞量，评论量 其中，标题单独一行，下面放作者，发布日期，下面放正文内容，最下面放阅读量，点赞量，评论量
完成内网通发截图 完成内网通发截图
5. 在任务4的基础上 在正文之前插入一个图片作为文章封面 5. 在任务4的基础上 在正文之前插入一个图片作为文章封面
完成内网通发截图 完成微信发截图
6. 在任务5的基础上，从最上面添加一个输入框和搜索按钮，点击搜索，将输入框中输入的值带入www.baidu.com的地址栏中 6. 在任务5的基础上，从最上面添加一个输入框和搜索按钮，点击搜索，将输入框中输入的值带入www.baidu.com的地址栏中
完成内网通发截图 完成微信发截图
7. 用自己的方式调整任务4的html页面的样式 7. 用自己的方式调整任务4的html页面的样式
完成内网通发截图 完成微信发截图

24
htmlpress/html标签详解.md
View File

@ -72,7 +72,7 @@
## 列表 list ## 列表 list
### 无序列表 ul-li ### 无序列表 ul-li
<ul> <ul style="list-style:none">
<li>香菱</li> <li>香菱</li>
<li>皇女</li> <li>皇女</li>
<li>旅行者</li> <li>旅行者</li>
@ -80,7 +80,7 @@
</ul> </ul>
``` ```
<ul> <ul style="list-style:none>
<li>香菱</li> <li>香菱</li>
<li>皇女</li> <li>皇女</li>
<li>旅行者</li> <li>旅行者</li>
@ -88,6 +88,26 @@
</ul> </ul>
``` ```
<ol style="list-style:none">
<li>锅巴</li>
<li>奥兹</li>
<li>丘丘人</li>
<li>应急食品</li>
</ol>
```
<ol style="list-style:none">
<li>锅巴</li>
<li>奥兹</li>
<li>丘丘人</li>
<li>应急食品</li>
</ol>
```
> 这里的ul和ol 都会在列表前面自带一个符号或者数字 为了去掉这个数字或者改变无序列表前面的符号 请不要在html 的ul标签中使用type属性改变符号，推荐使用css属性 list-style属性来改变 前面的标志或数字
阅读上面的文档，完成以下练习 阅读上面的文档，完成以下练习
1. 新建一个html页面， 1. 新建一个html页面，

39
teaching/jwl/课件/es6/awaitasync.html Normal file
View File

@ -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>Document</title>
<script>
const fs = require('fs');
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
};
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
var gen1=async function(){
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
}
</script>
</head>
<body>
</body>
</html>

113
teaching/jwl/课件/es6/fuxi.html Normal file
View File

@ -0,0 +1,113 @@
<!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>
<script>
// es6
// let const
// 解构赋值
// async await
// class
// model 模块化
// promise
// set map weakset weakmap
// for foreach for in while for of
// const set=new Set([1,2,3,3,3])
// for(let i in set){
// console.log(i,set[i])
// }
</script>
<script>
const set=new Set([1,2,3,3,3])
// console.log(set[2])
for(let i of set){
console.log(i,set[i])
console.log(set)
}
function zhanshi(){
console.log(set,"lllk")
const price=0
}
zhanshi()
// console.log(price)
// 解构赋值
// 对象 解构赋值 原则上来说 我们需要让属性名等于变量名
// 特殊情况 如果说 属性名不等于属性值得话
let {foo, baz}={foo:"aaa",bar:"bbb",baz:"ccc"}
// foo aaaa
// baz ccc
// let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(foo, baz)
var promise=new Promise(function(resolve,reject){
console.log(1111)
resolve()
})
promise.then(()=>{
console.log("success")
})
console.log(2222)
console.log(1222223)
setTimeout(function(){
console.log("延迟后")
},1000)
// pro1.then(()=>{
// pro2.then(()=>{
// pro3.thne(()=>{
// // .......
// })
// })
// })
// 用同步的样子去写异步的函数 -----async 函数（异步操作的一个方式）
// function getlist(){
// http.get("/userlist").then((res)=>{
// console.log(res)
// })
// }
// async function getlist(){
// let res=await http.get("/userlist")
// console.log(res)
// }
// class
class Creator{
constructor(name){
this.name=name,
this.age=1
}
say(){
console.log(123)
}
}
// extends
class Creator2 extends Creator{
}
var obj=new Creator("A")
var obj1=new Creator("B")
console.log(obj)
console.log(obj1)
var xiaoming=new Creator2("小明")
console.log(xiaoming)
</script>
</head>
<body>
</body>
</html>

86
teaching/jwl/课件/es6/promise.html Normal file
View File

@ -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>Document</title>
<script>
console.log("创建proimise之前")
var promiseobj=new Promise((resolve,reject)=>{
console.log("创建promise")
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
cosnole.log("mysuccess")
resolve(this.response);
} else {
console.log("myerror")
reject(new Error(this.statusText));
}
})
promiseobj.then(()=>{
console.log("success")
})
console.log("promise成功之后")
// readyState
// 用promise封装ajax
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
console.log(this.readyState)
console.log(this.status)
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
// readystate 的五种状态
// 0 － （未初始化）还没有调用send()方法
// 1 － （载入）已调用send()方法，正在发送请求
// 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
// 3 － （交互）正在解析响应内容
// 4 － （完成）响应内容解析完成，可以在客户端调用了
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
async function login(){
http("./login.php").then((res)=>{
console.log(res)
})
var res=http("./login.php")
}
</script>
</head>
<body>
</body>
</html>

23
teaching/jwl/课件/vue/ceshi/.gitignore vendored Normal file
View File

@ -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?

24
teaching/jwl/课件/vue/ceshi/README.md Normal file
View File

@ -0,0 +1,24 @@
# ceshi
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
teaching/jwl/课件/vue/ceshi/babel.config.js Normal file
View File

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

42
teaching/jwl/课件/vue/ceshi/package.json Normal file
View File

@ -0,0 +1,42 @@
{
"name": "ceshi",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
teaching/jwl/课件/vue/ceshi/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
teaching/jwl/课件/vue/ceshi/public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!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>
</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 -->
</body>
</html>

45
teaching/jwl/课件/vue/ceshi/src/App.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div id="app">
<div>{{str}}</div>
<div v-html="str"></div>
name<input type="text" v-model="name">{{name}}
<div v-if="age>=18">欢迎光临</div>
<!-- <div v-else-if="sss"></div> -->
<div v-else>禁止进入</div>
<div v-for="(i,j) in arr" :key="j">
{{i}}{{j}}
</div>
</div>
</template>
<script>
// v-on(@)绑定是事件 v-bind(:) 绑定属性
// v-html 解析html v-if v-else v-else-if 条件
// 循环语句 v-for
// npm 命令 npm run serve
export default {
name: 'App',
data(){
return{
str:"<p>罗小黑</p>",
name:"",
age:16,
arr:[1,2,3]
}
},
methods:{
}
}
</script>
<style>
.text{
color:red
}
.text1{
color:blue;
}
</style>

BIN
teaching/jwl/课件/vue/ceshi/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

58
teaching/jwl/课件/vue/ceshi/src/components/HelloWorld.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

8
teaching/jwl/课件/vue/ceshi/src/main.js Normal file
View File

@ -0,0 +1,8 @@
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')

8514
teaching/jwl/课件/vue/ceshi/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

28
teaching/jwl/课件/vue/note.md Normal file
View File

@ -0,0 +1,28 @@
# vue
## vue cli 常用命令
* vue create 创建项目
* vue --version 查看版本（版本在3以上）
* cd + 项目文件夹的名字 进入项目文件夹目录
* npm run serve
yarn serve
运行
## 目录结构
node_modules 安装的第三方的库会在这里面
public 忽略掉
.gitignore git 上传的时候用来规定忽略文件的
package.json 记录项目中用的依赖 名字+版本
src 项目主体
assets 静态文件（默认）
static 静态文件（常用）
components 存放组件
pages 存放页面
app.vue 入口文件
## 基本结构
template html
script js
style css

83
teaching/lhj/kejian/biaodan.html Normal file
View File

@ -0,0 +1,83 @@
<!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>
.btn{
width:70px;
height: 30px;
background: pink;
color:white;
text-align: center;
line-height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<!--
输入框
密码框
单选框
复选框
下拉框
文本框
按钮
-->
<form action="">
<div>
帐号 <input type="text" id="account"/>
</div>
<div>
密码 <input type="password" id="pwd">
</div>
<div>
性别 <input type="radio" name="sex" id="boy" value="nan"> <label for="boy">男</label>
<input type="radio" name="sex" id="girl" value="nv" checked="checked"><label for="girl">女</label>
</div>
<div>
爱好 <input type="checkbox" /> 读书
<input type="checkbox" /> timi
<input type="checkbox"> 追星
<input type="checkbox"> 听音乐
</div>
<div>
地址 <select name="" id="addr">
<option value="taohuayuan">桃花源</option>
<option value="tianya">天涯海角</option>
<option value="mxb">魔仙堡</option>
<option value="xizang">西藏</option>
<option value="budalagong">布达拉宫</option>
</select>
</div>
备注：<textarea name="" id="beizhu" cols="30" rows="10" ></textarea>
<div class="btn" onclick="save()">提交</div>
</form>
<noscript>
您的浏览器不支持js语法
</noscript>
<script>
function save(){
var account= document.getElementById("account").value
var pwd= document.getElementById("pwd").value
var beizhu=document.getElementById("beizhu").value
var addr=document.getElementById("addr").value
var sex=document.getElementsByName("sex")
var xingbie
console.log(account,pwd,beizhu)
console.log(sex[1].checked)
if(sex[0].checked){
xingbie="nan"
}else{
xingbie="nv"
}
console.log(xingbie)
}
</script>
</body>
</html>

91
teaching/lhj/kejian/float.html Normal file
View File

@ -0,0 +1,91 @@
<!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;
}
.pic{
width:200px;
height: 200px;
background: red;
/* display: inline-block; */
float: left;
}
.box{
width: 600px;
overflow:auto;
/* display: inline-block; */
}
.pic2{
width:200px;
height: 200px;
background: blue;
/* display: inline-block; */
float: left;
}
.pic3{
width: 200px;
height: 200px;
background: green;
}
.topDiv {
width: 500px;
padding: 4px;
border: 2px solid black;
overflow: auto;
}
.floatDiv {
width: 100px;
height: 100px;
border: 2px dotted red;
color: red;
margin: 4px;
float: left;
}
.bottomDiv {
width: 500px;
height: 100px;
margin: 5px 0;
border: 2px dotted black;
}
.textDiv {
color: blue;
border: 2px solid blue;
}
.boxes{
/* overflow: auto; */
}
</style>
</head>
<body>
<div class="box">
<div class="pic"></div>
<div class="pic2"></div>
<!-- <div>抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果</div> -->
<!-- <div style="clear:both ;"></div> -->
<div class="pic3">
</div>
<div class="topDiv">
<div class="floatDiv">float left</div>
<div class="textDiv">...</div>
<div class="pic2"></div>
</div>
<div class="bottomDiv">...</div>
</div>
</body>
</html>

103
teaching/lhj/kejian/grid.html Normal file
View File

@ -0,0 +1,103 @@
<!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{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-row-gap:10px;/*(行间距)*/
grid-column-gap: 10px;/* 列间距*/
}
.item{
border: 1px solid black;
}
.box1{
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px)
}
.box2{
display: grid;
width: 800px;
grid-template-columns: repeat(auto-fill,100px);
grid-template-rows: repeat(3,100px)
}
.box3{
display: grid;
width: 800px;
grid-template-columns: 1fr 2fr;
}
</Style>
</head>
<body>
<p>demp1 grid布局基本用法：</p>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
<p>demp2 使用repeat重写</p>
<div class="box1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
<p>demp3 auto-fill</p>
<div class="box2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
<p>demp4 fr</p>
<div class="box3">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
</body>
</html>

72
teaching/lhj/kejian/grid布局.md Normal file
View File

@ -0,0 +1,72 @@
# grid
1. grid 概念
grid --网格布局 是css最强大的布局方案
将网页划分成一个个网格 ，可以通过组合不同的网格 从而实现各种各样的布局
2.应用
2-1 用前须知
四个概念：
* 容器和项目
我们把采取网格布局的整个区域称为容器 容器中采用网格定位的子元素 称为项目
* 行和列
容器内水平方向叫行（row） 垂直区域叫列（column）
* 单元格
行和列的交叉区域 称为“单元格”
* 网格线
划分网格的线
2-2 使用中
常用属性：
* display:grid（块级元素） 内联元素需要定义为display:inline-grid 定义任意元素为grid布局
* grid-template-columns: 定义每一列的宽度 一共多少列 这个属性就有多少个值
* grid-template-rows: 定义每一行的高度 一共有多少行 这个属性就有多少个值
|| 注 使用须知 设为网格布局以后，容器内子元素的float display:inline-block display:table-ceil verticle-align column-* 都会失效
grid-template-column 和 grid-template-rows的值可以使用绝对单位（px）也可以使用百分比
有时候 当列数很多 每列宽度都一样时 就需要写很多重复的值 非常麻烦 这时候可以用repeat()函数
repeat()接受两个参数 第一个是重复的次数 第二个是所要重复的值
对比demos
使用repeat之前：
```
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
```
使用repeat()之后
```
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
```
拓展延伸
* auto-fill关键字： 在单元格大小固定但是容器大小不固定的时候 如果希望容器的每一行（或每一列） 尽可能多的容纳单元格，可以使用auto-fill 用来表示自动填充(效果为 超出容器宽度的时候 项目换行排列)
* fr单位
为了表示比较关系 网格布局提供了新的计量单位 fr(关键字) 如果两列的宽度分别为1fr 和 2fr 就表示后者是前者的两倍
* grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
* grid-row 属性是一种 grid-row-start (en-US) 和 grid-row-end (en-US) 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。
如果指定了两个 <grid-line> 值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。
auto 指对网格布局不做干涉 自动布置 span 或者默认span的值为1
span 为网格单元定义一个跨度，定义项目跨多少个网格 1span 等于grid-auto-rows: 20px;属性定义的值

1
teaching/lhj/kejian/js/jichu.js Normal file
View File

@ -0,0 +1 @@
alert("hello")

44
teaching/lhj/kejian/js/js基础.html Normal file
View File

@ -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>Document</title>
<!-- <script src="./jichu.js"></script> -->
<script>
// alert("hello world")
// js 引入方式：
// 1. 内部引入 在html文件里面写script标签 在标签内写 js的代码
// 2.外部引入 `<script type="text/javascript" src=""></s\cript>
// 3.从html中执行js代码
var name=123
// console.log(name)
document.write(name)
// 变量命名规则 不能数字开头 变量名包含 字母 数字 下划线 $ , 不能用关键字和保留字
// 数据类型：
// 简单 undefined null number boolean string
// 复杂数据类型 object =>array(数组)
// =》 function(函数)
// 检测数据类型
// typeof
// instanceof
// Object.prototype.toString.call()
console.log(typeof true) //Boolean
console.log(typeof undefined) //undefined
console.log(typeof "true") // String
console.log(typeof 3.14)// Number
console.log(typeof (2+"2"),999)// String(1) Number(2)
console.log(typeof {})// Object
console.log(Object.prototype.toString.call([]))// [object Array]
console.log(typeof function(){},function(){} instanceof Object) // null ,false object,不定
</script>
</head>
<body>
<button onclick="alert('hello')">sub</button>
</body>
</html>

10
teaching/lhj/kejian/js/note/js基础.md Normal file
View File

@ -0,0 +1,10 @@
# js 基础
1. html (结构) css（样式） js（交互）
2. js 的组成:
1. ECMAScript(核心 js语言的基础)
1. 包括 语法 类型 语句 关键字 保留字 操作符（运算符） 对象
2. DOM (文档对象模型 DOM 描
绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。)
3. BOM (浏览器对象模型 提供一些对象来访问浏览器)

111
teaching/lhj/kejian/media.html Normal file
View File

@ -0,0 +1,111 @@
<!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>
<script>
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
/*
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
1rem=100px
*/
</script>
<!-- <style>
*{
margin:0;
padding:0;
}
.box{
width: 200px;
height: 200px;
background: blue;
}
@media (max-width:1000px){
body{
background: red;
}
.box{
background: white;
}
}
@media (max-width:900px){
body{
background: blue;
}
.box{
background: gold;
}
}
</style> -->
<style>
*{
margin:0;
padding:0;
}
.shoplistitem{
width: 6.14rem;
height: 1.43rem;
background: blue;
}
</style>
</head>
<body>
<div class="shoplistitem">
</div>
</body>
</html>

53
teaching/lhj/kejian/position.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<style>
/*
position
绝对定位 他的参照物不是他自己 如果父盒子不被relative修饰，他的参照物就是最外层盒子（body） 如果父盒子被relative修饰 他的参照物就是父盒子
相对定位 以他自己为参照物
子绝父相
固定定位 fixed
粘性 sticky 滚动条不动的时候 他相当于相对定位 滚动条滚动的时候 他相当于fixed 固定定位
*/
*{
margin: 0;
padding: 0;
}
.box{
width:400px;
height: 400px;
background: green;
margin: auto;
margin-top: 50px;
position: relative;
}
.item{
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 0;
left:0
}
.shu{
width: 10px;
height: 500px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div style="position: sticky; top: 0; ">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="box">
<div class="item"></div>
</div>
<div class="shu"></div>
</body>
</html>

63
teaching/lhj/kejian/pubuliu.html Normal file
View File

@ -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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.waterfall {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* grid-gap: 0.25em; */
grid-auto-flow: row dense;
grid-auto-rows: 20px;
/* grid-template-columns: repeat(2, 1fr); // 指定两列，自动宽度
grid-gap: 0.25em; // 横向，纵向间隔
grid-auto-flow: row dense; // 是否自动补齐空白
grid-auto-rows: 20px; // base高度，grid-row基于此运算 */
}
.waterfall .item {
width: 100%;
background: #222;
color: white;
border: 1px solid white;
}
.waterfall .item:nth-of-type(3n+1) {
/* 1,4,7,10 ... */
grid-row: auto / span 1;
}
.waterfall .item:nth-of-type(3n+2) {
/* 2,8,11,15 */
grid-row: auto / span 9;
}
.waterfall .item:nth-of-type(3n+3) {
/* 3,6,14,15 */
grid-row: auto / span 4;
}
</style>
</head>
<body>
<div class="waterfall">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>

61
teaching/lhj/kejian/yunsuanfu.html Normal file
View File

@ -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>Document</title>
<script>
// x元运算符 =》 这个运算符 能操作几个数
// 1+2
// 2*3
// 3/7
// 7*2
var a=3
var b=3;
var c=4
// 如果一个变量没赋值的时候 默认是undefined
// console.log(a+undefined) //3b
// a++ 后置自增 先执行 再加减 加一
// console.log(a++)
// console.log(a)
// // b-- 后置自减 先执行 后加减
// console.log(b--) // 3
// console.log(b) // 2
// // ++c 前置自增（减） 先加减 后执行
// console.log(++c) //5
// console.log(c++) //5
// console.log(c) //6
// 相等和全等 （== ===） 输出结果都是true/false
// 相等在比较之前 会先对等号两边的值进行隐式类型转换
// == -> 相等
// === -> 全等
// console.log(5==1)
// console.log(5==5)
// console.log(5=='5') // true
// console.log(5=="5asd") //false
// console.log(Number("5"))
// console.log(Number("5asd"))
// 条件运算符
// 条件？条件成立的时候执行的语句：条件不成立的时候执行的语句
// var str=99
// typeof str=="String"?console.log(str):alert(str+1)
// var str1=1,str2=2,str3=3,str4=4
// 逻辑运算符 非！ 或|| 与&&
// 非 取反
// 与 && 只有两边都是true的时候才是true 只要有一个false 就是false
// 或 || 只要两边有一个是true 结果就是true
console.log(!true)
console.log(true&&false) //false
</script>
</head>
<body>
</body>
</html>

143
teaching/lhj/pro/index.html Normal file
View File

@ -0,0 +1,143 @@
<!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>
<link rel="stylesheet" href="./static/css/index.css">
<script>
function jinru() {
// console.log(233) //打印在控制台上
var nav2 = document.getElementById("nav2");
nav2.style.display = "block"
}
function out() {
var nav2 = document.getElementById("nav2");
nav2.style.display = "none"
}
</script>
</head>
<body>
<div class="navbox">
<div class="left">
<div class="navitem" onmouseover="jinru()" onmouseout="out()">网站导航</div>
<div class="navitem">商家入驻</div>
<div class="navitem">客户服务</div>
</div>
<div class="right">
<div class="navitem">网站导航</div>
<div class="navitem">商家入驻</div>
<div class="navitem">客户服务</div>
<div class="navitem">网站导航</div>
<div class="navitem">商家入驻</div>
<div class="navitem">客户服务</div>
</div>
</div>
<div class="nav2" id="nav2">
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
</ul>
<ul>
<li>苏宁互联</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
</div>
</div>
<div class="top">
<img src="http://image1.suning.cn/uimg/cms/img/159642507148437980.png" alt="" class="logo">
<div class="searchright">
<div class="searchbox">
<div class="searchicon"></div>
<input type="text" class="shuru">
<div class="btn">搜索</div>
</div>
<div class="searchcontent">
<div class="left">
<p class="title">最近搜索</p>
<img src="./static/img/logo.png" alt="" class="sun">
<p class="tishi">您还没有探索到这里</p>
</div>
<div class="right">
</div>
</div>
</div>
yyyy
</div>
</body>
</html>

7
teaching/lhj/pro/note.md Normal file
View File

@ -0,0 +1,7 @@
# css
引入方式：
1. 行内样式 <p style="">
2. 内联样式 style
3. 外部样式 link
css 使用的第一步是初始化样式 用 * （通配符）

168
teaching/lhj/pro/static/css/index.css Normal file
View File

@ -0,0 +1,168 @@
*{
margin:0;
padding:0;
}
.navbox{
width: 100%;
height: 36px;
background: #f5f5f5;
display: flex;
justify-content:space-between
}
.navbox .left{
margin-left: 30px;
}
.navbox .right{
margin-right: 40px;
}
.navbox .left, .right{
/* width: 343px; */
height: 100%;
display: flex;
/* float: left; */
}
.navbox .right{
/* width: 647px; */
height: 100%;
/* background: blue; */
/* float: right; */
}
.navbox .left .navitem, .right .navitem{
font-size: 12px;
line-height: 36px;
padding:0 10px;
cursor: pointer;
/* cursor: default; */
}
.navbox .left .navitem:hover, .right .navitem:hover{
color: #F60;
background: white;
}
.nav2{
width: 890px;
/* height: 242px; */
border: 1px solid #ddd;
border-top: none;
margin-left: 30px;
overflow: auto;
padding:20px 0;
display: none;
position: absolute;
z-index: 10000000000;
background: white;
}
.title{
color:#333;
font-size: 14px;
padding-left: 18px;
}
.navlist{
float: left;
padding-right: 40px;
border-right:1px solid #ddd;
}
.nav2 .navlist:last-child{
border-right: none;
}
.nav2 ul li{
font-size: 12px;
color: #333;
list-style: none;
}
.nav2 ul{
float: left;
margin-left: 20px;
}
.top{
margin-left: 30px;
display: flex;
align-items: center;
position: relative;
box-sizing: border-box;
/* 定义交叉轴对齐方式 */
/* border: 1px solid red; */
}
.searchbox{
width: 540px;
height: 40px;
border: 2px solid #ff8000;
display: flex;
border-radius: 20px;
/* position: absolute;
top:20px */
/* float: left; */
/* 第一个是左上 第二个是右上 第三个是右下 第四个是左下 */
}
.logo{
width:190px;
height: 90px;
margin-right:30px;
float: left;
position: absolute;
top: 20px;
}
.searchright{
margin-left: 300px;
position: relative;
top: 30px;
box-sizing: border-box;
}
.searchicon{
width: 15px;
height: 36px;
background: #ddd;
margin-left: 20px;
}
.shuru{
width: 390px;
height: 36px;
border: none;
outline: none;
padding-left: 10px;
}
.btn{
width: 120px;
height:40px;
background: #ff8000;
color:white;
text-align: center;
line-height: 40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.searchcontent{
width: 540px;
border: 1px solid red;
box-sizing: border-box;
}
.searchcontent .left{
width: 251px;
height: 269px;
border:1px solid gray;
box-sizing: border-box;
}
.left .title{
width:100%;
height: 30px;
background: #ddd;
line-height: 30px;
color: #999;
box-sizing: border-box;
}
.sun{
width:80px;
height:80px;
margin-left: 30%;
margin-top:10%;
margin-bottom: 20px;
}
.tishi{
color: #ddd;
text-align:center;
}

BIN
teaching/lhj/pro/static/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

48
teaching/林锦绣/css.html Normal file
View File

@ -0,0 +1,48 @@
<!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>
<!--
网页的结构由 html(决定网页的结构) css（决定网页的样式） js（决定网页的交互）
css（层叠样式表）
引入 行内 html标签中写一个style=""
内联样式 html文件内 的head里面 写 style标签 在这里面写css属性
外部样式 link rel=stylesheet
语法 选择器{
属性：属性值；
属性：属性值
}
盒模型
margin 吞并 发生在两个块级元素垂直方向 规律是 取数大的间距
* 通配符 选中的是整个网页上的所有元素
-->
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background: red;
margin-bottom: 50px;
}
.box2{
width: 200px;
height: 200px;
background: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<p style="color:red"></p>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>

36
teaching/林锦绣/flex.html Normal file
View File

@ -0,0 +1,36 @@
<!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{
height: 500px;
border: 1px solid blue;
display: flex;
justify-content:space-between;
/* align-items: baseline; */
align-items: flex-end;
}
.item{
width: 200px;
height: 200px;
background:red;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">aaaa</div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>

69
teaching/林锦绣/float.html Normal file
View File

@ -0,0 +1,69 @@
<!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{
width: 200px;
height: 200px;
background: red;
float:left
}
.box1{
width:200px;
height: 200px;
background: blue;
float:right
}
.box3{
width:200px;
height: 200px;
background: pink;
/* clear: both; */
}
/*
display: inline-block 水平排列( 既能设置宽高 又能实现水平排列 从左往右)
float 水平排列
float 既可以从左往右 又能从右往左
浮动元素能够和块级元素 重叠 但是不能跟行框盒子盒子
float 造成的父元素高度塌陷的问题
想给谁清浮动就给谁加clear:both
伪元素
给加空盒子然后加clear:both;
overflow 给父级元素加
*/
</style>
</head>
<body>
<div style="overflow: auto;">
<div class="box"></div>
<div class="box1"></div>
<!-- <p>
float 水平排列
float 既可以从左往右 又能从右往左 float 水平排列
float 既可以从左往右 又能从右往左 float 水平排列
float 既可以从左往右 又能从右往左 float 水平排列
float 既可以从左往右 又能从右往左 float 水平排列
float 既可以从左往右 又能从右往左 float 水平排列
float 既可以从左往右 又能从右往左
</p> -->
</div>
<div class="box3"></div>
</body>
</html>

58
teaching/林锦绣/position.html Normal file
View File

@ -0,0 +1,58 @@
<!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>
<!--
内联元素 不换行 display inline
块级元素 换行 display block
定位 position
默认值 是static
relative 相对定位 相对于他自己
absolute 绝对定位 如果说他的父元素被 relative修饰 那么他就是按照父元素进行定位 如果父元素不被relative 那么他按照最外层（body）进行定位
fixed 固定定位
sticky 粘性 滚动条不动的时候 元素是相对定位 滚动条滚动的时候 他是 固定定位
用法 position:relative
top:30px
left:
bottom
right
-->
<style>
*{
margin:0;
padding: 0;
}
.box{
width:400px;
height: 400px;
background: red;
position: relative;
margin: 0 auto;
margin-top: 60px;
}
.item{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
<div>
<img src="" alt="">
</div>
</body>
</html>

BIN
zuoye/htmlcss/pdfs/基础.pdf Normal file
View File

Binary file not shown.

BIN
zuoye/htmlcss/pdfs/移动端.pdf Normal file
View File

Binary file not shown.

BIN
zuoye/htmlcss/pdfs/表单.pdf Normal file
View File

Binary file not shown.

BIN
zuoye/htmlcss/pdfs/表格.pdf Normal file
View File

Binary file not shown.

BIN
zuoye/htmlcss/基础.assets/image-20210417142345798.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
zuoye/htmlcss/基础.assets/image-20210417142408070.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
zuoye/htmlcss/基础.assets/image-20210417142440900.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
zuoye/htmlcss/基础.assets/image-20210417142544829.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
zuoye/htmlcss/基础.assets/image-20210417142700974.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

83
zuoye/htmlcss/基础.md Normal file
View File

@ -0,0 +1,83 @@
# html基础练习
1. 写出html基本结构
2. 写出至少5个单标签和至少8个双标签
3. 新建一个html文件，页面上展示hello world
world加粗
完成微信群内发截图
4. 新建一个html文件，页面上展示一篇文章的题目，作者，发布日期，正文内容，阅读量，点赞量，评论量
其中，标题单独一行，下面放作者，发布日期，下面放正文内容，最下面放阅读量，点赞量，评论量
完成微信群内发截图
5. 在任务4的基础上 在正文之前插入一个图片作为文章封面
完成微信群内发截图
6. 在任务5的基础上，从最上面添加一个输入框和搜索按钮，点击搜索，将输入框中输入的值带入www.baidu.com的地址栏中
完成微信群里发截图
7. 用自己的方式调整任务4的html页面的样式
完成微信群内发截图
8. 完成下面的效果（内容为苏宁易购官网 https://www.suning.com/）
![image-20210417142345798](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142345798.png)
![image-20210417142408070](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142408070.png)
![image-20210417142440900](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142440900.png)
![image-20210417142544829](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142544829.png)
![image-20210417142700974](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142700974.png)

179
zuoye/htmlcss/移动端.md Normal file
View File

@ -0,0 +1,179 @@
# 移动端
1. 仿写京东手机版（https://m.jd.com/）
![image-20210417163206797](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163206797.png)
2. 手机端表格练习
![image-20210417163418136](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163418136.png)
备注 表格字段有 头像 昵称 活跃度 加入时间 是否为好友 性别 位置 id个性签名
除了用户 （包含用户名头像外 其他列可滚动）
![https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0125e35d47ef40a8012187f4f7aaab.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=eba176a1ea0109aa3252b467c48d0ca4](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0125e35d47ef40a8012187f4f7aaab.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=eba176a1ea0109aa3252b467c48d0ca4)
资料上传列表
![image-20210417163701901](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163701901.png)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a01d592a7ab4a801216a3eeaa63c.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240479&t=7ca2dc926246bc1b6b0680dfdb1081d7)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0167d557cf866c0000012e7e49f4fc.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240525&t=7e8e3a100d52c60ec67e9025e78d2b33)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015bf25704b4586ac7257948a0b2ae.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240548&t=31fe58487a386b4a2836efe187898126)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0102b65c2c972aa80121df909f1e42.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240574&t=df10a8630b82ab30211d58ee1ceac800)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c86a5544f0fd0000019ae94781fc.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240616&t=db74f69d43d7b8d5402232e79a7a0a10)
![image-20210417164124658](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417164124658.png)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01039556c2c60b6ac7256cb03ab3e7.jpg%40900w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240795&t=6290cc4a0019953a2e092735eb0c193b)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01319a56c2c6496ac7256cb0123846.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240795&t=62c251b5ee11806b4c89dd3caf16ef42)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fy.zdmimg.com%2F201806%2F04%2F5b14875b2d1c75965.jpg&refer=http%3A%2F%2Fy.zdmimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240885&t=0e67fab688de74d39209d0a4dc6be523)
## 移动端 表单
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftmp.weibenh5.com%2Fueditor%2Fphp%2Fupload%2Fimage%2F20191107%2F1573119926768056.jpg&refer=http%3A%2F%2Ftmp.weibenh5.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240988&t=312df1869a7967c3c965d2cdcd2acd80)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.tuicool.com%2FziAzAra.png%21web&refer=http%3A%2F%2Fimg1.tuicool.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=723cf0e70e7f2cbe12a0e501c1b35ff3)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F11cb4b3d0ff0a53c439ff901c15773ee883537e81818e-JNNnIk_fw236&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=1e53a2d8a4fd1a46e7371d5ec97b6d4d)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.xueui.cn%2Fwp-content%2Fuploads%2F2018%2F05%2F201805221526996841-1.jpg&refer=http%3A%2F%2Fimgs.xueui.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=ef5ff249a66ba48f3a98c3db7a5fbcc9)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.woshipm.com%2Fwp-files%2F2017%2F10%2F4-117.png&refer=http%3A%2F%2Fimage.woshipm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=e2bc9cddd782d4135b8cc45e75b36f5c)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.xueui.cn%2Fwp-content%2Fuploads%2F2018%2F05%2F201805221526996843.jpg&refer=http%3A%2F%2Fimgs.xueui.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=4e3a6bb8141ce3c1beaaa9ca456f773e)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.uiwhy.cn%2Fzb_users%2Fupload%2F2018%2F12%2F20181209021548_11246.png&refer=http%3A%2F%2Fwww.uiwhy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=33f8b7c74681687f21af7f120d4dbe9f)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F02d5985756a1bd0000018c1b4d6a6f.jpg%40800w_1l_2o&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=b1ffae7a87f49df49417fa80913b69f8)

BIN
zuoye/htmlcss/移动端md.assets/image-20210417163206797.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
zuoye/htmlcss/移动端md.assets/image-20210417163418136.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
zuoye/htmlcss/移动端md.assets/image-20210417163701901.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
zuoye/htmlcss/移动端md.assets/image-20210417164124658.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
zuoye/htmlcss/表单.assets/image-20210417151640744.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
zuoye/htmlcss/表单.assets/image-20210417151656818.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
zuoye/htmlcss/表单.assets/image-20210417151728218.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
zuoye/htmlcss/表单.assets/image-20210417151948720.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
zuoye/htmlcss/表单.assets/image-20210417162831726.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

100
zuoye/htmlcss/表单.md Normal file
View File

@ -0,0 +1,100 @@
# 表单
完成下面练习
1.
![image-20210417151640744](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151640744.png)
2.
![image-20210417151656818](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151656818.png)
3.
![image-20210417151728218](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151728218.png)
4.
![image-20210417151948720](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151948720.png)
5.
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.bjmcykj.com%2Fuploadfile%2F2014%2F05%2F28%2F20140528165362142.jpg&refer=http%3A%2F%2Fwww.bjmcykj.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235777&t=b029f432f4c7ff6a2352008cce43ae6b)
6.
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.codezhijia.com%2FPublic%2FUpload%2Ftemplates%2F5baecd6d8a7e6.png&refer=http%3A%2F%2Fwww.codezhijia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235804&t=dd0cbd4385476733cc1f2d3110f2b917)
（上面的滑动验证可以先忽略掉）
7.
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F604c82fc85f6ea812bc83407fc5cb24d463be3da19f0-No3sSO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621236049&t=696bec1e475e180b3e5d298fe3f7141e)
8.
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lx98.cn%2Fuploads%2Fallimg%2F171103%2Ftlns41leaue.jpg&refer=http%3A%2F%2Fwww.lx98.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235868&t=9cbdca965291ed20abc3af31309da545)
（先只完成表单分类管理部分）
9.
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ee21.cn%2Fimg%2F1%2F58663%2F351704200535512968472.jpg&refer=http%3A%2F%2Fp.ee21.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621236049&t=25fe7f2770bef17efdf7eb939fdfe518)
10.
![img](http://photocdn.sohu.com/20160311/mp63076656_1457700748118_3_th.png)
![http://5b0988e595225.cdn.sohucs.com/images/20190621/d9c09882159949319e82af4d569f76c3.jpeg](http://5b0988e595225.cdn.sohucs.com/images/20190621/d9c09882159949319e82af4d569f76c3.jpeg)

BIN
zuoye/htmlcss/表格.assets/image-20210417143044634.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
zuoye/htmlcss/表格.assets/image-20210417143051063.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
zuoye/htmlcss/表格.assets/image-20210417145730641.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
zuoye/htmlcss/表格.assets/image-20210417145804193.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
zuoye/htmlcss/表格.assets/image-20210417145821858.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
zuoye/htmlcss/表格.assets/image-20210417145901068.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
zuoye/htmlcss/表格.assets/image-20210417150516346.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 331 KiB

BIN
zuoye/htmlcss/表格.assets/image-20210417150651452.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

89
zuoye/htmlcss/表格.md Normal file
View File

@ -0,0 +1,89 @@
# 表格
* 完成下面的表格
![image-20210417145804193](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417145804193.png)
* 完成课程表
![image-20210417150516346](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417150516346.png)
* 完成下面简历表格
**![墨绿色简洁空白简历表格word格式个人简历模板 ](https://img-u-0.51miz.com/Templet/00/16/52/97/165297_8d74ff62b666bd456f24c782825d3bb8.jpg!/quality/90/unsharp/true/compress/true/fw/840/clip/840x700a0a0)**
* 完成下面的三个数据表
* ![img](http://img02.tuke88.com/preview/2418175/00/04/22/5c20a2d4f28b4.jpg-0.jpg!/fw/800/quality/90/unsharp/true/compress/true)
![image-20210417150651452](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417150651452.png)
* 结合表单完成下面表格
![image-20210417145821858](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417145821858.png)
![白色产品报价单](https://www.55.la/uploads/1880910/1_new.jpg)
![白色送货单Excel表格](https://www.55.la/uploads/1905062/1_new.png)
![学习计划和作息时间表](https://www.55.la/uploads/1880714/1_new.png)
![单位工作交接表](https://www.55.la/uploads/1880864/1_new.jpg)
![财务报表素材](https://pic.ibaotu.com/00/11/68/70R888piCUwe.jpg-1.jpg!ww7002)

105
zuoye/jq es6/es6.md Normal file
View File

@ -0,0 +1,105 @@
# es6 相关
1. 下面这个例子最外面会输出10 如何解决
```
for(var i = 0; i < 10; i++) {
console.log(1);
}
console.log(i);
```
2. 使用结构赋值，实现两个变量的值的交换
3. 使用结构赋值，完成函数的参数默认值
4. 利用数组推导，计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。
5. 使用模板字符串改写下面的代码。（ES5 to ES6改写题）
```
letname ="前端研究所";
letobj = {
"name":name,
"say":function(){
alert('hello world');
}
};
```
6. 用箭头函数的形式改写下面的代码。（ES5 to ES6改写题）
```
arr.forEach(function(v,i) {
console.log(i);
console.log(v);
});
```
7. 设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key。
8. 有一本书的属性为：{“name”:“《ES6基础系列》”, ”price”：56 }；要求使用Proxy对象对其进行拦截处理，name属性对外为“《ES6入门到懵逼》”,price属性为只读。（练习题）
9. 阅读下面的代码，并用for...of改成它。（ES5 to ES6改写题）
10. 关于Set结构，阅读下面的代码，回答问题。（代码阅读题）。
```
lets =newSet();
s.add([1]);
s.add([1]);
console.log(s.size);
```
问：打印出来的size的值是多少？为什么
答：
11. 关于Map结构，阅读下面的代码，回答问题。（代码阅读题）
```
letmap =newMap();
map.set([1],"ES6系列");
letcon = map.get([1]);
console.log(con);
```
问：打印出来的变量con的值是多少，为什么？
答：
12. 11题的如何得到的变量con的值就是：“ES6系列”。
13. 通过class 定义一个类Animal，通过传参初始化它的类型，如：“猫科类”。它有一个实例方法：run，run函数体内容可自行定义。
14. 基于上一题的Animal类，定义一个子类Cat并继承Animal类。初始化Cat类的昵称name和年龄age。并拥有实例方法eat，eat函数体内容可自行定义。
15. 利用module模块，实现两个模块A和B，A模块导出变量name，age和say方法。B模块只导入变量name和say方法，并且重命名name为nickname。
16. 使用字符串模板 把下面代码补充完整
```
const greetings = (name) => {
return `hello `; //要补充的部分
}
```
17. 使用es6语法 实现下图代码功能
![preview](https://pic2.zhimg.com/v2-73bff89d4cfb706553610dd4725e21e1_r.jpg)
18. 冻结上面17题中定义的对象 使其无法被修改（温馨提示可以用 object.freeze()） 简单了解object.freeze()的用法
参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
19. 解释一下 `Object.freeze()` 和 `const` 的区别
20. 说明下列方法为何不能用作 IIFE，要使其成为 IIFE，需要进行哪些更改？
```
function foo(){ }();
```
21. 用promise语法封装ajax功能，并调用
22. 用await async 改写上面的21题

BIN
zuoye/jq es6/jq.assets/image-20210423104900177.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
zuoye/jq es6/jq.assets/image-20210423112831959.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

BIN
zuoye/jq es6/jq.assets/image-20210423113120161.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
zuoye/jq es6/jq.assets/image-20210423113138888.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
zuoye/jq es6/jq.assets/image-20210423113234784.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 KiB

BIN
zuoye/jq es6/jq.assets/image-20210423113257018.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 KiB

61
zuoye/jq es6/jq.md Normal file
View File

@ -0,0 +1,61 @@
# jquery相关
1. 在html文件中写上8个p标签，内容为
1.你有多久没有翻开过一本书了？
2. 加密原理详解：对称式加密VS非对称式加密
3. 低代码：正在改变软件的开发方式
4. Vue 转 React不完全指北
5. web安全（xss/csrf）简单攻击原理和防御方案（实战篇）
6. 深度解读 Chaos Mesh®，探索云原生混沌工程的奥秘
7. 简洁设计-毛玻璃效果登陆页面
8. 996 前端人该如何持续学习
然后需要用jq实现点击哪个p标签 弹出对应的内容
2. 在html文件内写6个checkbox 内容 value值自定义 需要不一样 和一个按钮在此基础上 点击按钮需要输出 选中的checkbox的value 以及选中的总个数
3. 分类添加内容
如果选择 城市的话就添加到你喜欢哪个城市列表 如果选择游戏的话就添加到你喜欢哪个游戏的列表
效果图如下
![img](https://images2015.cnblogs.com/blog/1093092/201701/1093092-20170125225432472-997852563.bmp)
4. 员工信息的增加和删除
从输入框内填写姓名，邮箱，薪资 点击submit 就把输入的员工信息添加到员工信息表中
效果图如下
![img](https://images2015.cnblogs.com/blog/1093092/201701/1093092-20170125224159300-1831658360.bmp)
5. 品牌展示 超出部分点击显示全部信息全都展示
效果图如下
![img](https://images2015.cnblogs.com/blog/1093092/201701/1093092-20170125224755191-614465786.bmp)
6. 通过ajax 实现商品添加和商品展示功能 详情见附件 接口文档
7. 完成登录 注册 用户表页面 并通过ajax完成提交/渲染功能
8. 完成商城页面购物车的功能（单选 多选 全选。增删改查 ）<不牵扯接口 前端静态页面>
9. 写一个移动端的底部tabbar的效果 图片可以不变 但是文字要变颜色
10. 订单页面的tab切换效果
11. 地址管理页面的地址增删改查 设置默认地址效果
12. 京东页面的分类鼠标划过出不同菜单的效果
![image-20210423112831959](E:\web\lessons\课件\zuoye\jq es6\jq.assets\image-20210423112831959.png)
13. jq 实现 图片轮播效果（实现切换图片即可）
14. 秒杀倒计时效果
15. 根据当前时间确定在哪个区间的秒杀效果
![image-20210423113138888](E:\web\lessons\课件\zuoye\jq es6\jq.assets\image-20210423113138888.png)
16. 京东详情 选择分类效果
![image-20210423113257018](E:\web\lessons\课件\zuoye\jq es6\jq.assets\image-20210423113257018.png)

BIN
zuoye/jq es6/pdfs/es6.pdf Normal file
View File

Binary file not shown.

BIN
zuoye/jq es6/pdfs/jq.pdf Normal file
View File

Binary file not shown.

16
zuoye/js/a.html Normal file
View File

@ -0,0 +1,16 @@
<!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>
<script>
var time=1
var newtime=time++
console.log(time,newtime)
</script>
</body>
</html>

0
zuoye/js/js/demo/digui.html → zuoye/js/demo/digui.html
View File

4
zuoye/js/js/运算符.md
View File

@ -1,4 +0,0 @@
# 运算符
* 完成教案后面的4个练习
* 预习if语句，函数定义传参 ，定义一个函数 返回值实现两个参数的加减乘除 取余 乘方和相加的计算器功能
* 完成逻辑运算符后面的9个练习

BIN
zuoye/js/js/运算符.pdf
View File

Binary file not shown.

0
zuoye/js/js/函数.pdf → zuoye/js/pdfs/函数.pdf
View File

BIN
zuoye/js/pdfs/基础.pdf Normal file
View File

Binary file not shown.

0
zuoye/js/js/对象1.pdf → zuoye/js/pdfs/对象1.pdf
View File

0
zuoye/js/js/语句.pdf → zuoye/js/pdfs/语句.pdf
View File

BIN
zuoye/js/pdfs/运算符.pdf Normal file
View File

Binary file not shown.

0
zuoye/js/js/递归.pdf → zuoye/js/pdfs/递归.pdf
View File

0
zuoye/js/js/函数.md → zuoye/js/函数.md
View File

142
zuoye/js/基础.md Normal file
View File

@ -0,0 +1,142 @@
# js 基础练习
* 写出四种js引入方式并举例
* 下面两段代码，说明js文件的加载顺序并解释原因
demo1:
```
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
```
demo2
```
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
```
* 如果浏览器不支持javascript的语法需要在页面上提示您的浏览器不支持javascript 运行 如何实现
* 列举几种js 交互方式
* js的组成
* JavaScript 如何与 HTML 和 CSS 协同工作
* 在外部文件中放置js脚本有什么优势
变量和常量
* 如何交换两个变量的值
* 字面量和变量的关系及区别
* 变量命名规则
* 下面代码执行结果为 原因是
```
var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name);
```
* 用一行语句声明5个变量 其中值包有一个只声明不赋值 其他分别为null 数值 字符串 布尔
数据类型
* 数据类型可以分为哪几类 有什么区别
* 如何实现功能 当浏览器不支持javascript脚本的时候 给用户在页面上提示“您的浏览器不支持javascript 脚本，请尽快升级浏览器”
* typeof 检测数据类型的返回值都有什么 分别代表什么意思
* 类型转换相关
1. 输入两个数字，点求和弹出两个数字相加的结果。
1. 输入框的默认value进行相加，结果是进行了字符串相加，而非数字相加。
2. 将value的值进行parseInt，之后再相加，就是数字相加的结果了。
如果输入12+abc，会是什么结果？ 你得到了什么结论
3.isNaN，检测输入框的内容是不是NaN。true为真，false为假。
4.写出下面的执行结果
1 + '1'
true + 0
{}+[]
4 + {}
4 + [1]
'a' + + 'b'
console.log ( [] == 0 )
console.log ( ! [] == 0 )
console.log ( [] == ! [] )
console.log ( [] == [] )
console.log({} == !{})
console.log({} == {})
1. 定义一个变量存储数据1234，分别输出个位，十位，百位，千位数字
2. 输入两个数字，相减四舍五入（.toFixed() 把保留几位小数写在括号里）
3. 从弹框中输入一个字符，判断这个字符是否是英文字母，数字，汉字（4e00-9fa5）
4. 下面代码的输出结果
console.log(10 + " cats");
console.log(10 * " cats");
Boolean([])
console.log(10 + "2");
console.log(10 - "2");
Number("3")
console.log(10 / "2");
console.log(10 * "2");
String(false)
console.log(10 * " 2");
console.log("10" * "2");
console.log(Object(undefined));
console.log(Object(null));
5. 下面代码的执行结果
var str = "abc";
str[0] = "d";
console.log(str[1]="e");
console.log(str[0]);
console.log(str);
var num = [1,2,3];
num[0] = "a";
console.log(num);
1. 下面代码的执行结果
var obj1 = {age: 22};
var obj2 = obj1;
console.log(obj1 === obj2);
obj2.age = 18;
console.log(obj1 === obj2);
2. 解释10，11结果出现的原因 并归纳基本数据类型和引用数据类型的区别
3. 下面代码的输出结果
var obj1 = {age: 22};
var obj2 = obj1;
console.log(obj1 === obj2);
obj2.age = 18;
console.log(obj1 === obj2);
console.log("1" instanceof String);
console.log(("1").constructor === String);
console.log((1).constructor === Number);
console.log((true).constructor === Boolean);
console.log(([]).constructor === Array);
console.log((function() {}).constructor === Function);
console.log(({}).constructor === Object);
console.log(1 instanceof Number);
console.log(true instanceof Boolean);
console.log([] instanceof Array);
console.log(function(){} instanceof Function);
console.log({} instanceof Object);
var test = Object.prototype.toString;
console.log(test.call("str"));
console.log(test.call(1));
console.log(test.call(true));
console.log(test.call(null));
console.log(test.call(undefined));
console.log(test.call([]));
console.log(test.call(function() {}));
console.log(test.call({}));

0
zuoye/js/js/对象1.md → zuoye/js/对象1.md
View File

Some files were not shown because too many files have changed in this diff Show More