update:24-07-29 09:20:59 -AutoCommit

aboutCSS.md

@@ -0,0 +1,190 @@
+# 与 css 相关，多学习 css
+
+## css inset
+-   inset : top | right| bottom | left
+-   使用例：
+    ```css
+    .className {
+        inset: 4px 8px; /* 上下 | 左右 */
+        inset: 5px 15px 10px; /* 上 | 左右 | 下 */
+        inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
+    }
+    ```
+## css 过渡 transition
+-   有transition-property、transition-duration、transition-timing-function 和 transition-delay这几个属性，不过一般使用时应该都是用transition合起来写。
+-   使用例：
+
+    ```css
+    .className {
+        /* property name | duration | timing function | delay */
+        transition: margin-right 4s ease-in-out 1s;
+
+        /* Apply to 2 properties */
+        transition: margin-right 4s, color 1s;
+    }
+    ```
+
+## css 动画相关
+
+-   分为“定义”与“使用”两个阶段。
+-   “定义”阶段的 keyword 为@keyframes，例：
+
+    ```scss
+    // 每个时间点填对应时间点的style
+    @keyframes animationName {
+        0% {
+            border-radius: 1px;
+        }
+        50% {
+            border-radius: 12px;
+        }
+        100% {
+            border-radius: 123px;
+        }
+    }
+    ```
+
+-   “使用”阶段的 keyword 为 animation，使用 animation 绑定动画，例
+    ```scss
+    div {
+        animation: animationName 5s;
+    }
+    ```
+-   animation 有许多属性
+
+    ```scss
+    div {
+        // 绑定的动画名
+        animation-name: animationName;
+        // 动画执行总时长
+        animation-duration: 5s;
+        // 速度曲线。默认是 "ease"。
+        animation-timing-function: linear;
+        animation-delay: 2s;
+        // 播放次数，默认1
+        animation-iteration-count: infinite;
+        // 是否在下一个周期逆向播放
+        animation-direction: alternate;
+        // 是否正在播放（）
+        animation-play-state: running;
+        // 简写
+        animation: animationName 5s linear 2s infinite alternate;
+        // 多个动画之间使用逗号进行隔开
+        animation: a1..., a2...;
+    }
+    ```
+
+## before 与 after
+
+-   伪元素，通过 content 来指定内容，before 就是在前面，after 就是在后面（哇好有道理呢）
+-   用途一般是加个 icon 啥的，content 可以为 url(...)
+-   不能应用在替换元素上，比如 `<img>`
+-   伪元素不支持嵌套，也就是说伪元素的父元素不可以为伪元素
+    使用例：
+
+    ```css
+    a {
+        color: #0000ff;
+        text-decoration: none;
+    }
+
+    a::before {
+        content: '🔗';
+    }
+    ```
+
+-   使用 inherit 使子元素拥有与父元素相同的特定属性值
+    使用例：
+
+    ```css
+    div {
+        position: relative;
+        background: url('your-image-url.jpg');
+    }
+
+    div::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: inherit;
+        z-index: -1;
+    }
+    ```
+
+## !important 相关
+
+-   不到万不得已不要用，是不好的写法
+-   如果你的 important 不够 important,那可以写 class 的时候多写点前缀，例：
+
+    ```scss
+    // 一般
+    .ant-slider-rail {
+        background-color: rgb(141, 93, 56) !important;
+    }
+    // 优先级特别高
+    .slider .ant-slider .ant-slider-rail {
+        background-color: rgb(141, 93, 56) !important;
+    }
+    ```
+
+## xx[a=xxx]的使用
+
+-   这玩意叫属性选择器
+-   案例：
+
+    ```css
+    a {
+        color: blue;
+    }
+
+    /* 以 "#" 开头的页面内部链接 */
+    a[href^='#'] {
+        background-color: gold;
+    }
+
+    /* 包含 "example" 的链接 */
+    a[href*='example'] {
+        background-color: silver;
+    }
+
+    /* 包含 "insensitive" 的链接，不区分大小写 */
+    a[href*='insensitive' i] {
+        color: cyan;
+    }
+
+    /* 包含 "cAsE" 的链接，区分大小写 */
+    a[href*='cAsE' s] {
+        color: pink;
+    }
+
+    /* 以 ".org" 结尾的链接 */
+    a[href$='.org'] {
+        color: red;
+    }
+
+    /* 以 "https" 开始，".org" 结尾的链接 */
+    a[href^='https'][href$='.org'] {
+        color: green;
+    }
+    ```
+
+    -   属性不一定要是 href 什么的，自己定也没关系。
+    -   案例：
+
+    ```css
+    /* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
+    div[lang] {
+        font-weight: bold;
+    }
+
+    /* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 */
+    div[lang~='en-us'] {
+        color: blue;
+    }
+
+    /* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
+    div[lang='pt'] {
+        color: green;
+    }
+    ```

todoList.md

@@ -1,5 +1,39 @@
 ## 记录在星网的每日目标
 
+
+# 2024.7.26
+## 工作目标
+* 修各种各样之前留下的bug                         （给的问题都解决了）
+## 学习目标
+* 看node.js打包成单个可执行文件的几种不同方法      （除了pkg其他的打包出来都有问题）
+
+# 2024.7.25
+## 工作目标
+* 台风天电脑在公司
+## 学习目标
+* 看node.js相关的内容
+
+
+# 2024.7.24
+## 工作目标
+* 根据合作伙伴的反馈修改样式。                    （100%）
+## 学习目标
+* 学css                                          （还是跟着网上的范例写，主要是看动画方向和过渡方向）
+
+# 2024.7.23
+## 工作目标
+* 完善福宝世界风格的singplay界面样式              （100%）
+* 完善福宝世界风格的singplayback界面样式          （100%）
+## 学习目标
+* 学css                                          （根据网上的范例做了一些css动画的demo）
+
+# 2024.7.22
+## 工作目标
+* 部分完善福宝世界风格的singplay界面样式          （除了评分和没切图的部分都做好了）
+* 剩下的等待他们给切图                            （等）
+## 学习目标
+* 看css语法                                      （看了before和after）
+
 # 2024.7.19
 ## 工作目标
 * 继续完善活动详情页面和活动列表页面                   (100%)