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

29
历届学生/韩一伟/每天课程/2021-06-18/box.html Normal file
View File

@@ -0,0 +1,29 @@
<!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 {
margin: 0;
}
.box {
width: 100px;
height: 100px;
background: red;
/* margin: 10px; 表示同时设置上右下左四个方向 */
/* margin: 10px 20px; 上下 左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; 上 右 下 左 */
padding: 20px;
/* border: 10px solid #000; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

58
历届学生/韩一伟/每天课程/2021-06-18/float.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>float</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: green;
}
.box_3 {
width: 200px;
height: 200px;
border: 1px solid #000;
background: blue;
}
.text {
width: 50px;
height: 50px;
border: 1px solid #000;
overflow: scroll;
}
</style>
</head>
<body>
<div class="main">
<div class="box box_1"></div>
<div class="box box_2"></div>
</div>
<div class="box_3"></div>
<div class="text">
CSS选择器用于选择你想要的元素的样式的模式。"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。
</div>
</body>
</html>

3
历届学生/韩一伟/每天课程/2021-06-18/index.css Normal file
View File

@@ -0,0 +1,3 @@
p {
color: red;
}

63
历届学生/韩一伟/每天课程/2021-06-18/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>css</title>
<link rel="stylesheet" href="./index.css">
<style>
*
p {
color: blue;
}
h2 {
color: green;
}
#test {
color: hotpink;
}
/* .aaa li:nth-child(odd){
color: hotpink;
} */
/* .aaa li:last-child{
color: hotpink;
} */
/* .aaa li:first-child{
color: hotpink;
} */
.test:hover {
color: indigo;
}
.name:focus {
width: 300px;
}
.ceshi::before{
content: "这是before";
}
.ceshi::after{
content: "这是after";
}
</style>
</head>
<body>
<p style="color: yellow;">测试</p>
<h2 class="test">顶顶顶</h2>
<h2>顶顶顶</h2>
<ul class="aaa">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
<input class="name" type="text" placeholder="输入账户">
<div class="ceshi">测试</div>
</body>
</html>

63
历届学生/韩一伟/每天课程/2021-06-18/position.html Normal file
View File

@@ -0,0 +1,63 @@
<!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 {
margin: 0;
}
.box {
width: 100px;
height: 100px;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: green;
position: relative;
left: 17px;
top: 30px;
}
.box_3 {
background: blue;
position: relative;
}
.box_3_1 {
background: palevioletred;
width: 60px;
height: 60px;
position: absolute;
left: 27px;
top: 80px;
}
.box_4 {
background: yellow;
position: fixed;
right: 19px;
bottom: 0;
}
</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"></div>
</div>
<div class="box box_4">4</div>
</body>
</html>

101
历届学生/韩一伟/每天课程/2021-06-18/笔记.txt Normal file
View File

@@ -0,0 +1,101 @@
css 做样式（层叠样式表）
三种写法
1：内联写法 优先级最高
2: 内部写法 优先级其次
3：外链写法 优先级最低
!important 改变优先级
选择器
class选择器 class="名称" .名称
id选择器 id="名称" #名称 （淘汰了）
区别：class可以重复使用，id选择器不建议重复使用
* 通配符选择器 全部选中所有标签的意思
一般用于清除默认样式的（但是不用了）
伪类选择器
标签选择器 标签名
选择器 {
css的属性名称: css的属性值;
}
路径写法：
./ 相对路径 当前路径
../ 相对路径 上一层路径
/ 根路径
绝对路径 C:\Users\bmy\Desktop\韩一伟\每天课程\2021-06-18
css 盒子模型
外边距 margin
内边距 padding
边框 border
写法
内容 content
css 盒子模型 宽高计算规则：
真实的宽高 == 你写的宽度 + （左右内边距 + 左右边框） x 你写的高度 + （左右内边距 + 左右边框）
box-sizing: border-box; 打破盒子模型的默认计算规则
css 浮动
让元素排在一行：
display: inline-block;
inline 转化为行内
block 转化为块级
inline-block 行内块级
float 浮动
子元素浮动后，父容器将没有高度，邻近的元素将会挤过去
解决：
1：手动加高度
2：overflow: hidden;
3：放在父元素后面的一个元素上 clear: both 清除浮动
flex 弹性盒子 留坑 （移动端的时候说）
css 定位 position
1: 相对定位 relative
元素设置相对定位后，脱离文档流，但是原本位置还在
定位参考对象 就是初始位置的左上角
2：绝对定位 absolute
元素设置绝对定位后，脱离文档流，但是原本位置被删除了
定位参考对象：
1：父元素如果设置了定位(只要有)，那么相对父元素来
2：父元素如果没设置了定位(只要有)，那么参考浏览器来
3：固定定位 fixed
元素设置固定定位后，脱离文档流，但是原本位置被删除了
定位参考对象：
就是浏览器
三个都类似浮动，会飘起来