bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
历届学生/zheng-yuqing/每天上课/2022-04-18/index.html Normal file
View File

@@ -0,0 +1,122 @@
<!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>
<p> 段落 </p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="抱歉，图片无法加载"/>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<ol>
<li>有序列表 1</li>
<li>有序列表 2</li>
<li>有序列表 3</li>
<li>有序列表 4</li>
</ol>
<select name="" id="">
<option value="">-请选择-</option>
<option value="">安徽省</option>
<option value="">江苏省</option>
</select>
<textarea placeholder="请输入留言" cols="30" rows="10"></textarea>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="number" placeholder="验证码">
<input type="date">
<h2>请选择你的性别</h2>
男<input type="radio" name="xb">
女<input type="radio" name="xb">
<input type="checkbox" name="www">
<input type="checkbox" name="www">
<input type="checkbox" name="www">
<input type="color" name="">
<input type="file" name="">
<input type="time" name="">
<input type="submit" value="登 录">
<button>登 录</button>
<input type="reset" value="登 录"/>
<button>登 录</button>
<form action="http://127.0.0.1/index.php">
<input type="text" name="user_name" placeholder="用户名">
<input type="submit" value="登 录">
<input type="reset" value="清除">
<input type="button" value="登 录">
</form>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay muted loop
poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></video>
<audio src="https://www.runoob.com/try/demo_source/movie.mp4" controls></audio>
<table>
<tr>
<th>标题</th>
<th>价格</th>
<th>说明</th>
</tr>
<tr>
<td>测试1</td>
<td>10元</td>
<td>哈哈哈哈</td>
</tr>
<tr>
<td>测试1</td>
<td>10元</td>
<td>哈哈哈哈</td>
</tr>
<tr>
<td>测试1</td>
<td>10元</td>
<td>哈哈哈哈</td>
</tr>
</table>
<p>
在<strong> HTML 4.01 </strong>
<br> 中，<i>table</i> 元素的<em> "align" </em>和<del> "bgcolor" </del>属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD，table <big>元素的</big> "align" 和 "bgcolor" <small>属性</small> 是不被支持的
</p>
<div>在 XHTML 1.0 Strict DTD，table </div>
<span>在 XHTML 1.0 Strict DTD，table </span>
</body>
</html>

53
历届学生/zheng-yuqing/每天上课/2022-04-18/jiegou.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="" alt="">
<input type="text">
</div>
<div class="menu">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
</div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer">
<div class="footer_menu">
<ul>
<li></li>
</ul>
<div class="flow">
<h2>关注微信</h2>
<img src="" alt="">
</div>
</div>
<div class="footer_text">Copyright © 2013-2022 菜鸟教程 runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1</div>
</div>
</body>
</html>

51
历届学生/zheng-yuqing/每天上课/2022-04-18/kuangjia.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>框架</title>
</head>
<body>
<div class="header">
<div><img src="" alt=""></div>
<input type="text" name="" id="">
<div><ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul></div>
</div>
<div class="content">
<div> class="left"</div>
<div> class="content"</div>
<div> class="right"</div>
</div>
<div class="footer">
<div class="footer_menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="flow">
<h2>关注微信</h2>
<img src="" alt="">
</div>
<div>Copyright © 2013-2022 菜鸟教程 runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1</div>
</div>
</div>
</body>
</html>

120
历届学生/zheng-yuqing/每天上课/2022-04-18/笔记.txt Normal file
View File

