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

49
历届学生/18课程/class18_2/课程/2020-12-15/index.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
animation: test 0.1s ease infinite;
}
@keyframes test {
0% {
width: 200px;
height: 200px;
background: red;
}
50% {
background: yellow;
}
100% {
width: 400px;
height: 400px;
background: blue;
}
}
/* .box:hover {
width: 300px;
height: 300px;
transform: rotate(360deg);
transform: translate(50px,100px);
} */
</style>
</head>
<body>
<div class="box">www</div>
</body>
</html>

58
历届学生/18课程/class18_2/课程/2020-12-15/rem.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
padding: 0;
}
.box {
float: left;
}
.box1 {
width: 3.5rem;
height: 3.5rem;
background: blue;
}
.box2 {
width: 2rem;
height: 2rem;
background: brown;
}
.box3 {
width: 2rem;
height: 2rem;
background: yellow;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>

27
历届学生/18课程/class18_2/课程/2020-12-15/媒体查询.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width: 680px) and (max-width: 980px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 981px) and (max-width: 1200px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>