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

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