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

59
历届学生/front-end-team-10/每天课程/2023-02-10/index.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>定位</title>
<style>
body {
height: 3000px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box1 {
background: red;
position: relative;
left: 20px;
top: 20px;
}
.box2 {
background: green;
position: fixed;
right: 0;
bottom: 0;
}
.box3 {
background: yellow;
position: absolute;
}
.box4 {
background: plum;
}
.box_1_1 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box box1">
<div class="box_1_1"></div>
</div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</body>
</html>

82
历届学生/front-end-team-10/每天课程/2023-02-10/定位案例.html Normal file
View File

@@ -0,0 +1,82 @@
<!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/c/font_3887737_znaz15du23n.css">
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 590px;
height: 470px;
background: url("https://img20.360buyimg.com/pop/s1180x940_jfs/t1/74001/5/24121/92985/63de1286F9b7604e3/068cbd26f08c101a.jpg");
background-size: cover;
}
.main {
position: relative;
}
.nav,
.main ul {
position: absolute;
}
.main ul {
bottom: 22px;
left: 26px;
}
.main ul li {
float: left;
width: 10px;
height: 10px;
border-radius: 100%;
background: #fff;
margin-right: 5px;
}
.nav {
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav i {
font-size: 30px;
color: #fff;
}
.icon-zuojiantou-copy {
float: right;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-zuojiantou-copy"></i>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

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

@@ -0,0 +1,25 @@
定位 position ：
主要作用就是把元素放在任意你想放的位置
z-index: 调整元素z轴的浮动层级 取值无范围，数值越大，越靠前
如果都没设置z-index，或者 z-index 都一样，那么按照顺序来堆叠，越靠后，堆的越高
相对定位 relative
当元素被设置 相对定位 后它原本的位置还在，没有被从网页上删除
它的定位参考对象是 它原本 的位置
绝对定位 absolute
当元素被设置 绝对定位 后它原本的位置不在了，从网页上被删除
它的定位参考对象：
1：如果有父元素且设置了定位(三个定位的任意一个)，那么参考父元素的位置（现在位置）来
2：反之，参考浏览器边框
固定定位 fixed
当元素被设置 绝对定位 后它原本的位置不在了，从网页上被删除
它的定位参考对象是 浏览器窗口