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

34
历届学生/front-end-team/每天课程/2022-03-04/box.html Normal file
View File

@@ -0,0 +1,34 @@
<!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: 100%;
background: red;
/* margin: 10px; 上右下左 */
/* margin: 10px 20px; 上下 左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; */
/* margin-left: 30px; */
padding: 10px;
/* border: 20px solid #000; */
/* border-left: 5px solid blue ; */
}
</style>
</head>
<body>
<div class="box">
你好
</div>
</body>
</html>

3
历届学生/front-end-team/每天课程/2022-03-04/index.css Normal file
View File

@@ -0,0 +1,3 @@
h1 {
color: plum !important;
}

21
历届学生/front-end-team/每天课程/2022-03-04/index.html Normal file
View File

@@ -0,0 +1,21 @@
<!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>
h1 {
color: blue !important;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>你好1</h1>
</body>
</html>

73
历届学生/front-end-team/每天课程/2022-03-04/select.html Normal file
View File

@@ -0,0 +1,73 @@
<!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>
.left span {
color: red;
}
.menu li:first-child,
.menu li:last-child {
color: green;
}
.menu li:nth-child(3n) {
color: royalblue;
}
.test>p {
color: bisque;
}
.test h2 p {
color: blue;
}
.right:hover {
background: red;
}
</style>
</head>
<body>
<div class="header">
<div class="center">
<div class="left">
<img src="" alt="">
<span>头部1</span>
<span>头部2</span>
</div>
<div class="test">
<p>1</p>
<h2>
<p>3</p>
</h2>
</div>
<ul class="menu">
<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>
<div class="right">登录 | 注册</div>
</div>
</div>
</body>
</html>

18
历届学生/front-end-team/每天课程/2022-03-04/test.html Normal file
View File

@@ -0,0 +1,18 @@
<!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>
p {
color: red;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>

155
历届学生/front-end-team/每天课程/2022-03-04/笔记.txt Normal file
View File

@@ -0,0 +1,155 @@
css 层叠样式表
写法：
1：内部写法 优先级最高
写在开始标签上
<p style="color:red;"></p>
2：内链写法
<heade>
...
<style>
p {
color: red;
}
</style>
</heade>
3：外链写法
css结构
选择器 {
css属性名: css属性值;
css属性名: css属性值;
css属性名: css属性值;
css属性名: css属性值;
}
11111111111111
选择器 (暂留坑)
标签（标签名）选择器
class 类选择器 .类名称
* 通配符 选择器 （优先级最低） 用来 清除 标签自带 的样式
id 选择器 #id名称
伪类选择器 :xxxxxx
111111111111111
css 优先级
!important 可以让元素的优先级最高
路径：
绝对路径
C:\Users\bmy\Desktop\front-end-team\每天课程\index.css
相对路径
C:\Users\bmy\Desktop\front-end-team\每天课程\2022-03-04\index.css
/ 根路径 C:\
./ 当前路径
../ 上一级
注意事项：
1：避免使用公共类名 选中 标签
盒子模型
外边距 margin
内边距 padding
边框 border
内容 content
标准盒子模型：
元素的真实宽度 = 你写的 （宽度+左右padding+左右边框） + 高 （上下内边距+上下边框）
怪异盒子模型：
box-sizing: border-box;
常用css 属性：
list-style: none; 清除 li 标签的小圆点
text-decoration: none; 清除 a 标签的下划线
display:
inline 行内标签
block 块标签
inline-block 行内块标签
none 隐藏元素
font-size 字体大小
background 背景色
outline: none; 清除 input button 外边框
border-radius 圆角
overflow：设置子元素宽高 超过 父元素 宽高后 如何显示
scroll 超过部分，以滚动的显示展示
hidden
居中的一些方式：
水平居中：
块标签的居中 margin: 0 auto;
必须在子元素上设置宽度
块标签内部行标签(文字) text-align: center;
垂直居中：
单行文字（行标签 & 文字）在父标签内部垂直居中 line-height: 就是父标签的高度
两个行内标签进行相互对其的时候使用的： vertical-align: bottom;
被定位的元素，如何设置垂直水平居中？？？
元素设置 50% 距离，然后margin 减去自身宽度或者高度的一半
left: 50%;
margin-left: -8px
calc 数学计算函数，可以进行加减乘除运算