练习
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user