练习
This commit is contained in:
parent
812be57880
commit
55c598cdb1
BIN
csspress/4.flex.pdf
Normal file
BIN
csspress/4.flex.pdf
Normal file
Binary file not shown.
@ -1,9 +0,0 @@
|
||||
通过蓝湖这样的工具 根据主流分辨率来更改设计图的缩放比例
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -19,7 +19,11 @@
|
||||
1. 浮动的包裹性
|
||||
|
||||
抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
|
||||
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果
|
||||
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果 也是每个都要加的属性
|
||||
|
||||
注：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
|
||||
|
||||
|
||||
|
||||
但是 float和display:inline-block 无法完全等同
|
||||
|
||||
|
||||
BIN
csspress/float.pdf
Normal file
BIN
csspress/float.pdf
Normal file
Binary file not shown.
BIN
csspress/pdfs/1.css基础.pdf
Normal file
BIN
csspress/pdfs/1.css基础.pdf
Normal file
Binary file not shown.
BIN
csspress/pdfs/2.盒模型.pdf
Normal file
BIN
csspress/pdfs/2.盒模型.pdf
Normal file
Binary file not shown.
BIN
csspress/pdfs/3.定位.pdf
Normal file
BIN
csspress/pdfs/3.定位.pdf
Normal file
Binary file not shown.
93
demos/html/html常用标签.md
Normal file
93
demos/html/html常用标签.md
Normal 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
BIN
html/html简介.pdf
Normal file
Binary file not shown.
BIN
html/表单.pdf
Normal file
BIN
html/表单.pdf
Normal file
Binary file not shown.
BIN
html/表格.pdf
Normal file
BIN
html/表格.pdf
Normal file
Binary file not shown.
@ -253,16 +253,16 @@ html 元素和标签的区别：
|
||||
|
||||
3. 新建一个html文件，页面上展示hello world
|
||||
world加粗
|
||||
完成内网通发截图
|
||||
完成微信发截图
|
||||
|
||||
4. 新建一个html文件，页面上展示一篇文章的题目，作者，发布日期，正文内容，阅读量，点赞量，评论量
|
||||
其中，标题单独一行，下面放作者，发布日期，下面放正文内容，最下面放阅读量，点赞量，评论量
|
||||
完成内网通发截图
|
||||
5. 在任务4的基础上 在正文之前插入一个图片作为文章封面
|
||||
完成内网通发截图
|
||||
完成微信发截图
|
||||
|
||||
6. 在任务5的基础上，从最上面添加一个输入框和搜索按钮，点击搜索，将输入框中输入的值带入www.baidu.com的地址栏中
|
||||
完成内网通发截图
|
||||
完成微信发截图
|
||||
|
||||
7. 用自己的方式调整任务4的html页面的样式
|
||||
完成内网通发截图
|
||||
完成微信发截图
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
## 列表 list
|
||||
### 无序列表 ul-li
|
||||
<ul>
|
||||
<ul style="list-style:none">
|
||||
<li>香菱</li>
|
||||
<li>皇女</li>
|
||||
<li>旅行者</li>
|
||||
@ -80,7 +80,7 @@
|
||||
</ul>
|
||||
|
||||
```
|
||||
<ul>
|
||||
<ul style="list-style:none>
|
||||
<li>香菱</li>
|
||||
<li>皇女</li>
|
||||
<li>旅行者</li>
|
||||
@ -88,6 +88,26 @@
|
||||
</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页面，
|
||||
39
teaching/jwl/课件/es6/awaitasync.html
Normal file
39
teaching/jwl/课件/es6/awaitasync.html
Normal 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
113
teaching/jwl/课件/es6/fuxi.html
Normal 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
86
teaching/jwl/课件/es6/promise.html
Normal 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
23
teaching/jwl/课件/vue/ceshi/.gitignore
vendored
Normal 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
24
teaching/jwl/课件/vue/ceshi/README.md
Normal 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
5
teaching/jwl/课件/vue/ceshi/babel.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
42
teaching/jwl/课件/vue/ceshi/package.json
Normal file
42
teaching/jwl/课件/vue/ceshi/package.json
Normal 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
BIN
teaching/jwl/课件/vue/ceshi/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
teaching/jwl/课件/vue/ceshi/public/index.html
Normal file
17
teaching/jwl/课件/vue/ceshi/public/index.html
Normal 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
45
teaching/jwl/课件/vue/ceshi/src/App.vue
Normal 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
BIN
teaching/jwl/课件/vue/ceshi/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
58
teaching/jwl/课件/vue/ceshi/src/components/HelloWorld.vue
Normal file
58
teaching/jwl/课件/vue/ceshi/src/components/HelloWorld.vue
Normal 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
8
teaching/jwl/课件/vue/ceshi/src/main.js
Normal 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
8514
teaching/jwl/课件/vue/ceshi/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
28
teaching/jwl/课件/vue/note.md
Normal file
28
teaching/jwl/课件/vue/note.md
Normal 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
83
teaching/lhj/kejian/biaodan.html
Normal 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
91
teaching/lhj/kejian/float.html
Normal 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
103
teaching/lhj/kejian/grid.html
Normal 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
72
teaching/lhj/kejian/grid布局.md
Normal 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
1
teaching/lhj/kejian/js/jichu.js
Normal file
@ -0,0 +1 @@
|
||||
alert("hello")
|
||||
44
teaching/lhj/kejian/js/js基础.html
Normal file
44
teaching/lhj/kejian/js/js基础.html
Normal 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
10
teaching/lhj/kejian/js/note/js基础.md
Normal 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
111
teaching/lhj/kejian/media.html
Normal 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
53
teaching/lhj/kejian/position.html
Normal 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
63
teaching/lhj/kejian/pubuliu.html
Normal 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
61
teaching/lhj/kejian/yunsuanfu.html
Normal 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
143
teaching/lhj/pro/index.html
Normal 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
7
teaching/lhj/pro/note.md
Normal file
@ -0,0 +1,7 @@
|
||||
# css
|
||||
引入方式：
|
||||
1. 行内样式 <p style="">
|
||||
2. 内联样式 style
|
||||
3. 外部样式 link
|
||||
|
||||
css 使用的第一步是初始化样式 用 * （通配符）
|
||||
168
teaching/lhj/pro/static/css/index.css
Normal file
168
teaching/lhj/pro/static/css/index.css
Normal 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
BIN
teaching/lhj/pro/static/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
48
teaching/林锦绣/css.html
Normal file
48
teaching/林锦绣/css.html
Normal 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
36
teaching/林锦绣/flex.html
Normal 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
69
teaching/林锦绣/float.html
Normal 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
58
teaching/林锦绣/position.html
Normal 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
BIN
zuoye/htmlcss/pdfs/基础.pdf
Normal file
Binary file not shown.
BIN
zuoye/htmlcss/pdfs/移动端.pdf
Normal file
BIN
zuoye/htmlcss/pdfs/移动端.pdf
Normal file
Binary file not shown.
BIN
zuoye/htmlcss/pdfs/表单.pdf
Normal file
BIN
zuoye/htmlcss/pdfs/表单.pdf
Normal file
Binary file not shown.
BIN
zuoye/htmlcss/pdfs/表格.pdf
Normal file
BIN
zuoye/htmlcss/pdfs/表格.pdf
Normal file
Binary file not shown.
BIN
zuoye/htmlcss/基础.assets/image-20210417142345798.png
Normal file
BIN
zuoye/htmlcss/基础.assets/image-20210417142345798.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142408070.png
Normal file
BIN
zuoye/htmlcss/基础.assets/image-20210417142408070.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142440900.png
Normal file
BIN
zuoye/htmlcss/基础.assets/image-20210417142440900.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142544829.png
Normal file
BIN
zuoye/htmlcss/基础.assets/image-20210417142544829.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142700974.png
Normal file
BIN
zuoye/htmlcss/基础.assets/image-20210417142700974.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
83
zuoye/htmlcss/基础.md
Normal file
83
zuoye/htmlcss/基础.md
Normal 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/）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
179
zuoye/htmlcss/移动端.md
Normal file
179
zuoye/htmlcss/移动端.md
Normal file
@ -0,0 +1,179 @@
|
||||
# 移动端
|
||||
|
||||
1. 仿写京东手机版（https://m.jd.com/）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. 手机端表格练习
|
||||
|
||||
|
||||
|
||||
备注 表格字段有 头像 昵称 活跃度 加入时间 是否为好友 性别 位置 id个性签名
|
||||
|
||||
除了用户 （包含用户名头像外 其他列可滚动）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
资料上传列表
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 移动端 表单
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163206797.png
Normal file
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163206797.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163418136.png
Normal file
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163418136.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163701901.png
Normal file
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163701901.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
zuoye/htmlcss/移动端md.assets/image-20210417164124658.png
Normal file
BIN
zuoye/htmlcss/移动端md.assets/image-20210417164124658.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151640744.png
Normal file
BIN
zuoye/htmlcss/表单.assets/image-20210417151640744.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151656818.png
Normal file
BIN
zuoye/htmlcss/表单.assets/image-20210417151656818.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151728218.png
Normal file
BIN
zuoye/htmlcss/表单.assets/image-20210417151728218.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151948720.png
Normal file
BIN
zuoye/htmlcss/表单.assets/image-20210417151948720.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417162831726.png
Normal file
BIN
zuoye/htmlcss/表单.assets/image-20210417162831726.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
100
zuoye/htmlcss/表单.md
Normal file
100
zuoye/htmlcss/表单.md
Normal file
@ -0,0 +1,100 @@
|
||||
# 表单
|
||||
|
||||
完成下面练习
|
||||
|
||||
1.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
（上面的滑动验证可以先忽略掉）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
8.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
（先只完成表单分类管理部分）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
9.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
10.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
zuoye/htmlcss/表格.assets/image-20210417143044634.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417143044634.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417143051063.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417143051063.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145730641.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417145730641.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145804193.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417145804193.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145821858.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417145821858.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145901068.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417145901068.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417150516346.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417150516346.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417150651452.png
Normal file
BIN
zuoye/htmlcss/表格.assets/image-20210417150651452.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
89
zuoye/htmlcss/表格.md
Normal file
89
zuoye/htmlcss/表格.md
Normal file
@ -0,0 +1,89 @@
|
||||
# 表格
|
||||
|
||||
* 完成下面的表格
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* 完成课程表
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* 完成下面简历表格
|
||||
|
||||
****
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* 完成下面的三个数据表
|
||||
* 
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* 结合表单完成下面表格
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
105
zuoye/jq es6/es6.md
Normal file
105
zuoye/jq es6/es6.md
Normal 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语法 实现下图代码功能
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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
BIN
zuoye/jq es6/jq.assets/image-20210423104900177.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
zuoye/jq es6/jq.assets/image-20210423112831959.png
Normal file
BIN
zuoye/jq es6/jq.assets/image-20210423112831959.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
zuoye/jq es6/jq.assets/image-20210423113120161.png
Normal file
BIN
zuoye/jq es6/jq.assets/image-20210423113120161.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
zuoye/jq es6/jq.assets/image-20210423113138888.png
Normal file
BIN
zuoye/jq es6/jq.assets/image-20210423113138888.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
zuoye/jq es6/jq.assets/image-20210423113234784.png
Normal file
BIN
zuoye/jq es6/jq.assets/image-20210423113234784.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
zuoye/jq es6/jq.assets/image-20210423113257018.png
Normal file
BIN
zuoye/jq es6/jq.assets/image-20210423113257018.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
61
zuoye/jq es6/jq.md
Normal file
61
zuoye/jq es6/jq.md
Normal 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. 分类添加内容
|
||||
如果选择 城市的话就添加到你喜欢哪个城市列表 如果选择游戏的话就添加到你喜欢哪个游戏的列表
|
||||
|
||||
效果图如下
|
||||
|
||||
|
||||
|
||||
4. 员工信息的增加和删除
|
||||
从输入框内填写姓名，邮箱，薪资 点击submit 就把输入的员工信息添加到员工信息表中
|
||||
效果图如下
|
||||
|
||||
|
||||
|
||||
5. 品牌展示 超出部分点击显示全部信息全都展示
|
||||
|
||||
效果图如下
|
||||
|
||||
|
||||
|
||||
6. 通过ajax 实现商品添加和商品展示功能 详情见附件 接口文档
|
||||
|
||||
7. 完成登录 注册 用户表页面 并通过ajax完成提交/渲染功能
|
||||
|
||||
8. 完成商城页面购物车的功能（单选 多选 全选。增删改查 ）<不牵扯接口 前端静态页面>
|
||||
|
||||
9. 写一个移动端的底部tabbar的效果 图片可以不变 但是文字要变颜色
|
||||
|
||||
10. 订单页面的tab切换效果
|
||||
|
||||
11. 地址管理页面的地址增删改查 设置默认地址效果
|
||||
|
||||
12. 京东页面的分类鼠标划过出不同菜单的效果
|
||||
|
||||
|
||||
|
||||
13. jq 实现 图片轮播效果（实现切换图片即可）
|
||||
|
||||
14. 秒杀倒计时效果
|
||||
|
||||
15. 根据当前时间确定在哪个区间的秒杀效果
|
||||
|
||||
|
||||
16. 京东详情 选择分类效果
|
||||
|
||||
|
||||
BIN
zuoye/jq es6/pdfs/es6.pdf
Normal file
BIN
zuoye/jq es6/pdfs/es6.pdf
Normal file
Binary file not shown.
BIN
zuoye/jq es6/pdfs/jq.pdf
Normal file
BIN
zuoye/jq es6/pdfs/jq.pdf
Normal file
Binary file not shown.
16
zuoye/js/a.html
Normal file
16
zuoye/js/a.html
Normal 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>
|
||||
@ -1,4 +0,0 @@
|
||||
# 运算符
|
||||
* 完成教案后面的4个练习
|
||||
* 预习if语句，函数定义传参 ，定义一个函数 返回值实现两个参数的加减乘除 取余 乘方和相加的计算器功能
|
||||
* 完成逻辑运算符后面的9个练习
|
||||
Binary file not shown.
BIN
zuoye/js/pdfs/基础.pdf
Normal file
BIN
zuoye/js/pdfs/基础.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/pdfs/运算符.pdf
Normal file
BIN
zuoye/js/pdfs/运算符.pdf
Normal file
Binary file not shown.
142
zuoye/js/基础.md
Normal file
142
zuoye/js/基础.md
Normal 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({}));
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user