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

52
历届学生/font-end-nine/每天上课/2022-05-31/box.html Normal file
View File

@@ -0,0 +1,52 @@
<!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>index2</title>
<style>
.box {
width: 200px;
height: 200px;
display: inline-block;
/* padding: 10px; 上 右 下 左 */
/* padding: 10px 20px; 上下 左右 */
/* padding: 10px 20px 30px; 上 左右 下 */
/* padding: 10px 20px 30px 40px; 上 右 下 左 */
/* padding-left: 10px; */
/* border: 10px solid #000; */
/* border-top: 10px solid #000;
border-right: 10px solid rgb(218, 255, 10);
border-bottom: 10px solid rgb(34, 0, 255);
border-left: 10px solid rgb(15, 255, 91); */
}
.box1 {
background: red;
}
.box2 {
background: blue;
}
.main p:hover+h3 {
display: block;
}
.main h3 {
display: none;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<!-- <div class="main">
<p>悬浮我</p>
<h3>你好</h3>
</div> -->
</body>
</html>

3
历届学生/font-end-nine/每天上课/2022-05-31/index.css Normal file
View File

@@ -0,0 +1,3 @@
h2 {
color: green !important;
}

103
历届学生/font-end-nine/每天上课/2022-05-31/index.html Normal file
View File

@@ -0,0 +1,103 @@
<!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>
.one,
.three {
color: blue;
}
.two {
color: green;
}
.main > a:hover {
color: yellow;
}
input:focus {
width: 300px;
}
/* ul li:nth-child(2n + 1) {
color: rgb(55, 255, 0);
} */
ul li:first-child {
color: blue;
}
ul li:last-child {
color: rgb(255, 0, 251);
}
.test::before{
content: "before -";
}
.test::after{
content: "- after";
}
.test::selection {
background: yellow;
}
</style>
</head>
<body>
<div class="" style="color: red;font-size: 38px;">你好</div>
<h2 class="one">你好1</h2>
<h2 class="two">你好2</h2>
<h2 class="three">你好3</h2>
<h3>啊哈哈吧</h3>
<div class="main">
<h3>对对对</h3>
<a href="">你好wwww</a>
<a href="">哈哈哈</a>
<div class="test">
<a href="">哈哈哈哈a</a>
</div>
</div>
<input type="text" placeholder="输入用户名">
<p class="test">你好</p>
<ul>
<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>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
</ul>
</body>
</html>

108
历届学生/font-end-nine/每天上课/2022-05-31/笔记.txt Normal file
View File

@@ -0,0 +1,108 @@
css 层叠样式表 做美化
css 三种写法
内部写法 最高
内联写法
外链写法
写法顺序。在后面覆盖前面的
提升优先级：
!important
css 写法规则
选择器 {
css 属性名：css属性值;
css 属性名：css属性值;
css 属性名：css属性值;
}
选择器
标签选择器 清除css样式的时候用一下
类选择器 class .
id 选择器 #
默认口头约定，名字不能重复
通配符选择器 *
伪类选择器
hover
focus
选择多个
选择1, 选择器2 {
}
嵌套关系
选择1 选择器2 {
}
选择1同级最近的一个选择2
选择1 + 选择2 {
}
选中 选择1 里面最外层的选择器2
选择1>选择器2 {
}
相对路径
./ 当前路径
/ 根路径
../ 返回上一层
绝对路径
C:\Users\bmy\Desktop\fontendnine\每天上课\2022-05-31\index.css
盒子模型
具有宽高属性的标签
外边距 margin
内边距 padding
边框 border
内容
标准盒子模型
元素真实宽高 = 内容的宽高 + padding + border
怪异盒子模型（IE盒子模型）
box-sizing: border-box;
内容的宽高 = 元素真实宽高 - （ padding + border）
display:
none
inline 转化为行标签
block 转化为块标签
inline-block 转化为行内块标签 放一行