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

48
历届学生/front-end-team-10/每天课程/2023-02-16/flex.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>flex</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
height: 45px;
align-items: center;
justify-content: space-around;
}
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>
<li>测试11</li>
<li>测试12</li>
<li>测试13</li>
<li>测试14</li>
<li>测试15</li>
</ul>
</body>
</html>

55
历届学生/front-end-team-10/每天课程/2023-02-16/index.html Normal file
View File

@@ -0,0 +1,55 @@
<!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>
body {
margin: 0;
}
html {
font-size: 100px;
}
.box {
width: 1.875rem;
height: 1.875rem;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
/* 320<?<=375 */
@media screen and (min-width: 320px) and (max-width: 375px) {
html {
font-size: 85.333px;
}
}
@media screen and (min-width: 375px) and (max-width: 413px) {
html {
font-size: 100px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 110.4px;
}
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>

55
历届学生/front-end-team-10/每天课程/2023-02-16/jsrem.html Normal file
View File

@@ -0,0 +1,55 @@
<!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>
<script type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<style>
body {
margin: 0;
}
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>

61
历届学生/front-end-team-10/每天课程/2023-02-16/媒体查询.html Normal file
View File

@@ -0,0 +1,61 @@
<!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>
/* 320 375 414 */
body {
margin: 0;
}
.box {
width: 187.5px;
height: 187.5px;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
/* 320<?375 */
@media screen and (min-width: 320px) and (max-width: 375px) {
.box {
width: 160px;
height: 160px;
}
}
@media screen and (min-width: 375px) and (max-width: 414px) {
.box {
width: 187.5px;
height: 187.5px;
}
}
@media screen and (min-width: 414px) {
.box {
width: 207px;
height: 207px;
}
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>

70
历届学生/front-end-team-10/每天课程/2023-02-16/笔记.txt Normal file
View File

@@ -0,0 +1,70 @@
1：媒体查询（响应式开发）
2：弹性盒子 + rem（手机网站的尺寸单位）
为什么需要？？？？
以前的做法：写一个pc网站，然后通过 媒体查询 技术，来兼容 pc 和 手机
媒体查询：实时检测屏幕的宽度变化，然后显示或者隐藏网页上的元素，让pc网站适配手机
现在的做法：写两个网站，一个pc，一个手机网站
pc网站
手机网站
rem:
相对的尺寸单位，为了实现尺寸上的兼容
1.875rem 你写的尺寸（rem） * html上font-size = 真实的尺寸 160px
html上font-size 需要动态去变化的
那如何变化？
媒体查询
js
弹性盒子：
布局兼容
有两个轴 ，主轴x 和 交叉轴 y
13个css属性：
7个在父元素上：
display: flex 开启弹性盒子
flex-direction 改变默认的排列方向 row column，注意 如果设置了 column，那么 align-items 和
justify-content 作用相反
flex-wrap 排不下换行（注意，子元素自己加宽度）
justify-content 设置水平居中
align-items 垂直居中
align-content 设置多行结构的 垂直居中
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
6个在子元素上：
flex-grow 定义元素的放大比例，数值越大占比越大
flex 一般设置一个数值，实际作用约等于 flex-grow
flex-shrink 定义元素的缩小比例，0 不缩放 1 默认缩放
order 排列顺序，数值越小越靠前
flex-basis
align-self 允许某个元素脱离 align-items 的规则来对齐