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

61
历届学生/fontendsix/每日课程/2021-10-26/demo.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>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
.header {
background: red;
height: 45px;
position: fixed;
width: 100%;
top: 0;
}
.footer {
background: blue;
height: 50px;
position: fixed;
width: 100%;
bottom: 0;
}
.content {
height: calc(100vh - 45px - 50px);
margin-top: 45px;
display: flex;
}
.test {
flex: 1;
}
.main {
flex: 5;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="test">dsdw</div>
<div class="main">
<h2>ddd</h2>
</div>
</div>
<div class="footer"></div>
</body>
</html>

164
历届学生/fontendsix/每日课程/2021-10-26/demo2.html Normal file
View File

@@ -0,0 +1,164 @@
<!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,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background: red;
height: 45px;
}
.footer {
background: blue;
height: 50px;
}
.content {
overflow-y: scroll;
background: yellow;
flex: 1;
}
@media screen and (min-width: 375px) {
body {
width: 375px;
margin: 0 auto;
}
}
.content::-webkit-scrollbar {
width: 0;
height: 0;
background-color: #f5f5f500;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content">
<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>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>

48
历届学生/fontendsix/每日课程/2021-10-26/index.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>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
ul {
display: flex;
justify-content: space-around;
height: 40px;
background: red;
align-items: center;
/* flex-wrap: wrap; */
}
li {
/* width: 20%; */
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>社会</li>
<li>财经</li>
<li>军事</li>
<li>科技</li>
<li>体育</li>
<li>娱乐</li>
<li>政治</li>
<li>名生</li>
<li>百科</li>
</ul>
</body>
</html>

54
历届学生/fontendsix/每日课程/2021-10-26/rem.html Normal file
View File

@@ -0,0 +1,54 @@
<!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>
body {
margin: 0;
}
.mian {
display: flex;
flex-wrap: wrap;
}
.box {
width: 1.875rem;
height: 1.875rem;
}
.box_1 {
background: red;
}
.box_2 {
background: blue;
}
</style>
</head>
<body>
<div class="mian">
<div class="box box_1"></div>
<div class="box box_2"></div>
</div>
</body>
</html>

22
历届学生/fontendsix/每日课程/2021-10-26/作业.txt Normal file
View File

@@ -0,0 +1,22 @@
任务：
蔡敏:
1 (33).psd
1 (58).psd
1 (128).psd
计梦梦:
1 (22).psd
1 (64).psd
1 (85).psd
陶瑞:
1 (4).psd
1 (39).psd
1 (102).psd
王安民:
1 (20).psd
1 (53).psd
1 (1).psd

43
历届学生/fontendsix/每日课程/2021-10-26/笔记.txt Normal file
View File

@@ -0,0 +1,43 @@
移动端兼容：
布局兼容
1：媒体查询
2：flex
尺寸兼容
1：100%
2: rem
2 * 50
真实的尺寸 = 你写的rem数值 * html上的基准数值（font-size）
flex
新布局方式，可以实现更多的多终端兼容效果
13 css属性
display: flex
应用在父元素上 6个
justify-content 设置元素在 X 轴上的对齐方式
flex-wrap 设置元素一行放不下的时候是否换行
align-content 设置元素在 Y 轴上的对齐方式（多行）
align-items 设置元素在 Y 轴上的对齐方式（单行）
flex-direction 设置元素的排列方向，注意如果设置了column（垂直），那么 justify-content 和 align-items
作用相反。
flex-flow: flex-direction flex-wrap
应用在子元素上 6个
order: 设置元素的顺序，数值越小越靠前
flex-basis 设置元素的宽度，类似width
align-self
flex-grow 设置元素的放大比例，数值越大，所占空间越大
flex-shrink 设置元素的缩小比例，数值0，不缩放
flex: none(flex-grow) | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]