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

53
历届学生/陈一航/2020-03-13/demo/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照腾讯新闻导航条</title>
<style>
body,li,a,ul{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.menu {
width: 100%;
height: 79px;
border-bottom: 1px solid #ebebeb;
}
.menu ul {
line-height: 79px;
padding-left: 40px;
}
.menu li {
float: left;
margin-right: 15px;
}
.menu li a{
color: #333;
font-size: 18px;
}
.active {
border-bottom: 3px solid #4889f3;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li class="active"><a href="">要闻</a></li>
<li><a href="">要闻1</a></li>
<li><a href="">要闻2</a></li>
<li><a href="">要闻3</a></li>
<li><a href="">要闻4</a></li>
<li><a href="">要闻5</a></li>
<li><a href="">要闻6</a></li>
<li><a href="">要闻7</a></li>
</ul>
</div>
</body>
</html>

42
历届学生/陈一航/2020-03-13/index.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
ul li {
list-style: none;
}
.box {
display: inline-block;
}
.box-1 {
width: 80px;
height: 80px;
overflow: scroll;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<a href="">测试</a>
<div class="box">div1</div>
<div class="box">div2</div>
<div class="box-1">
是计划表锯口费VB二级很方便是解放碑是继而被不就好是计划表锯口费VB二级很方便是解放碑是继而被不就好是计划表锯口费VB二级很方便是解放碑是继而被不就好是计划表锯口费VB二级很方便是解放碑是继而被不就好
</div>
</body>
</html>

58
历届学生/陈一航/2020-03-13/position.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body {
margin: 0;
height: 2000px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box-1 {
background: red;
position: relative;
left: 40px;
top: 18px;
z-index: -1;
}
.box-2 {
background: yellow;
position: absolute;
z-index: -3;
}
.box-3 {
background: green;
position: relative;
}
.box-3-1 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: -30px;
top: 140px;
z-index: -1;
}
.box-4 {
position: fixed;
right: 0;
bottom: 0;
background: palevioletred;
}
</style>
</head>
<body>
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">
<div class="box-3-1">3-1</div>
</div>
<div class="box box-4">4</div>
</body>
</html>

34
历届学生/陈一航/2020-03-13/盒子.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #8d8d8d;
/* padding: 10px; */
/* padding: 10px; 上右下左四个方向内边距都为10px*/
/* padding: 10px 20px; 上下为10px 左右为20px*/
/* padding: 10px 30px 20px; 上10px 左右30px 下20px */
padding: 10px 20px 30px 40px;
/* margin: 10px; */
/* margin-left: ;
margin-top: ;
margin-right: ;
margin-bottom: ; */
margin-left: 30px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">盒子模型</div>
<a href="">的文档无</a>
</body>
</html>

42
历届学生/陈一航/2020-03-13/笔记.txt Normal file
View File

@@ -0,0 +1,42 @@
盒子模型：
1: 宽高
2: 边框 border
3：内边距 padding
4：外边距 margin
5：content内容
盒子模型真实宽高 = 宽 + border(左右) + padding（左右） x 高 + border(上下) + padding（上下）
box-sizing
定位：position
1：相对定位 relative
元素被设置 相对定位 后，不会脱离文档流，他原本位置还在。
定位参考对象：
1：他原本的位置（左上角）
2：绝对定位 absolute
元素被设置 绝对定位 后，会脱离文档流，他原本位置不在，被其他元素占据。
定位参考对象：
1：如果绝对定位的元素有父元素
1.1: 父元素已经定位,那么参考父元素的初始位置进行定位参考
1.2: 父元素没有定位, 那么参考浏览器边框进行定位
3：固定定位 fixed
元素被设置 绝对定位 后，会脱离文档流，他原本位置不在，被其他元素占据。
定位参考对象：
永远参考浏览器进行定位
4：默认定位
就是浏览器的默认文档流，自上向下
z-index: 设置定位元素的层级
数值越小，越向下
反之向上