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

30
历届学生/front-end-team/每天课程/2022-03-15/媒体查询.html Normal file
View File

@@ -0,0 +1,30 @@
<!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>
@media screen and (min-width: 100px) and (max-width: 800px) {
body {
background: red;
}
h2 {
display: none;
}
}
@media screen and (min-width: 800px) {
body {
background: yellow;
}
}
</style>
</head>
<body>
<h2>你好我在pc上显示</h2>
</body>
</html>

39
历届学生/front-end-team/每天课程/2022-03-15/弹性盒子.html Normal file
View File

@@ -0,0 +1,39 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
height: 45px;
background: #e0dbdb;
align-items: center;
justify-content: space-around;
}
ul li {
}
</style>
</head>
<body>
<ul>
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
<li>首页5</li>
</ul>
</body>
</html>

49
历届学生/front-end-team/每天课程/2022-03-15/笔记.txt Normal file
View File

@@ -0,0 +1,49 @@
媒体查询（响应式）：
作用：让pc网站兼容手机屏幕
html4
html5
弹性盒子
display: flex; 开启弹性盒子 (在最近的父标签上)
只要开启：子元素全部放一行
就算这一行放不下，也放一行
子元素如果没有设置高度，那么子元素高度自动继承父元素
总共13个css属性
6个用在父元素上
align-items 设置垂直方向的对其方式 center
justify-content 设置水平方向的对其方式
flex-wrap 决定元素是否换行
在子元素上设置宽度，人为创造一行放不下的情况
flex-direction 决定元素的排列方向 column
align-items 水平方向
justify-content 垂直方向
align-content
和 align-items 作用一样，但这个是设置多行的
6个用在子元素上
flex-grow 定义元素的放大比例，
flex-shrink 让元素不缩放
flex: 就是 flex-grow 简写