@@ -0,0 +1,120 @@
git 代码版本控制系统
作者：
linux linus
git github web网站
开源
代码回滚
v1
v2
v3
仓库：
本地仓库
远程仓库
自己服务器搭建 git
github 全球最大的代码仓库 卖个微软 7亿美元 gitee coding
gitlab
公共仓库
私有仓库
分支：
dev 开发
test 测试
prod 正式
git init 初始化一个本地仓库
git add 选中文件 （暂存）文件名1 文件名1 xxx ....
git add -A 选中全部
git commit -m "备注的内容" 设置此次的上传备注
git pull 拉取（下载）
git push 上传 推送
git remote add origin https://gitee.com/bmycode/zheng-yuqing.git
web 开发（网站开发）
前端 负责界面，特效，功能，数据展示
html css js
后端 负责数据，安全，接口，服务器
java，php，nodejs，python，go，c#...
web 前端
html 超文本标签标记语言 人的骨骼
绘制网页的基本布局
css 层叠样式表 人的外表
美化网站的
js 运行在浏览器的脚本语言 人的思想
第一阶段 远古阶段 (html + css)
第二阶段 jquery
Node.js
第三阶段 三大框架
手机，pc网站，android ios app，桌面应用，后端，操作系统
meta
ul 重复性布局
div 一般用画网页的结构
标签分两类：
块标签
会独占一行的标签（默认宽度100%），可以通过css设置宽高属性
p h1 ~ h6 ul li div
行标签
不会独占一行的标签（默认宽度是被内容撑开的），不可以通过css设置宽高属性
img a input textarea span
在对网站进行画结构的时候要注意：
1：按照功能来划分div
2：按照分割线来画风div
3: 遵守网站的三要素 头部(header) 中间内容(content) 底部版权(footer)
注意：div 可以 替代 p 标签的所有场景
div内如果只有一个标签，那么div可以删除
作业:
https://www.readnovel.com/ 实现他的html结构和细节
https://www.ithome.com/

BIN
历届学生/zheng-yuqing/每天上课/2022-04-21/TitilliumWeb-Bold.ttf Normal file
View File

Binary file not shown.

BIN
历届学生/zheng-yuqing/每天上课/2022-04-21/TitilliumWeb-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

26
历届学生/zheng-yuqing/每天上课/2022-04-21/box.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
padding-left: 30px;
border: 20px solid;
}
</style>
</head>
<body>
<div class="box">你好</div>
</body>
</html>

132
历届学生/zheng-yuqing/每天上课/2022-04-21/demo.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 属性练习</title>
<style>
@font-face {
font-family: "TitilliumWeb";
src: url("./TitilliumWeb-Bold.ttf");
}
p {
color: red;
font-size: 30px;
font-weight: 600;
text-shadow: 4px -1px 6px #f5ff29;
letter-spacing: 15px;
font-family: TitilliumWeb;
}
a {
text-decoration: none;
}
.box {
width: 200px;
height: 200px;
background: yellow;
line-height: 200px;
text-align: center;
}
.test img {
vertical-align: middle;
}
.input {
width: 300px;
height: 45px;
border: 1px solid #000;
background: url("https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp") right center red no-repeat;
background-size: 30px;
}
.input:hover+.display {
display: block;
}
.display {
display: none;
}
.hahhdgdg {
width: 400px;
height: 400px;
font-size: 0;
}
.bo {
width: 200px;
height: 400px;
display: inline-block;
}
.left {
background: red;
}
.right {
background: blue;
}
.text_body {
width: 300px;
height: 200px;
border: 1px solid;
overflow-y: scroll;
}
</style>
</head>
<body>
<p>测试哈哈哈</p>
<a href="">你好</a>
<div class="box">
测试line-height
</div>
<div class="test">
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<span>用户名</span>
</div>
<div class="input"></div>
<div class="display">显示</div>
<div class="hahhdgdg">
<div class="bo left">1</div>
<div class="bo right">2</div>
</div>
<div class="text_body">
今天吵架，老公跟他爸妈吵，还带着我。
反正大家一起吵架。
婆婆问我为什么不给老大喂奶。我居然忘记当年她各种暗示我去上班挣钱的事情。（我的思路居然被她牵着走了。）
真的很讨厌婆婆，虽然她带娃，但真的感激不起来。
就连我老公吵着吵着，就说这是你们婆媳两个之间的事，不要把事情往他身上扯，意思就是跟他无关。
公公也附和，说我老公夹在中间左右为难。说让我理解下。说他们没文化巴拉巴拉的。
直到今天，我才发现每个人都是站在自己的立场上。
婆婆总是说自己付出了什么，牺牲了什么，道德绑架我们，反正就是说没良心之类的。她从来不觉得自己做错了什么。
</body>
</html>

