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
历届学生/zheng-yuqing/每天上课/2022-04-25/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 254 B

267
历届学生/zheng-yuqing/每天上课/2022-04-25/demo.html Normal file
View File

@@ -0,0 +1,267 @@
<!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>
body,
input,
ul,
li {
font-size: 0;
margin: 0;
border: none;
outline: none;
list-style: none;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.all {
width: 280px;
height: 35px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid #dcdcdc;
text-align: center;
line-height: 35px;
}
.all span {
font-size: 13px;
color: #787878;
}
.all img {
width: 11px;
height: 10px;
}
.search {
width: 160px;
height: 38px;
background: #eee;
border-radius: 40px;
}
.search input {
background: #fff0;
width: 80%;
height: 100%;
padding-left: 15px;
box-sizing: border-box;
float: left;
font-size: 14px;
}
.search img {
width: 18px;
margin-top: 10px;
}
.menu {
height: 38px;
background: #96b97d;
}
.menu .center {
width: 1260px;
height: 100%;
margin: 0 auto;
}
.menu ul {
line-height: 38px;
}
.menu ul li {
font-size: 14px;
color: #fff;
float: left;
margin-right: 20px;
cursor: pointer;
}
.menu ul li:hover {
color: #e3efd9;
}
.recommend {
width: 280px;
height: 330px;
}
.recommend .title {
margin-bottom: 20px;
}
.title .text {
font-size: 14px;
color: #969696;
}
.title .refresh img {
width: 14px;
height: 14px;
margin-top: 3px;
}
.title .refresh span {
color: #787878;
font-size: 14px;
}
.list li {
overflow: hidden;
margin-bottom: 18px;
}
.list li .head {
width: 46px;
height: 46px;
border-radius: 100%;
margin-right: 10px;
}
.list li .author {
margin-top: 4px;
width: 224px;
}
.list .author .author_title {
margin-bottom: 5px;
}
.list .author .author_title .author_name {
font-size: 14px;
color: #333;
}
.author .author_title .author_add img {
width: 13px;
height: 13px;
margin-top: 3px;
}
.author .author_title .author_add span {
font-size: 13px;
color: #42c02e;
}
.list .author .author_text {
font-size: 12px;
color: #969696;
}
</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="搜索" />
<img src="./search.png" alt="">
</div>
<div class="all">
<span>查看全部</span>
<img src="./more.png" alt="">
</div>
<div class="menu">
<div class="center">
<ul>
<li>首页</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</div>
<div class="recommend">
<div class="title auto">
<div class="text left">推荐作者</div>
<div class="refresh right">
<img src="./sx.png" alt="">
<span class="right">换一批</span>
</div>
</div>
<ul class="list">
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
</ul>
</div>
</body>
</html>

40
历届学生/zheng-yuqing/每天上课/2022-04-25/index.html Normal file
View File

@@ -0,0 +1,40 @@
<!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;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: rgb(0, 255, 4);
}
.box3 {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
<div class="box3">222</div>
</body>
</html>

60
历届学生/zheng-yuqing/每天上课/2022-04-25/meun.html Normal file
View File

@@ -0,0 +1,60 @@
<!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>
ul,body{
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.menu > li {
float: left;
margin-right: 20px;
position: relative;
}
.drop {
position: absolute;
width: 73px;
display: none;
}
.drop li {
margin: 5px 0;
}
.menu > li:hover .drop {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>
首页
</li>
<li>
分类
<ul class="drop">
<li>html学习</li>
<li>js学习</li>
<li>css学习</li>
</ul>
</li>
<li>
我的
<ul class="drop">
<li>我的1</li>
<li>我的2</li>
<li>我的3</li>
</ul>
</li>
</ul>
</body>
</html>

BIN
历届学生/zheng-yuqing/每天上课/2022-04-25/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 B

69
历届学生/zheng-yuqing/每天上课/2022-04-25/posititons.html Normal file
View File

@@ -0,0 +1,69 @@
<!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;
height: 3000px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 273px;
top: 37px;
}
.box_2 {
background: blue;
position: relative;
}
.box_2_1 {
width: 100px;
height: 100px;
background: #000;
position: absolute;
left: 121px;
top: 7px;
}
.box_3 {
background: yellow;
}
.box_4 {
background: green;
position: fixed;
right: 0;
bottom: 0;
}
.box_5 {
background: plum;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2">
<div class="box_2_1"></div>
</div>
<div class="box box_3"></div>
<div class="box box_4"></div>
<div class="box box_5"></div>
</body>
</html>

BIN
历届学生/zheng-yuqing/每天上课/2022-04-25/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/zheng-yuqing/每天上课/2022-04-25/sx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

31
历届学生/zheng-yuqing/每天上课/2022-04-25/vwvh.html Normal file
View File

@@ -0,0 +1,31 @@
<!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;
padding: 0;
}
.main {
height: 100%;
}
.box {
width: 100%;
height: 100vh;
background: red;
}
</style>
</head>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
</html>

56
历届学生/zheng-yuqing/每天上课/2022-04-25/笔记.txt Normal file
View File

@@ -0,0 +1,56 @@
浮动 float：
作用：让块元素排列在一行
display: inline-block
问题：元素之间有边距
清除 font-size: 0
问题：
元素漂浮离开后，原本位置被删除，下面的元素会钻上去，产生覆盖
解决方案：
1：设置父元素的高度
2：在父元素上设置 overflow: hidden;
3：在浮动元素的后面元素上设置 clear: both;
元素漂浮离开后，原本位置被删除，父容器将没有高度
定位：
三种定位
相对定位 relative
当元素被设置相对定位后，元素的原本位置没有被删除，他的定位参考对象是他原本的位置
绝对定位 absolute
当元素被设置绝对定位后，元素的原本位置就被删除
他的定位参考对象：
他的父元素是否已定位？
如果已定位：那么参考父元素的位置来
如果没定位：参考浏览器边框来
实际使用：
子元素设置 absolute，一般父元素都有个 relative
固定定位 fixed
当元素被设置固定定位后，元素的原本位置就被删除
他的定位参考对象就是浏览器边框
明天课程说 定位
案例：下拉菜单