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

105
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/css总结.html Normal file
View File

@@ -0,0 +1,105 @@
<!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>
.span {
width: 100px;
height: 100px;
background-color: pink;
}
.test {
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
.test:hover {
background-color: blue;
}
</style>
</head>
<body>
给html添加样式有三种:
1.行内样式
<p style="width: 100px;height: 100px;background-color:red">我是段落标签</p>
2.在head头标签里面书写style样式
<span class="span">我是span标签</span>
3.外链样式
<link rel="stylesheet" href="./test.css">
<div id="a">我是div标签</div>
选择器类型:
1.标签选择器,直接选择标签添加样式
2.class选择器,通过给标签添加class值,然后在样式使用.的方式添加样式
3.id选择器,通过给标签添加id值,然后在样式使用#的方式添加样式,口头约定id的值不能重复,与js配套使用
4.通配符选择器,*{},选择所有的标签并设置样式
5.伪类选择器,:hover鼠标经过
<p class="test">test</p>
<style>
p,
ul {
/* 同时选中p标签和ul标签 */
}
ul li {
/* 选中ul里面所有的li */
}
ul>li {
/* 作用和上面的是差不多 */
}
ul div+li {
/* 选择ul里面的div和同级最近的li(只选择第一个li) */
}
li:nth-child(2n+1) {
/* 里面的2n+1,分开来看,右边的+1代表从第一个开始,左边的2n就是隔俩个,这句话的意思就是从第一个开始,然后隔俩个 */
}
/* 从第5个开始，到最后 */
ul li:nth-child(n+5) {
width: 100px;
height: 100px;
background-color: red;
}
/* 前俩个 */
ul li:nth-child(-n+2) {
width: 100px;
height: 100px;
background-color: skyblue;
}
/* 伪元素 */
ul li:nth-child(10)::after {
content: '111';
background-color: pink;
}
</style>
<p></p>
<ul>
<div>0</div>
<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>
</ul>
</body>
</html>

5
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/test.css Normal file
View File

@@ -0,0 +1,5 @@
#a{
width: 100px;
height: 100px;
background-color: skyblue;
}

1
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/提交测试.md Normal file
View File

@@ -0,0 +1 @@
提交测试-

88
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/浮动以及定位总结.html Normal file
View File

@@ -0,0 +1,88 @@
<!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>
/* 最终的宽 = 宽(100) + 左右边框(20) + 左右内边距(20)=140
注意:margin是外边距,并不影响实际宽高,也只有它不影响宽高
但每次计算都很麻烦能不能不自己手动计算,让电脑自动计算?
答案是有的,添加box-sizing:border-box,比如你设置一个盒子宽高为100*100,无论你再怎么加padding,border,他的实际宽高都是100*100
他会根据你输入的padding和margin自动减内容*/
.a{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid blue;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="a"></div>
---------------------------------------
<!-- flot设计的初衷就是环绕文字的,所以文字不会被压在底下 -->
定位:1.相对定位 position: relative;
元素会脱离标准流,保留原来的位置不会被删除
在移动元素的时候,参照点是自己原来的位置
2.绝对定位 position: absolute;
元素会脱离标准流,不保留原来的位置
绝对定位在移动元素的时候,是看看父元素是否有定位,有就以该元素为参照点去移动,
没有就向上一级去查找,有就以该元素为参照点去移动,还没有在往上查找,如果上面都没有,就以body为参照点去移动
总结:相对定位 position: relative;是当爹的一个过程.而绝对定位 position: absolute;是找爹的过程,没找到爹就以body为爹
一般实际开发中,都是子元素绝对定位,父元素相对定位
3.固定定位 position: fixed;
固定在可视区域的摸个地方
层级 z-index:数值
注意:该数值越大,就越往上,值越小可以越往下,可以是负值哦,而且z-index是会相互影响的
思考?现在是否可以实现把红色盒子夹在俩个盒子中间?答案是不行的,
最初的想法是给a3的z-index数值最大,其次是a1的z-index数值第二大,最后是a2的z-index的数值最小
但结果是不行的,最后是以父盒子a2为准,子盒子a3继承了父盒子a2.
<style>
.a1{
width: 100px;
height: 100px;background-color: red;
float: left;
position: relative;
left: 30px;
}
.a2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
position:relative;
}
.a3{
width: 50px;
height: 50px;
background-color: pink;
float: left;
position: absolute;
left: 10px;
}
</style>
<div class="a0">
<div class="a1">a1</div>
<div class="a2">a2
<div class="a3">a3</div>
</div>
</div>
</body>
</html>

4
历届学生/逯帅帅/项目开发/学生项目/应越波/day1/问题.txt Normal file
View File

@@ -0,0 +1,4 @@
现在有三个盒子,给每个盒子添加浮动都会在一行显示,但有十个二十个每个添加浮动会很累,
为何不用一个div把他们包裹起来,给div添加一个浮动,理论上会让他们全部浮动在一行显示,为什么不行?
思考:float是否只能添加在子元素上面,不能添加在父元素上面??