3
历届学生/zheng-yuqing/每天上课/2022-04-21/index.css Normal file
View File

@@ -0,0 +1,3 @@
p {
color: greenyellow;
}

79
历届学生/zheng-yuqing/每天上课/2022-04-21/index.html Normal file
View File

@@ -0,0 +1,79 @@
<!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>
.main p{
font-size: 30px;
}
.main p + span {
color: blue;
}
.main h1:hover p{
color: red;
}
.main input:focus {
width: 500px;
}
/* .main ul li:first-child {
font-size: 25px;
}
.main ul li:last-child {
font-size: 18px;
} */
.main ul li:nth-child(3n+2) {
color: red;
}
h3::before {
content: "其他 ";
}
h3::after {
content: " after";
}
</style>
</head>
<body>
<h3>哈哈哈哈哒哒哒</h3>
<div class="main">
<h1>
哈哈哈哈
<p>标题1</p>
<p>标题2</p>
</h1>
<img src="" alt="">
<span>dddd</span>
<input type="text" placeholder="输入用户">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
</ul>
<img src="" alt="">
</div>
</body>
</html>

107
历届学生/zheng-yuqing/每天上课/2022-04-21/笔记.txt Normal file
View File

@@ -0,0 +1,107 @@
css 层叠样式表
美化html（网站）的
写法，三种写法：
内联写法 优先级最高
<p style="color: red;">你好</p>
内部写法
外链写法
改变优先级：!important
css选择器 {
css属性名: css值;
}
css选择器:
标签选择器
class（.） 选择器
id（#） 选择器 基本不用
，表示多选
空格 表格嵌套（父子）关系
> 选择父元素内部最近的子元素
+ 选择同级
通配符选择器 （*） 选中网页上所有标签（body）
用途：清除浏览器标签自带的样式
伪类选择器：
:hover
盒子模型：内边距（padding） 外边距（margin） 内容（content） 边框（border）
什么叫盒子模型？
宽度计算规则：
标准盒子模型：
元素的真实宽高 = 你的写的宽度 + 左右内边距和左右边框 x 你的写的高度 + 上下内边距和上下边框
怪异盒子模型（IE）
box-sizing: border-box;
/* margin: 20px; 四个方向的距离 上 右 下 左 */
/* margin: 20px 30px; 上下 左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 5px 10px 15px 20px; 上 右 下 左 */
/* margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px; */
padding-left: 30px;
padding-top: 20px;
/* border: 13px solid #161616; */
/* border-left: 13px solid blue;
border-right: 13px solid #161616;
border-top: 13px solid green;
border-bottom: 13px solid yellow; */
/* border-left-width: 13px;
border-left-style: solid;
border-left-color: aquamarine; */
css 属性记录：
text-decoration 设置文字的线条，一般用在a上
line-height 设置行高，一般用于 块标签内部单行文字的垂直居中
text-align 设置x轴对齐方式 ，一般用于 块标签内部文字的对齐方式
margin: 0 auto: 一个块标签在另外一个块标签中居中
vertical-align 设置y轴对齐方式，一般设置在高度较高的元素上
cursor 设置光标的外观
outline: none; 输入框（input button textarea）
display 主要作用是：实现块标签和行标签的转换，次要作用：实现元素显示(block)隐藏(none)
inline 行
block 块
inline-block 行内块标签
none 把元素隐藏起来
元素被设置 inline-block 后，标签之间会有一个默认的边距，这个边距需要在父元素上设置font-size 0
来消除

BIN
历届学生/zheng-yuqing/每天上课/2022-04-25/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 254 B

267
历届学生/zheng-yuqing/每天上课/2022-04-25/demo.html Normal file
View File

