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

43
历届学生/吴欣阳/每天课程/2021-05-27/box.html Normal file
View File

@@ -0,0 +1,43 @@
<!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>box</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
background: red;
/* border: 1px solid #000; */
border-left: 10px solid green;
border-right: 10px solid blue;
border-top: 10px solid yellow;
border-bottom: 10px solid #000;
margin: 10px;
/* margin: 10px; 四个方向 同时设置一样的边距 */
/* margin: 10px 20px; 上下 表示左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; 上 右 下 左*/
/* margin-left: 10px; */
/* margin-right: 10px; */
/* margin-top: 10px; */
/* margin-bottom: 10px; */
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

40
历届学生/吴欣阳/每天课程/2021-05-27/display.html Normal file
View File

@@ -0,0 +1,40 @@
<!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>display</title>
<style>
/*清除标签的默认样式*/
body,
ul {
margin: 0;
}
li {
list-style: none;
}
.box_1 {
width: 200px;
height: 200px;
background: red;
display: inline-block;
}
.box_2 {
width: 200px;
height: 200px;
background: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="box_1">div标签</div>
<a href="" class="box_2">a标签</a>
<a href="" class="box_2">a标签</a>
</body>
</html>

72
历届学生/吴欣阳/每天课程/2021-05-27/float.html Normal file
View File

@@ -0,0 +1,72 @@
<!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,ul{
margin: 0;
}
li {
list-style: none;
}
.box_1 {
width: 200px;
height: 200px;
background: red;
}
.box_2 {
width: 200px;
height: 200px;
background: green;
}
.left {
float: left;
}
.box_3 {
background: blue;
color: #fff;
clear: both;
}
.box_4 {
width: 100px;
height: 100px;
background: green;
}
.menu {
overflow: hidden;
}
.menu li {
float: left;
}
</style>
</head>
<body>
<div class="box_1 left"></div>
<div class="box_2 left"></div>
<div class="box_3">dddd</div>
<ul class="menu">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
<li>测试5</li>
<li>测试6</li>
</ul>
<div class="box_4"></div>
<div class="test">
<h2>11</h2>
<h2>11</h2>
</div>
</body>
</html>

64
历届学生/吴欣阳/每天课程/2021-05-27/index.css Normal file
View File

@@ -0,0 +1,64 @@
.one {
color: blue !important;
}
.one {
color: red;
}
.two {
color: yellow;
}
.three {
color: green;
}
#test {
color: palevioletred;
}
#test {
color: teal;
}
.meun {
}
.meun ul li,
.logo h1{
color: rebeccapurple;
}
.gghh:hover {
color: green;
}
.username:focus {
background: yellow;
width: 300px;
}
.be::before {
content: "测试1 ";
}
.be::after {
content: " 测试2";
}
/* .koko li:first-child {
color: red;
}
.koko li:last-child {
color: red;
} */
.koko li:nth-child(4n) {
color: red;
}
.gl::selection {
background: yellow;
color: red;
}
.login input[placeholder="用户名"] {
background: blue;
}
.login input[placeholder="验证码"] {
background: green;
}

60
历届学生/吴欣阳/每天课程/2021-05-27/index.html Normal file
View File

@@ -0,0 +1,60 @@
<!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">
</head>
<body>
<div class="login">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="number" placeholder="手机号">
<input type="text" placeholder="验证码">
</div>
<p class="gl">测试测试测hi</p>
<ul class="koko">
<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>10</li>
</ul>
<input class="username" type="text" placeholder="请输入名称">
<h3 class="be">before and after</h3>
<!-- <p style="color: red;">测试的P标签</p> -->
<p class="one">测试的P标签1</p>
<p class="two">测试的P标签2</p>
<p class="three">测试的P标签3</p>
<div id="test">id选择器</div>
<div class="header">
<div class="logo">
<h1>2222</h1>
</div>
<div class="meun">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div class="gghh">鼠标悬浮</div>
</body>
</html>

28
历届学生/吴欣阳/每天课程/2021-05-27/居中.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>
.box {
width: 200px;
height: 200px;
background: red;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

110
历届学生/吴欣阳/每天课程/2021-05-27/笔记.txt Normal file
View File

@@ -0,0 +1,110 @@
css 做美化的（层叠样式表）
写css三种方式：
1：内联写法
2: 内部写法
css 选择器：
标签选择器
作用：一般用于清除标签的默认样式
class选择器 .
class="名字"
id选择器（不常用） #
id="名字"
区别：
1：id使用的时候不要出现重复，全局只有一次
*（通配符）选择器
作用：一般用于清除标签的默认样式
伪类选择器
hover
before after 用于绘制图标，1像素的线条
:first-child
:last-child
:nth-child
选择器 可以合写
空格 表示嵌套关系
+ 表示同级关系
> 表示嵌套关系
css 优先级
3：外链
盒子模型
margin 外边距
padding 内边距
border 边框
content 内容
盒子模型的宽高计算规则：
实际宽高（肉眼看到的） = 你设置的content 宽高 + padding 和 border
box-sizing: border-box;
改变盒子模型的计算规则：
你设置的content 宽高 = padding 和 border + content （适当减小）
浮动
目的：让块元素排在一行
float: left, right
清除浮动
clear: both;
父元素高度怎么来的？
1：大部分情况下是被子元素撑开
2：你自己设置的height
问题：
如果父元素中的子元素设置了浮动，那么父元素将没有高度 0
如何解决：
1：手写高度 height 父元素
2：清除浮动 clear: both; 父元素 下面的那个元素
3：overflow: hidden; 父元素
display：实现块标签和行标签的相互转换
inline 转换为行 可以放在一行，不能设置宽高
block 转换为块 不可以放在一行，可以设置宽高
inline-block 转换行内块标签 可以放在一行，可以设置宽高
font-size: 0
水平居中：
text-align 块div中内容的对齐方式
padding-top
margin: 0 auto; 让块div在其他div中居中
垂直对齐：
line-height 设置单行文字的垂直对齐（数值应该是当前元素的高度）
padding-top