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

BIN
历届学生/吴欣阳/每天课程/2021-06-04/ele.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 667 B

47
历届学生/吴欣阳/每天课程/2021-06-04/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!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;
}
a {
text-decoration: none;
}
ul {
display: flex;
height: 40px;
background: #8d8d8d;
align-items: center;
justify-content: space-around;
}
li {
width: 20%;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>测试文字</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>

59
历届学生/吴欣阳/每天课程/2021-06-04/rem.html Normal file
View File

@@ -0,0 +1,59 @@
<!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>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>
* {
margin: 0;
padding: 0;
}
.box {
width: 2.5rem;
height: 2.5rem;
}
.main .box {
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: yellow;
}
.box_3 {
background: green;
}
</style>
</head>
<body>
<div class="main">
<div class="box box_1"></div>
<div class="box box_2"></div>
<div class="box box_3"></div>
</div>
</body>
</html>

41
历届学生/吴欣阳/每天课程/2021-06-04/笔记.txt Normal file
View File

@@ -0,0 +1,41 @@
display: flex 开启弹性盒子
弹性盒子
作用：快速布局，各种对齐，各种排列
12个属性
6个应用在父元素上
align-items 只有一行元素的时候，让子元素在父容器的Y轴中对齐 center
align-content 多行元素的时候，让多个子元素在父容器的Y轴中对齐 center
justify-content 让子元素在父容器的X轴中对齐 space-around
flex-direction 改变元素的排列方向 row(横着放) column（竖着放）
flex-wrap wrap 一行排不下的时候，自动换行
flex-flow flex-direction和flex-wrap简写
6个应用在子元素上
order 设置元素顺序，数值越小越靠前
flex-grow 通过设置比例的方式，改变元素所占空间比
flex-shrink: 0; 设置元素的缩小比例，0 表示不要缩小
flex-basis 设置元素的宽度
flex 是flex-grow, flex-shrink 和 flex-basis
一般都是写 flex: 数值 一个参数，表示设置 flex-grow
align-self 允许单个元素设置不同的对齐方式
rem
尺寸的单位，他可以动态的改变
rem 计算规则
10rem * 16px(html 上默认的font-size的数值) = 160px
font-size 改变的方式：
1：css 媒体查询 media
2：js 来计算

208
历届学生/吴欣阳/每天课程/2021-06-04/饿了么.html Normal file
View File

@@ -0,0 +1,208 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_u8lblew2pc.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-color: #f5f5f5;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
right: 0;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #d0cece;
background: #fff;
}
.footer li {
text-align: center;
}
.footer li p {
font-size: 12px;
color: #8e8e93;
}
.user_info {
background: linear-gradient(90deg, #0af, #0085ff);
height: 110px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}
.info_img {
display: flex;
align-items: center;
}
.info_img img {
width: 60px;
border-radius: 100%;
margin-right: 18px;
}
.info_name {}
.info_name h3 {
color: #fff;
}
.info_name p {
color: #fff;
font-size: 12px;
}
.user_info i {
color: #fff;
}
.active {
display: flex;
height: 83.5px;
background: #fff;
}
.active li {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border-right: 1px solid #ddd;
}
.active li:last-child {
border-right: none;
}
.active li i {
font-size: 24px;
}
.active li p {
font-size: 12px;
font-weight: 700;
color: #666
}
.menu {}
.menu li {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
padding: 0 15px;
margin-top: 10px;
background: #fff;
}
.menu .icon_left {
display: flex;
align-items: center;
}
.menu .icon_left i {}
.menu .icon_left span {
font-size: 14px;
color: #333;
margin-left: 8px;
}
.menu .icon-zhankai-copy {
color: #8e8e93;
}
</style>
</head>
<body>
<div class="content">
<div class="user_info">
<div class="info_img">
<img src="./ele.png" alt="">
<div class="info_name">
<h3>登录/注册</h3>
<p>登录后享受更多特权</p>
</div>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</div>
<ul class="active">
<li>
<i class="iconfont icon-gouwuchekong"></i>
<p>红包</p>
</li>
<li>
<i class="iconfont icon-gouwuchekong"></i>
<p>金币</p>
</li>
</ul>
<ul class="menu">
<li>
<div class="icon_left">
<i class="iconfont icon-gouwuchekong"></i>
<span>我的地址</span>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</li>
<li>
<div class="icon_left">
<i class="iconfont icon-gouwuchekong"></i>
<span>我的地址</span>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</li>
<li>
<div class="icon_left">
<i class="iconfont icon-gouwuchekong"></i>
<span>我的地址</span>
</div>
<i class=" iconfont icon-zhankai-copy"></i>
</li>
</ul>
</div>
<ul class="footer">
<li>
<i class="iconfont icon-pinglun"></i>
<p>首页</p>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<p>订单</p>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<p>我的</p>
</li>
</ul>
</body>
</html>