diff --git a/.gitignore b/.gitignore index 549e00a2a96fa9d7c5dbc9859664a78d980158c2..5273ade83fb7775e72ad677930814012b40689dc 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ build/ ### VS Code ### .vscode/ +node_modules \ No newline at end of file diff --git a/README.md b/README.md index 06ae97832cb546840a7fd94815463bf84e7da3d7..cf3cc4431217cda09010843d144139cf03916d1f 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,8 @@ 本地预览 ```bash +npm i docsify -g + npm run dev ``` diff --git a/blog/front-end-combat/demo/iconfont.html b/blog/front-end-combat/demo/iconfont.html new file mode 100644 index 0000000000000000000000000000000000000000..13a33093e471d33a677a229492847c517d83bb3a --- /dev/null +++ b/blog/front-end-combat/demo/iconfont.html @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/blog/front-end-combat/demo/iconfont/iconfont.css b/blog/front-end-combat/demo/iconfont/iconfont.css new file mode 100644 index 0000000000000000000000000000000000000000..aee6daf2892d9def73fb89aedb1d118bb7668240 --- /dev/null +++ b/blog/front-end-combat/demo/iconfont/iconfont.css @@ -0,0 +1,19 @@ +@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"; +} + diff --git a/blog/front-end-combat/demo/iconfont/iconfont.ttf b/blog/front-end-combat/demo/iconfont/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..5878b5ca5203cbf49597b6cbb40f15350a623901 Binary files /dev/null and b/blog/front-end-combat/demo/iconfont/iconfont.ttf differ diff --git a/blog/front-end-combat/demo/iconfont/iconfont.woff b/blog/front-end-combat/demo/iconfont/iconfont.woff new file mode 100644 index 0000000000000000000000000000000000000000..23a8f42bbc041095ecb1cf39ea7142e715aa6de8 Binary files /dev/null and b/blog/front-end-combat/demo/iconfont/iconfont.woff differ diff --git a/blog/front-end-combat/demo/iconfont/iconfont.woff2 b/blog/front-end-combat/demo/iconfont/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..1f730f1a92044632a15a85a31ff45136d4827b75 Binary files /dev/null and b/blog/front-end-combat/demo/iconfont/iconfont.woff2 differ diff --git a/blog/front-end-combat/demo/transform.html b/blog/front-end-combat/demo/transform.html new file mode 100644 index 0000000000000000000000000000000000000000..3302f5eff8cced3c6d2c9e6c573f208d5596c9ef --- /dev/null +++ b/blog/front-end-combat/demo/transform.html @@ -0,0 +1,34 @@ + + +
+
+
\ No newline at end of file diff --git a/blog/front-end-combat/iconfont.md b/blog/front-end-combat/iconfont.md new file mode 100644 index 0000000000000000000000000000000000000000..cdd0bfe770a431cfcfb5c66ee0c32aad3305a31b --- /dev/null +++ b/blog/front-end-combat/iconfont.md @@ -0,0 +1,13 @@ +# 字体图标 + +iconfont-阿里巴巴矢量图标库 + +https://www.iconfont.cn/ + +iconfont 支持上传 SVG 矢量图 + +示例： + +[](demo/iconfont.html ':include :type=code') + +[](demo/iconfont.html ':include height=50') diff --git a/blog/front-end-combat/index.md b/blog/front-end-combat/index.md index d316bda5f58f1ad3a852847df96482c07fc5abf8..b29043a134d0e9d63d5affcd14bf5b344cb16fb7 100644 --- a/blog/front-end-combat/index.md +++ b/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 diff --git a/blog/front-end-combat/transform.md b/blog/front-end-combat/transform.md new file mode 100644 index 0000000000000000000000000000000000000000..1b4c4c21aa197fce4f4a65dda5a97a02e5ff17a5 --- /dev/null +++ b/blog/front-end-combat/transform.md @@ -0,0 +1,48 @@ +# 平面转换 + +使用 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 diff --git a/doc/html.md b/doc/html.md index 661f61254a52d166c3daa07331581976489e10d9..f9f22f84495367b570431ac5cce2db78a96e0034 100644 --- a/doc/html.md +++ b/doc/html.md @@ -1,6 +1,6 @@ # 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) diff --git a/package.json b/package.json index 65f71dee908dd168bbccb930983fba50c82b8b07..a20003f914290c0a1824a3404829911dbb9316f3 100644 --- a/package.json +++ b/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" + } }