fix

.gitignore

@@ -31,3 +31,4 @@ build/
 
 ### VS Code ###
 .vscode/
+node_modules
\ No newline at end of file

README.md

@@ -39,6 +39,8 @@
 本地预览
 
 ```bash
+npm i docsify -g
+
 npm run dev
 ```
 

blog/front-end-combat/demo/iconfont.html

+<link rel="stylesheet"
+      href="iconfont/iconfont.css">
+
+<i class="iconfont icon-star"></i>
\ No newline at end of file

blog/front-end-combat/demo/iconfont/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 3174722 */
+  src: url('iconfont.woff2?t=1644417431377') format('woff2'),
+       url('iconfont.woff?t=1644417431377') format('woff'),
+       url('iconfont.ttf?t=1644417431377') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: inherit;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-star:before {
+  content: "\e693";
+}
+

blog/front-end-combat/demo/transform.html

+<style>
+    .wrap {
+        width: 500px;
+        height: 200px;
+        border: 1px solid #333;
+        position: relative;
+    }
+
+    .box {
+        left: 0;
+        top: 0;
+
+        width: 100px;
+        height: 100px;
+        background-color: skyblue;
+        position: absolute;
+        /* 过渡 */
+        transition: all 0.5s;
+
+    }
+
+    /* 鼠标移入后居中 */
+    .wrap:hover .box {
+        top: 50%;
+        left: 50%;
+
+        /* 替换：margin-left: -1/2x; margin-top: -1/2y */
+        transform: translate(-50%, -50%);
+    }
+</style>
+
+<div class="wrap">
+    <div class="box"></div>
+</div>
\ No newline at end of file

blog/front-end-combat/iconfont.md

+# 字体图标
+
+iconfont-阿里巴巴矢量图标库
+
+https://www.iconfont.cn/
+
+iconfont 支持上传 SVG 矢量图
+
+示例：
+
+[](demo/iconfont.html ':include :type=code')
+
+[](demo/iconfont.html ':include height=50')

blog/front-end-combat/index.md

@@ -2,12 +2,11 @@
 
 移动 web
 
-- 字体图标
+1. [字体图标 iconfont](blog/front-end-combat/iconfont.md)
+
+2. [平面转换 transform](blog/front-end-combat/transform.md)
+
 - css3 平面空间转换、渐变、动画属性
 - Flex 布局
 - 移动适配
 - 响应式 BootStrap 框架
-
-## 字体图标、平面转换、渐变
-
-https://www.bilibili.com/video/BV1xq4y1q7jZ?p=3&spm_id_from=pageDriver

blog/front-end-combat/transform.md

+# 平面转换
+
+使用 transform 实现位移、旋转、缩放等效果
+
+平面坐标
+
+```
+   -y
+-x  0  +x
+   +y
+```
+
+语法
+
+```css
+transform: translate(水平移动距离，垂直移动距离);
+```
+
+取值
+
+- 正负均可
+- 像素单位数值
+- 百分比（参照盒子自身大小）
+
+配合过渡使用
+
+```css
+transition: all 0.5s;
+```
+
+示例：(元素居中效果)
+
+[](demo/transform.html ':include :type=code')
+
+[](demo/transform.html ':include height=220')
+
+技巧
+- translate 只给一个值，表示x轴方向移动距离
+- 单独设置某个方向的移动：translateX(), translateY()
+
+
+
+```css
+/* 背景图从右显示 */
+background-position: right 0;
+```
+
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=12&spm_id_from=pageDriver
\ No newline at end of file

doc/html.md

 # html
 
-[笔记：web 前端开发入门](blog/front-end-learn/index.md)
+[笔记：web 前端开发入门 HTML5+CSS3+前端项目](blog/front-end-learn/index.md)
 
 [笔记：web 前端开发进阶 HTML5+CSS3+移动端](blog/front-end-combat/index.md)
 

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "dev": "docsify serve"
+    "dev": "live-server"
   },
   "repository": {
     "type": "git",
@@ -17,5 +17,8 @@
   "bugs": {
     "url": "https://github.com/mouday/coding-tree/issues"
   },
-  "homepage": "https://github.com/mouday/coding-tree#readme"
+  "homepage": "https://github.com/mouday/coding-tree#readme",
+  "devDependencies": {
+    "docsify": "^4.12.2"
+  }
 }