Merge remote-tracking branch 'origin/main'

Author: MakiseCrise

DemoJustLuGuo_FullStack_Compass.md

@@ -85,6 +85,24 @@ Iinoni.，粉丝简称真夜中）[1]又称ZUTOMAYO（日语：ずとまよ）
 </div>
 ```
 
+### 02.13
+#### 学习时长：1小时
 
-
+补上之前没学的东西，姑且是把基本类型的选择器和盒子玩懂了，用CSS完善了一下目前做的网页。但是排版还是很构思
+```html
+        a:hover{
+            color: blue;
+        }
+        a{
+            display: block;
+            background-color: orange;
+            color: white;
+            text-decoration: none;
+            width: 200px;height: 200px;
+            text-align: center;
+            line-height: 200px;
+            font-size: 18px;
+        }
+```
+写了一个很简单的超链接标签的CSS代码，作为选择器放在head的话确实比直接在body中的标签引入要好看的多，也有可能是我的写法太丑陋了（
 <!-- Content_END -->

README.md

@@ -129,15 +129,15 @@ SaaS、Typescript、React、Nextjs、Taildwindcss、MDX、Linaria、Shiki、Reac
 <!-- START_COMMIT_TABLE -->
 |  | 2.03 | 2.04 | 2.05 | 2.06 | 2.07 | 2.08 | 2.09 | 2.10 | 2.11 | 2.12 | 2.13 | 2.14 | 2.15 | 2.16 | 2.17 | 2.18 | 2.19 | 2.20 | 2.21 | 2.22 | 2.23 |
 | ------------- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
-| echozyr2001 | ✅ | ✅ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | | | | |
+| echozyr2001 | ✅ | ✅ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ |   | | | | | | | | | |
 | Kirov7 | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ❌ | | | | | | | | | | | | | | | |
-| Hoshino | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | | | | |
-| RisingGalaxy | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | | | | |
-| YamKH514 | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ |   | | | | | | | | | | |
-| DriveFLY | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | | | | |
-| Makise | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ |   | | | | | | | | | | |
-| DemoJustLuGuo | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ |   | | | | | | | | | | |
-| AmberHeart | ✅ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ | | | | | | | | | | |
+| Hoshino | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | | | |
+| RisingGalaxy | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | | | |
+| YamKH514 | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ |   | | | | | | | | | |
+| DriveFLY | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ |   | | | | | | | | | |
+| Makise | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ |   | | | | | | | | | |
+| DemoJustLuGuo | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ✅ |   | | | | | | | | | |
+| AmberHeart | ✅ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ |   | | | | | | | | | |
 <!-- END_COMMIT_TABLE -->
 
 ## 数据统计

echozyr2001_FullStack_Compass.md

@@ -78,4 +78,50 @@
 
 最近在忙工作上的事，今天抽空暂时就做到这。
 
+### 02.13
+
+> 学习时间：60 min
+
+使用里一段时间 `framer` 发现它确实有很多实用的特效和动画效果，但是和 `figma` 想比，它有一个很大的缺点：不能导出成代码。
+
+`framer` 只能通过 publish 的方式发布设计的页面，这很方便，但是依赖 `framer` 官方，且缺少可定制性。
+
+接下来还是回到 `figma` 的使用上吧。
+
+---
+
+字体最好设置在 `16px` 到 `18px` 之间
+
+选择一个 `layer` 使用快捷键 `Shift + a` 可以将 `layer` 转换为 `frame`
+
+将 `frame` 的布局设置为 `Hug` 可以自动适应页面布局
+
+快捷键 `opt + cmd + k` 可以将 `frame` 转换为一个组件
+
+---
+
+创建可交互式组件
+
+命名规则 `button/default/unsaved`
+
+> 为什么要使用斜线分隔的命名系统？
+>
+> 使用斜杠 ( / ) 构造组件名称可让您快速设置组件的属性值。第一个斜杠之前的任何文本都将成为组件名称，并且每个额外的斜杠级别都会创建一个新属性，该属性将应用于组件集中的所有变体。例如，我们的按钮名称为 button/default/unsaved。
+>
+> 添加一个变体后，组件集将看起来像：
+>
+> Component set name: button
+>
+> Property 1: default
+>
+> Property 2: unsaved
+>
+> 要完成配置，我们需要更新属性名称并为组件集中的每个变体添加属性值。
+
+![interactive](./images/echozyr2001/interactive.png)
+
+![layer](./images/echozyr2001/layer.png)
+
+![animation](./images/echozyr2001/animation.png)
+
 <!-- Content_END -->