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

59
历届学生/韩想/每日课程/202-07-28/伪类选择器.html Normal file
View File

@@ -0,0 +1,59 @@
<!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>
::selection {
background: red;
color: #fff;
}
.box_1 {
width: 100px;
height: 100px;
background: yellowgreen;
position: relative;
}
p {
position: relative;
}
.box_1::after,
p::after {
content: '';
height: 1px;
background-color: #8d8d8d;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.box_1 + div + div {
color: red;
}
a[href*="baidu"] {
color: red;
}
a[href*="xxx"] {
color: yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="box_1"></div>
<div>22222</div>
<div>44444</div>
<p>wdf</p>
<a href="www.baidu.com">1</a>
<a href="www.xxx.com">2</a>
</div>
</body>
</html>

35
历届学生/韩想/每日课程/202-07-28/响应式.html Normal file
View File

@@ -0,0 +1,35 @@
<!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_1{
width: 200px;
height: 200px;
background: red;
}
@media screen and (min-width: 750px) and (max-width: 1080px) {
.box_1 {
background-color: royalblue;
}
}
@media screen and (max-width: 749px) {
.box_1 {
background-color: green;;
}
}
</style>
</head>
<body>
<div class="box_1">
</div>
</body>
</html>

65
历届学生/韩想/每日课程/202-07-28/定位.html Normal file
View File

@@ -0,0 +1,65 @@
<!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>
body{
height: 3000px;
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
/* display: inline-block; */
}
.box-2_1 {
width: 100px;
height: 100px;
background: powderblue;
position: absolute;
left: 20px;
top: 20px;
z-index: 9;
}
.box-1 {
background: red;
position: relative;
}
.box-2 {
background: blue;
position: relative;
}
.box-3 {
position: relative;
background: yellow;
left: -100px;
top: 30px;
z-index: -1;
}
.box-4 {
background: green;
}
.box-5 {
background: palevioletred;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box box-1">1</div>
<div class="box box-2">
<div class="box-2_1"></div>
</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
</body>
</html>

21
历届学生/韩想/每日课程/202-07-28/盒子模型.html Normal file
View File

@@ -0,0 +1,21 @@
<!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>
.box {
width: 200px;
height: 200px;
padding: 10px;
background: red;
}
</style>
</head>
<body>
<div class="box">122</div>
</body>
</html>

46
历届学生/韩想/每日课程/202-07-28/笔记.txt Normal file
View File

@@ -0,0 +1,46 @@
1：盒子模型属性
外边距 margin
内边距 padding
border 边框
content 内容
盒子模型真实宽高 = （width + height）+ 内边距 + 边框
box-sizing: border-box; 去除盒子模型的计算规则，向内塌陷！！
2：定位
相对定位 relative
1: 当一个元素被设置 相对定位 后，它原本位置没有被删除
2：元素会被浮动
3: 定位参考对象是他自己的原本位置
绝对定位 absolute
1：当一个元素被设置 绝对定位 后，它原本位置被删除，其他元素将会占据它的位置
2：元素会被浮动
3：定位参考对象：
1：如果有父元素，父元素如果没有设置定位，那么参考浏览器边框定位定位
2：如果有父元素，父元素设置定位，那么参考父元素进行定位
固定定位 fixed
1： 当一个元素被设置 相对定位 后，它原本位置被删除
2：元素会被浮动
3：定位参考对象是浏览器边框
流布局
nth-child
响应式：
1：flex

48
历届学生/韩想/每日课程/202-07-28/过渡.html Normal file
View File

@@ -0,0 +1,48 @@
<!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-color: red;
transition: all 1s cubic-bezier(0.76, -0.49, 0, 1.99) 0s;
}
.box:hover {
width: 300px;
height: 300px;
}
@keyframes test {
from {
background-color: blue;
}
to {
background-color: red;
}
}
.box_2 {
width: 200px;
height: 200px;
background-color: blue;
animation: test 3s ease 1s infinite alternate forwards;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box_2 "></div>
</body>
</html>