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

71
历届学生/font-end-nine/每天上课/2022-06-07/flex.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>flex</title>
<style>
/* 清除浏览器默认样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
html {}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
ul {
display: flex;
height: 40px;
background: #8d8d8d;
align-items: center;
}
li {}
</style>
</head>
<body>
<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>
</body>
</html>

28
历届学生/font-end-nine/每天上课/2022-06-07/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!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: red;
transition: all 10s ease;
}
.box:hover {
height: 150px;
width: 150px;
border-radius: 100%;
background: #000;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

37
历届学生/font-end-nine/每天上课/2022-06-07/keyframes.html Normal file
View File

@@ -0,0 +1,37 @@
<!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;
border-radius: 100%;
background: red;
animation: anm 2s linear infinite;
}
@keyframes anm {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

55
历届学生/font-end-nine/每天上课/2022-06-07/笔记.txt Normal file
View File

@@ -0,0 +1,55 @@
平滑过渡
一种样式转变到另一个的时候
transform
translate() 和定位组合使用，实现元素快速的水平垂直居中
translateX
translateY
rotate() 旋转一定的度数 deg
scale() 放大和缩小元素
skew() 倾斜
matrix()
弹性盒子
在网页中实现快速布局（元素对齐，居中）
13 个css属性
display flex 开启弹性盒子 父元素上
子元素的浮动，清除浮动都将失效
7 应用在父元素上
align-items 垂直对齐
justify-content 水平对齐
flex-wrap 实现自动换行 需要手动设置一样一行能放下多少个元素
flex-direction 改变元素的排列方向
需要注意
align-items
justify-content
作用相反
align-content 多行对齐
6 应用在子元素上
order 改变元素的排列顺序 数值越小越靠前
flex-grow 元素的放大比例
flex-shrink 元素的缩小比例
flex 一般写一个数值，代表 flex-grow
flex-basis
align-self