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

35
历届学生/fontendseven/每天课程/2021-11-03/box.html Normal file
View File

@@ -0,0 +1,35 @@
<!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;
/* border: 10px solid red; */
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
/* margin: 50px; */
/* margin: 50px 40px; */
/* margin: 50px 30px 40px; */
/* margin: 10px 20px 30px 40px; */
/* margin-left: 50px; */
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

55
历届学生/fontendseven/每天课程/2021-11-03/float.html Normal file
View File

@@ -0,0 +1,55 @@
<!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: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
float: left;
}
.box_2 {
background: blue;
}
.box_3 {
width: 150px;
height: 150px;
background: cadetblue;
}
</style>
</head>
<body>
<div class="main">
<div class="box box_1">
</div>
<div class="box box_2">
</div>
</div>
<div class="box_3">
<span>ccwqwcq</span>
</div>
</body>
</html>

137
历届学生/fontendseven/每天课程/2021-11-03/index.html Normal file
View File

@@ -0,0 +1,137 @@
<!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>
.test, .test2 {
color: red;
}
.main h1 span{
color: yellow;
}
.demo p + span {
color: violet;
}
.demo > p {
color: tomato;
}
.htest:hover {
font-size: 40px;
}
.news li:nth-child(5n) {
color: palevioletred;
}
.news li:last-child {
color: rgb(4, 247, 17);
}
.news li:first-child {
color: rgb(247, 32, 4);
}
.username:focus {
width: 300px;
background: yellow;
}
.ba::before {
content: "before的使用";
}
.ba::after {
content: "after的使用";
}
::selection {
background: red;
color: blue;
}
.login input[placeholder="输入手机号"] {
height: 60px;
}
.login input[type="password"] {
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<h1>
<a href="">
<p>
<span>你好</span>
</p>
</a>
</h1>
<span>dwededes</span>
</div>
<div class="demo">
<p>哈哈哈1</p>
<p>哈哈哈4</p>
<span>哈哈哈2</span>
<span>
<p>ccccc</p>
</span>
</div>
<p class="test2">qdqwdwq</p>
<h2 class="test">wqdwqdqw</h2>
<div class="htest">你好</div>
<ul class="news">
<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>
<li>你好测试：8</li>
<li>你好测试：9</li>
<li>你好测试：8</li>
<li>你好测试：9</li>
<li>你好测试：8</li>
<li>你好测试：9</li>
<li>你好测试：8</li>
<li>你好测试：9</li>
<li>你好测试：10</li>
</ul>
<div class="login">
<input class="username" type="text" placeholder="输入用户名">
<input type="number" placeholder="输入手机号">
<input type="password" placeholder="输入密码">
</div>
<div class="ba">
这是测试文字
</div>
</body>
</html>

57
历届学生/fontendseven/每天课程/2021-11-03/position.html Normal file
View File

@@ -0,0 +1,57 @@
<!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: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 50px;
top: 30px;
}
.box_2 {
background: blue;
position: relative;
}
.box_2_3 {
width: 150px;
height: 150px;
background: black;
position: absolute;
left: 10px;
top: 30px;
}
.box_3 {
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
.box_4 {
background: plum;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2">
<div class="box_2_3"></div>
</div>
<div class="box box_3"></div>
<div class="box box_4"></div>
</body>
</html>

3
历届学生/fontendseven/每天课程/2021-11-03/style.css Normal file
View File

@@ -0,0 +1,3 @@
p {
color: blue !important;
}

133
历届学生/fontendseven/每天课程/2021-11-03/笔记.txt Normal file
View File

@@ -0,0 +1,133 @@
html , css, javascript (全栈 语言)
css 三种写法：
内联写法 优先级最高
内部写法
外链写法
!important 改变css默认的优先级
选择器 {
css属性名: css属性值
}
// 同时选中
选择器, 选择器 {
css属性名: css属性值
}
// 嵌套的意思，后面的选择器是前面选择器的子元素
选择器 选择器 选择器{
css属性名: css属性值
}
// 选择同级别标签
选择器 + 选择器{
css属性名: css属性值
}
// 选择父元素内部第一层子元素
选择器 > 选择器{
css属性名: css属性值
}
选择器：
class .
id #
标签选择器
通配符符选择器 * 一般用来清除标签的默认样式
伪类选择器
盒子模型
外边距 margin
内边距 padding
边框 border
border: 边框的粗细 边框的类型 边框的颜色
内容 content
盒子模型真实宽高的计算规则？？
真实宽高 = 你写的宽高（content） + 边框 + 内边距
box-sizing: border-box; 改变盒子模型的计算规则
浮动：
让元素漂浮起来，可以左右的漂浮移动
子元素 漂浮后，父容器将没有高度，那么父容器后面div将挤上去
解决方案：
1：给父容器设置高度（等于子元素高度）
2：给父容器设置 overflow: hidden; （让浏览器自动设置父容器的高度）
3: 给子元素加 clear: both;
定位：
为了让元素产生堆叠（重叠），或者放在任意一个位置！
相对定位 relative
当元素设置 相对定位 后，元素原本位置还在（没有被删除）
定位参考对象：
他原本的位置·
绝对定位 absolute
当元素设置 绝对定位 后，元素原本位置不在，被删除了
定位参考对象：
父元素设置 定位，那么参考父元素的位置（当前位置）
父元素没有设置 定位，那么参考浏览器边框
固定定位 fixed
当元素设置 固定定位 后，元素原本位置不在，被删除了
定位参考对象：
浏览器边框
calc() 支持写数学表达式
元素垂直水平居中的N中场景和N方法：
定位
水平 子元素 left 50% , margin-left: -子元素宽度一半
垂直 子元素 top 50% , margin-top: -子元素高度一半
块标签内部的文字需要：
垂直（单行文字） line-height: 数值等于父元素的高度
多行文字：padding-top: 8.86px; 父元素高度一半 - 内部子元素高度一半
水平居中 text-align: center;
块标签内部的块标签需要：
垂直: 给父元素设置 padding-top: (父元素高度 - 子元素高度) / 2 ，还需要加上： box-sizing: border-box;
水平：margin: 0 auto;
两个行内标签设置垂直方向对象：
高度高的元素：vertical-align: middle;