first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/fontendsix/每日课程/2021-10-19/box.html
+++ b/历届学生/fontendsix/每日课程/2021-10-19/box.html
@@ -0,0 +1,65 @@
+<!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_1 {
+            width: 200px;
+            height: 200px;
+            background: red;
+            /* margin: 10px;  上右下左*/
+            /* margin: 10px 20px; 上下  左右*/
+            /* margin: 10px 20px 30px;  上 左右 下 */
+            /* margin: 10px 20px 30px 40px; */
+
+            /* margin-left: 30px;
+
+            padding: 10px;
+            margin-bottom: 30px; */
+
+            /* border: 10px solid blue; */
+            /* border-left: 10px solid blue; */
+            float: left;
+
+        }
+
+        .box_2 {
+            width: 200px;
+            height: 200px;
+            background: blue;
+            float: left;
+        }
+
+        .hahah {
+            width: 100px;
+            height: 100px;
+            background: black;
+        }
+
+        span {
+            border-right: 1px solid #f5f5f5;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="main">
+        <div class="box_1"></div>
+        <div class="box_2"></div>
+    </div>
+
+    <div class="hahah"></div>
+
+
+    <!-- <span>测试</span> -->
+
+    <!-- 留坑：块和行相互转换 -->
+</body>
+
+</html>
--- a/历届学生/fontendsix/每日课程/2021-10-19/index.css
+++ b/历届学生/fontendsix/每日课程/2021-10-19/index.css
@@ -0,0 +1,48 @@
+/* .one, h2 {
+    color: red;
+}
+.main h1 {
+    color: lawngreen;
+}
+
+.main a span {
+    color: blueviolet;
+} */
+
+h2 {
+    color: greenyellow !important;
+}
+
+.mouse:hover {
+    color: red;
+    font-size: 30px;
+}
+
+
+.name:focus {
+    width: 200px;
+}
+
+ul li {
+   color: red;
+}
+
+/* ul li:nth-child(2n) {
+    color: black;
+} */
+
+ul li:first-child {
+    color: black;
+}
+
+ul li:last-child {
+    color: black;
+}
+
+.insert::before {
+    content: "——     ";
+}
+
+.insert::after {
+    content: "     ——";
+}
--- a/历届学生/fontendsix/每日课程/2021-10-19/index.html
+++ b/历届学生/fontendsix/每日课程/2021-10-19/index.html
@@ -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>css 学习</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    
+
+
+    <p class="one">测试1</p>
+    <p class="two">测试2</p>
+
+    <h2>标题2</h2>
+
+    <h1>标题1-1</h1>
+
+    <div class="main">
+        <span>span11</span>
+        <h1>标题1-2
+            <a href="">
+                <span>span</span>
+            </a>
+        </h1>
+    </div>
+
+
+    <div class="mouse">测试鼠标放上</div>
+
+    <input type="text" class="name">
+
+
+    <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>
+    </ul>
+
+
+    <div class="insert">哈哈哈哈哈</div>
+
+
+</body>
+
+
+</html>
+
--- a/历届学生/fontendsix/每日课程/2021-10-19/笔记.txt
+++ b/历届学生/fontendsix/每日课程/2021-10-19/笔记.txt
@@ -0,0 +1,125 @@
+css：
+
+三种写法
+
+  内联
+
+  内部
+
+  外链
+
+ 
+
+ 语法：
+
+   css属性名称: css属性数值;
+
+
+ 选择器：
+
+   class（类） .   选择器  class="test"  .test
+   id（）选择器 #   id="test"   #test
+
+   区别：
+     1: id选择器的优先级高于class选择器
+     2：id选择器是用来标识唯一性的，一般不会去重复使用
+
+
+   * （通配符）选择器  选中所有的标签，来设置你的样式
+
+   标签 选择器
+
+
+   选择器类型, 选择器类型, 选择器类型, ..... {
+       css属性名称: css属性数值;
+   }
+
+
+   伪类选择器
+     
+
+
+  父 选择器类型   子 选择器类型  :  表示父子嵌套
+
+   选择器类型, 选择器类型  ：同时选中多个
+     
+   
+
+../ 表示当前文件夹的上一层
+./  表示当前文件夹
+/   表示根路径
+
+
+css属性记录：
+
+  !important  提升css属性的优先级
+
+
+nth-child (): 
+使用公式（an+ b）.描述：a代表一个循环的大小，
+N是一个计数器（从0开始），以及b是偏移量。  
+
+
+
+盒子模型：
+
+  外边距  margin
+  内边距  padding
+  边框    border
+  内容    content
+
+  真实高度的计算规则：
+
+   真实高度 = 你写的宽高 + 边距 + 边框
+
+  box-sizing: border-box;  改变盒子模式的计算规则 
+
+
+把块元素放一行：
+
+ 1：display: block;  
+     block 块
+     inline 行
+     inline-block 行内块级
+
+ 2：浮动 float    
+    left
+    right
+
+    问题：元素设置浮动后，将从文档流中脱离，他原本位置被删除，会导致父元素没有高度，
+    那么紧接着在父元素后面的内容，就会挤过去。 
+
+      解决：    
+        clear: both;  加在 父元素后面的内容
+        overflow: hidden;  加载 父元素上，自动设置高度
+        height  手动设置高度
+
+
+       
+line-height: 行高  只针对块标签 
+
+  设置文本段落的垂直行高
+
+  设置当行文本的垂直居中
+
+
+居中的各种方式
+
+ 1：一个具有宽度块标签想在另外一个元素内部居中
+    margin: 0 auto;
+
+ 2：单行文本的居中line-height，数值应该是你想要居中的父元素的高度
+
+ 3: 被定位的元素如何设置垂直水平居中？
+    移动50%，然后 margin 减去自身宽度或者高度的一半
+
+    top: 50%;
+
+
+    margin-top: calc(-12px / 2);
+    选择一个，一般都是下面的
+    transform: translateY(-50%);
+
+ 4: 元素内部的文字水平居中，可以使用text-align: center;   
+
+ 5: 设置两个行内标签的对齐，选中高的元素 设置 vertical-align