@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查看全部</title>
<style>
body,
input,
ul,
li {
font-size: 0;
margin: 0;
border: none;
outline: none;
list-style: none;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.all {
width: 280px;
height: 35px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid #dcdcdc;
text-align: center;
line-height: 35px;
}
.all span {
font-size: 13px;
color: #787878;
}
.all img {
width: 11px;
height: 10px;
}
.search {
width: 160px;
height: 38px;
background: #eee;
border-radius: 40px;
}
.search input {
background: #fff0;
width: 80%;
height: 100%;
padding-left: 15px;
box-sizing: border-box;
float: left;
font-size: 14px;
}
.search img {
width: 18px;
margin-top: 10px;
}
.menu {
height: 38px;
background: #96b97d;
}
.menu .center {
width: 1260px;
height: 100%;
margin: 0 auto;
}
.menu ul {
line-height: 38px;
}
.menu ul li {
font-size: 14px;
color: #fff;
float: left;
margin-right: 20px;
cursor: pointer;
}
.menu ul li:hover {
color: #e3efd9;
}
.recommend {
width: 280px;
height: 330px;
}
.recommend .title {
margin-bottom: 20px;
}
.title .text {
font-size: 14px;
color: #969696;
}
.title .refresh img {
width: 14px;
height: 14px;
margin-top: 3px;
}
.title .refresh span {
color: #787878;
font-size: 14px;
}
.list li {
overflow: hidden;
margin-bottom: 18px;
}
.list li .head {
width: 46px;
height: 46px;
border-radius: 100%;
margin-right: 10px;
}
.list li .author {
margin-top: 4px;
width: 224px;
}
.list .author .author_title {
margin-bottom: 5px;
}
.list .author .author_title .author_name {
font-size: 14px;
color: #333;
}
.author .author_title .author_add img {
width: 13px;
height: 13px;
margin-top: 3px;
}
.author .author_title .author_add span {
font-size: 13px;
color: #42c02e;
}
.list .author .author_text {
font-size: 12px;
color: #969696;
}
</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="搜索" />
<img src="./search.png" alt="">
</div>
<div class="all">
<span>查看全部</span>
<img src="./more.png" alt="">
</div>
<div class="menu">
<div class="center">
<ul>
<li>首页</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</div>
<div class="recommend">
<div class="title auto">
<div class="text left">推荐作者</div>
<div class="refresh right">
<img src="./sx.png" alt="">
<span class="right">换一批</span>
</div>
</div>
<ul class="list">
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
</ul>
</div>
</body>
</html>

40
历届学生/zheng-yuqing/每天上课/2022-04-25/index.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: rgb(0, 255, 4);
}
.box3 {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
<div class="box3">222</div>
</body>
</html>

60
历届学生/zheng-yuqing/每天上课/2022-04-25/meun.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,body{
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.menu > li {
float: left;
margin-right: 20px;
position: relative;
}
.drop {
position: absolute;
width: 73px;
display: none;
}
.drop li {
margin: 5px 0;
}
.menu > li:hover .drop {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>
首页
</li>
<li>
分类
<ul class="drop">
<li>html学习</li>
<li>js学习</li>
<li>css学习</li>
</ul>
</li>
<li>
我的
<ul class="drop">
<li>我的1</li>
<li>我的2</li>
<li>我的3</li>
</ul>
</li>
</ul>
</body>
</html>

BIN
历届学生/zheng-yuqing/每天上课/2022-04-25/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 B

69
历届学生/zheng-yuqing/每天上课/2022-04-25/posititons.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
height: 3000px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 273px;
top: 37px;
}
.box_2 {
background: blue;
position: relative;
}
.box_2_1 {
width: 100px;
height: 100px;
background: #000;
position: absolute;
left: 121px;
top: 7px;
}
.box_3 {
background: yellow;
}
.box_4 {
background: green;
position: fixed;
right: 0;
bottom: 0;
}
.box_5 {
background: plum;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2">
<div class="box_2_1"></div>
</div>
<div class="box box_3"></div>
<div class="box box_4"></div>
<div class="box box_5"></div>
</body>
</html>

BIN
历届学生/zheng-yuqing/每天上课/2022-04-25/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/zheng-yuqing/每天上课/2022-04-25/sx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

31
历届学生/zheng-yuqing/每天上课/2022-04-25/vwvh.html Normal file
View File

@@ -0,0 +1,31 @@
<!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>
body {
margin: 0;
padding: 0;
}
.main {
height: 100%;
}
.box {
width: 100%;
height: 100vh;
background: red;
}
</style>
</head>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
</html>

56
历届学生/zheng-yuqing/每天上课/2022-04-25/笔记.txt Normal file
View File

@@ -0,0 +1,56 @@
浮动 float：
作用：让块元素排列在一行
display: inline-block
问题：元素之间有边距
清除 font-size: 0
问题：
元素漂浮离开后，原本位置被删除，下面的元素会钻上去，产生覆盖
解决方案：
1：设置父元素的高度
2：在父元素上设置 overflow: hidden;
3：在浮动元素的后面元素上设置 clear: both;
元素漂浮离开后，原本位置被删除，父容器将没有高度
定位：
三种定位
相对定位 relative
当元素被设置相对定位后，元素的原本位置没有被删除，他的定位参考对象是他原本的位置
绝对定位 absolute
当元素被设置绝对定位后，元素的原本位置就被删除
他的定位参考对象：
他的父元素是否已定位？
如果已定位：那么参考父元素的位置来
如果没定位：参考浏览器边框来
实际使用：
子元素设置 absolute，一般父元素都有个 relative
固定定位 fixed
当元素被设置固定定位后，元素的原本位置就被删除
他的定位参考对象就是浏览器边框
明天课程说 定位
案例：下拉菜单

70
历届学生/zheng-yuqing/每天上课/2022-04-30/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
width: 250px;
transition: all 2s cubic-bezier(0.7, -0.25, 0.84, 1.58);
}
input:hover {
width: 400px;
}
@keyframes an {
/* from {
width: 200px;
height: 200px;
background: red;
}
to {
width: 300px;
height: 300px;
background: blue;
border-radius: 100%;
} */
0% {
width: 200px;
height: 200px;
background: red;
}
50% {
width: 100px;
height: 100px;
background: yellow;
}
100% {
width: 300px;
height: 300px;
background: blue;
}
}
.box {
width: 200px;
height: 200px;
animation: an 3s ease infinite alternate;
}
</style>
</head>
<body>
<input type="text" placeholder="输入密码">
<div class="box"></div>
</body>
</html>

54
历届学生/zheng-yuqing/每天上课/2022-04-30/media.html Normal file
View File

@@ -0,0 +1,54 @@
<!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>媒体查询 media</title>
<style>
body {
width: 100%;
height: 100vh;
background: red;
margin: 0;
}
@media screen and (min-width: 100px) and (max-width: 500px) {
body {
background: yellow;
}
}
@media screen and (min-width: 501px) and (max-width: 1000px) {
body {
background: blue;
}
}
@media screen and (max-width: 319px) {}
@media screen and (min-width: 320px) {}
@media screen and (min-width: 360px) {}
@media screen and (min-width: 375px) {}
@media screen and (min-width: 414px) {}
@media screen and (min-width: 600px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {}
</style>
</head>
<body>
</body>
</html>

48
历届学生/zheng-yuqing/每天上课/2022-04-30/rem.html Normal file
View File

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

48
历届学生/zheng-yuqing/每天上课/2022-04-30/笔记.txt Normal file
View File

@@ -0,0 +1,48 @@
平滑过渡：
transform:
translate 让元素在 x，y轴上进行移动
rotate 让元素旋转一定的角度
rotateX
rotateY
scale 让元素进行放大缩小 x ，y
skew 斜切 x， y
媒体查询
@media
rem 新的尺寸单位 实现尺寸的动态适配
% px vw vh
rem 是参考网页 html 上的 font-size 来动态计算的
你写的rem * html 上的 font-size = 真实的尺寸
动态修改 html 上的 font-size
1 媒体查询 @media
2 js实现
布局的动态适配
display: flex

46
历届学生/zheng-yuqing/每天上课/2022-05-03/index.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
body,
ul,
li {
margin: 0;
list-style: none;
padding: 0;
}
ul {
display: flex;
height: 45px;
background: #8d8d8d;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
li {
width: 25%;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>社会</li>
<li>军事</li>
<li>体育</li>
<li>政治</li>
<li>科技</li>
<li>热点</li>
<li>实时</li>
</ul>
</body>
</html>

32
历届学生/zheng-yuqing/每天上课/2022-05-03/笔记.txt Normal file
View File

@@ -0,0 +1,32 @@
布局的动态适配
display: flex
作用：快速让页面实现居中对齐的（浏览器自动帮我们对齐）
总共13个css属性
display: flex 开启弹性盒子
注意：1 在你想设置对齐子元素的最近的那个父元素上开启
2 父元素如果开启弹性盒子，那么子元素的float、clear和vertical-align将失效
3 父元素如果开启了弹性盒子，子元素如果没有设置高度，那么子元素的高度默认继承父元素
6个应用在父元素上的
align-items: center; 设置Y轴对齐的
justify-content: space-between; 设置X轴对齐的
flex-wrap: wrap; 设置一行放不下的时候，是否换行（注意：需要手动指定一行放多少个）
flex-direction 设置元素的排列方向（默认是row 横放）
注意：如果设置了 column
那么 align-items 和 justify-content 作用将相互颠倒
align-content 如果有多行子元素，那么使用这个属性进行对齐
6个应用在子元素上的
order 设置子元素的排列顺序，数值越小越靠前
flex-shrink: 0; 让子元素在空间不足的时候不缩小
一般实现横向滑动
flex-grow 定义子元素的放大比例
flex 是 flex-grow flex-shrink flex-basis 的简写
flex: 1; 代指： flex-grow: 1

310
历届学生/zheng-yuqing/每天上课/2022-05-05/index.html Normal file
View File

@@ -0,0 +1,310 @@
<!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>
</style>
</head>
<body>
</body>
<script>
// console.warn("111")
// console.error("111")
// console.log(window)
// js 基础语法
// js 变量
// 变量：计算机内部用来存储数据的地方，可以被修改的
// 定义变量？
// 系统关键字： class var let const
// var 变量名称 = 变量初始数值;
// 先定义 后 使用
// var UserName;
// UserName = 100
// console.log(UserName);
// 变量名命名规则？
// 不能以数字和特殊符号(_ $)开头
// 变量名可以用中文，但是杜绝使用！！！
// 变量名区分大小写
// 变量名命名的时候要具有含义（看得懂），一般是英文翻译
// 变量名要遵守驼峰命名发
// 常量
// 不能修改的（定期的存折）
// const test = "dddd";
// console.log(test);
// es5
// es6
/*
* 你好
* njbnij
*/
// 数据类型
// 基本类型: string 字符串，boolean 布尔类型，number 数字类型，null 空，undefined 未定义
// 引用数据类型：array 数组，object 对象，function 方法
//undefined 未定义 变量定义了，但是没有赋值返回的就是undefined
// 运算符
// + ++ --
// +两边只有都是number类型，才会进行 数学 加法运算
// + 两边只要有一个是字符串类型，就会进行拼接
// var a = 1, b = "2";
// console.log(a+b);
// a++ 先使用a，然后让a自加1
// ++a 先让a自加1，然后使用a
// var a = 2, b = "2", c = 3;
// console.log(
// ( --a + (++b) ) + ( (a++) - (c--) + a ) - ( b- (--a) + (c+b--) )
// );
// console.log(
// (a++ + (--a) - (c++) ) * ( --c + (b++) + a ) - ( c * (c--) + b - a )
// );
// 赋值运算符
// += -= *= /= %=
// console.log(a+=b); // a = a+b
// = 赋值
// == 相等 只会判断数值是否一样
// === 强相等 会判断数值是否一样，还会判断 类型是否一样
// console.log( a === b );
// 逻辑运算符
// && and 条件表达式两边结果都为true，才为true
// || or 只要有一个为true，就返回true
// ! 非 取反的意思
// if 条件语句
// switch if 语句判断条件很多的时候，这时候if写起来不好看，所以换 switch
// 三目（元）运算符
// if (true) {
// console.log(true);
// } else {
// console.log(false);
// }
// 简写
// 1==2 ? console.log(true) : console.log(false);
// var type = 4
// switch (type) {
// case 1:
// console.log("1");
// break;
// case 2:
// console.log("2");
// break;
// default:
// console.log("3");
// break;
// }
// js 数组？
// 通下标来存储数据的一种方式
// var arr = new Array();
// arr[0] = 1
// arr[1] = 3
// arr[2] = 5
// var arr = new Array(1,3,5)
// var arr = [1, 3, 5, 7, 9];
// 数组还自带很多方法
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
// for(var i = 0;i< arr.length; i++) {
// console.log(arr[i]);
// }
// var a = 10;
// while (a > 20) {
// console.log(a);
// a++
// }
// do {
// console.log(a);
// a++
// } while (a > 20);
// for in 遍历对象
// 通过 key(名字) value（值） 来存储数据
// 存储的数据应该是 某个事物 具体的属性
// var obj = new Object();
// obj.name = "刘兵";
// obj.age = 18;
// var obj = new Object({ name: '刘兵', age: 18 })
// es5 是没有 class
// var obj = {
// name: '刘兵',
// age: 18,
// like: ['骑车', '编程']
// }
// console.log(obj);
// es6 class
// 面向对象的三大特征
// 封装 继承 多态
// class ren {
// name;
// age;
// like;
// eat() { }
// sleep() { }
// }
// class ren1 extends ren {
// // 构造函数，类被初始化的时候第一个默认运行的方法
// // 类参数的保存，或者默认方法的调用
// constructor(name, age, like) {
// super()
// this.name = name;
// this.age = age;
// this.like = like;
// }
// sport() { }
// getName() {
// return this.name;
// }
// }
// class ren2 extends ren {
// constructor(D,F,G) {
// super()
// this.name = D
// }
// study() { }
// }
// var aaa = new ren1("刘兵", 18, [])
// var bbb = new ren2("张三")
// console.log(bbb.name);
// console.log(aaa.getName());
// function 方法 函数
// 作用？？？
// 降低代码冗余
// 匿名方法
// function test() {
// console.log("test方法");
// }
// var test = function (par, par2, par3) {
// console.log(par, par2, par3);
// }
// var c = test;
// console.log(c);
// test("你好1", "你好2", "你好3");
// 简写 => 箭头函数 es6
// var test = (par, par2) => console.log(par, par2);
// test("你好1", "你好2");
// 作用域
// 全局作用域
// 局部作用域
// var num = 100;
// function he(a,b) {
// // 不加 var 会做 变量提升（提升到全局，变成全局变量）
// var num2 = 200;
// return a + b + num;
// }
// var c = he(10,20);
// console.log(c);
// console.log(num2);
// 回调函数 es5 的方案
// 作用？？
// 异步 一般用来处理 耗时 操作
// 同步
// function getTime(call) {
// var res = "默认数值"
// setTimeout(function() {
// res = "你好"
// call(res)
// }, 3000)
// }
// getTime( function(par) {
// console.log(par);
// } );
// function a(call) {
// call("你好")
// }
// a( function(par) {
// console.log(par);
// } )
// function a () {
// console.log(arguments);
// }
// a(1,2,3,4,5,6,7,8,9,0)
// 自执行函数
// 封装插件，避免变量污染
// (function () {
// console.log("11");
// })()
</script>
</html>

90
历届学生/zheng-yuqing/每天上课/2022-05-05/事件.html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 事件</title>
</head>
<body>
<!-- <div class="main">
<p>测试</p>
<button>点 我</button>
<h2>
<a href="">你好</a>
</h2>
</div> -->
<button class="test">点 我</button>
<!-- <button onclick="hello()">点我2</button>
<button class="ddd">点我3</button> -->
</body>
<script>
// 虚拟dom
// var main = {
// tagName: 'div',
// className: 'main',
// text: '',
// children: [
// {
// tagName: 'p',
// className: '',
// text: '测试',
// children: []
// },
// {
// tagName: 'button',
// className: '',
// text: '点 我',
// children: []
// },
// {
// tagName: 'h2',
// className: '',
// text: '',
// children: [
// {
// tagName: 'a',
// className: '',
// text: '你好',
// children: []
// }
// ]
// }
// ]
// }
// 事件
// 事件三要素
// 事件源 事件类型 事件处理函数
// 绑定事件 有三种方式
// 第二种和第三种
var buttonObject = document.querySelector(".test")
buttonObject.onclick = (event) => {
console.log(event);
alert("你点我了")
}
// function hello() {
// alert("你好")
// }
// var ddd = document.querySelector(".ddd");
// document.addEventListener('click', function() {
// alert("3")
// })
</script>
</html>

8
历届学生/zheng-yuqing/每天上课/2022-05-05/笔记.txt Normal file
View File

@@ -0,0 +1,8 @@
html css
javascript 运行在客户端浏览器上的编程语言
现在的 javascript 可以运行在终端（类似 python，java）
js 是前端语言 但 同时也是 后端编程语言

63
历届学生/zheng-yuqing/每天上课/2022-05-09/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> ajax </title>
</head>
<body>
<ul>
</ul>
</body>
<script>
// 1 拿出电话 创建一个新的 ajax对象
var ajax = new XMLHttpRequest();
// 2 输入手机号码 设置后端的接口（网址）地址
ajax.open("GET", "http://127.0.0.1/my.php")
// 3 点击拨号按钮 开始发送请求
ajax.send();
// 4 状态监听
ajax.onreadystatechange = () => {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var data = JSON.parse(ajax.response);
console.log(data);
// data.result.list.forEach(v => {
// document.querySelector("ul").innerHTML += `
// <li>
// <p>${v.title}</p>
// <img src="${v.img_src}" alt="">
// </li>
// `
// });
} else {
alert("请求失败，稍后再试")
}
}
}
</script>
<!-- <script>
function getData(res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1/index.php?callback=getData"></script> -->
</html>

105
历届学生/zheng-yuqing/每天上课/2022-05-09/笔记.txt Normal file
View File

@@ -0,0 +1,105 @@
ajax
是什么？：是一种无刷新的前后端数据交换通讯的技术
XMLHttpRequest 第一代发送ajax的方法
fetch 下一代全新的发送ajax的方法
发送的是：HTTP 请求
四种请求方式：
GET 表示的是找服务器 要 资源的意图
name '刘兵'
age 18
是把参数放在网址后面，传给后端
http://a.com/index.php?name=刘兵&age=18
POST 表示的是 给 服务器 数据的意图
是把参数放在请求体里面给后端
json（{ name: '刘兵', age: 18 }） 表单（name=刘兵&age=18）
PUT 表示的是 更新 服务器 数据的意图
DELETE 表示的是 删除 服务器 数据的意图
OPTIONS 预检查请求
ajax数据格式：
xml
json 对象，数组，对象和数组的组合
JSON.stringify 将数组或对象转换为字符串格式
JSON.parse 将字符串格式的数组或对象转换为真正的数组或对象
ajax（http） 请求
请求头
响应头
请求体
老旧：
服务端渲染
后端把网页的html直接做好后，交给浏览器来实现
（80%）后端：修改页面（20%），数据库，写功能和后端代码 10k
（20%）前端：写页面 3k
劣势：
项目里面混合了前后端多种语言，导致修改页面和增加功能的时候成本很高
现在：
前后端分离
（50%）后端：数据库，接口，后端代码 10k
|
|--- ajax（电话）
|
（50%）前端：写页面，写功能，做路由 10k
ajax 在使用的时候一般会遇到跨域错误
浏览器会对前后端的网址进行安全（同源策略CORS）检查
1：协议
2：域名
3：端口
http https ws wss file
前端：http://b.com:9090/index
后端：http://a.com:8080/api/json/index
什么叫 跨域 (绕过浏览器的同源策略)？
解决跨域：
1：后端设置cors允许跨域请求
主要实现：后端设置响应头字段 Access-Control-Allow-Origin 为 前端的访问地址
【不用了】 2：jsonp 把ajax请求的地址放到script src中，变成js资源文件请求，通过callback回调拿回数据
3: 服务端代理
A ---> B
A ----> C ---> B