From 494f3fa4a4aa89a8da7a829b064131aa8a85b1a9 Mon Sep 17 00:00:00 2001 From: pengshiyu <1940607002@qq.com> Date: Wed, 9 Feb 2022 23:16:53 +0800 Subject: [PATCH] fix --- .gitignore | 1 + README.md | 2 + blog/front-end-combat/demo/iconfont.html | 4 ++ .../demo/iconfont/iconfont.css | 19 +++++++ .../demo/iconfont/iconfont.ttf | Bin 0 -> 1596 bytes .../demo/iconfont/iconfont.woff | Bin 0 -> 1004 bytes .../demo/iconfont/iconfont.woff2 | Bin 0 -> 648 bytes blog/front-end-combat/demo/transform.html | 34 +++++++++++++ blog/front-end-combat/iconfont.md | 13 +++++ blog/front-end-combat/index.md | 9 ++-- blog/front-end-combat/transform.md | 48 ++++++++++++++++++ doc/html.md | 2 +- package.json | 7 ++- 13 files changed, 131 insertions(+), 8 deletions(-) create mode 100644 blog/front-end-combat/demo/iconfont.html create mode 100644 blog/front-end-combat/demo/iconfont/iconfont.css create mode 100644 blog/front-end-combat/demo/iconfont/iconfont.ttf create mode 100644 blog/front-end-combat/demo/iconfont/iconfont.woff create mode 100644 blog/front-end-combat/demo/iconfont/iconfont.woff2 create mode 100644 blog/front-end-combat/demo/transform.html create mode 100644 blog/front-end-combat/iconfont.md create mode 100644 blog/front-end-combat/transform.md diff --git a/.gitignore b/.gitignore index 549e00a..5273ade 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 06ae978..cf3cc44 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 0000000..13a3309 --- /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 0000000..aee6daf --- /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 GIT binary patch literal 1596 zcmd^9OKTHR6#nkaB*xT7v7llFhiVJfnx;Xdl-7l{55X60?Ml$;WRkQ@GQ(tAT310) z5e0=Vb)ndW-MJH~pgUc-cO%7ByU?ZX+SKpP+<;pDfoHhqe&;*qo_p?VAOJL>1|8Xv z@vCRe2kkcj(MxvX@_2Wy|K<6+v>(#GVV5m`edV=H`v;p}bQcQ#_{J_kcj@mfIadD2 z)6vVsU)fHVNTgEwN8-0^$4cdJJ~c!H@trE=dbWkb($@1-$+9)?i{02y|3TVj#VR|^ zFZy56zXWJS->ZhwpAtzqMp^>NT1vXp*JKOd8TEqh!=rFrTm9WYeNz;lJr~9L#=ym8;nYuwq58_H zdi@E<0{gHUor}aRZ1RkxPSJ|7h8<{CSSR16utD5-7YV-foZ^$@2NX`@1cnrDVn$!y z0)sW81Gg0xXvVU_8us9g!aDg63LC_q6;ALSuPdA+zo~EL1VOTH=fmb$%na^=u z&-4Rt#<9apDGdF-?ru4c*86BX?IGNK#4}W0UZKFmQRf!`1uBM7P&X!}1AuBT30%j@`4XgSbR^k$yJV5E2 rVIG^&8I+EQx@Hw@e$n#~5n2eDCsdvK@|0|O%mP}CZTLlnAItNerYjeue}+jX+ZWBpqK>+7X<&|$w*C1VPIh50rK^L*i3$o zhkpi85GZB?qzjB#B0Ho6e7Tatn$S*Dd`u7Y}onA?6Qbom_BQwI)QIa$)y*tk&M$#`FyLDCb3E~5=b#tE#9nd>xp*ys7yna$k!u%4Nj z`LisW!pQ?2i#j+NCg$+21euYLkP5_XNwNxQi3tfji3uqTjP?sOlq2TMY~m@j!Y;N#mb2DoTJix4$y1=F&!qI?PnPEac_g0`+85sUAVbNl4VBln6 zP-PX?Wt3**WfW#o`nTWq-(SY`1q&I||NXJ`UCEgG&xFzS-)@tC|7J6Q{Q(REhDT-m zhRqdqv)A+7(cw`j@ZanyWIDut~hSw64%rH$2p_6~6c&rRquzUgg=4bBPu1D#6T(R`+n;`sz z<7Gy1mq+CdXJ*$uw{GU&+c#78B*VK6?d_j-Ki9i?SatIx?Hvae7fk&%d4qqQ*t&(C z^9ttvT3x`bUm={gDft-Ry!xYSTFVppxBn1W_keBwq0m?HhwOev?`UKH!*PA(e=c)_ zkLy}zXH-5s@M`7dV$<6zLo+U&Sn{r-?`x8<|J#)|7tP{lhLkp+3zT{payxl;&F&YL z;ww+ga^bC9{rJX;Gqbkx#cn9kd%gYk#21bkLOclz4O^4vI48ErKIT&73372QN&h+H z9jjSKWaj@;{}=*MX%a+IgpEwU|taI_sIV=@Gxp zowX}lt}yF#ui~lQvU8DeeZZLse;98}&JPELZ&Cw;9^0FS&WW89XErX~p|Y`~k&%JR H9h~t1+t+1# literal 0 HcmV?d00001 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 GIT binary patch literal 648 zcmV;30(bp)Pew8T0RR9100M{r3jhEB00uk&00KM!0RR9100000000000000000000 z0000SR0d!Gf^Z5rQ~@>uBm)Qw1^@&g1%zh@E*p*o5fzLRvab$!L)7#S5#D>XD^#6) z9KX&<2qFpgb3FXF-~aZRnP>C9T2il=CDBACnblWGPy(gUNP+bunu&kiQ~_kpFG0{A zfMNP{beSvkJP&dWUrVQ2w#;1VbCbp~Nr(a%zz8KLQ_Ovy%keFs1O6b?+_c8R1Iv3} zhv`^@BJ3p|dA8ZQNBPx4e2hgh#A1vX)H4Frp$pQr$!e=co@uGnf`Z$Fk{i#`SgS6% z6$P=b(2g!GEAd5(^eK(c_WAhdIJzXQj0^5Q9Xs`XG9uRu$Uh98YrtsdWWF*vm;jPyH@^ zopb4oPQLav)pAz-j!U5VTI7L1@bOkpqv!s2`vsiVtchY)y1mW8ujubdxvo&QDVkO@UiAXc>ee&Mo*}7Ci3~2&6!1w@C zR;@zHE%o=Uq1cOp#zA5qW}OuLLC6yXh^e9qwH)M?&Z}5N2m%PJmB54sp+cbs8h=m* iS;CVff{g)RxG1Xd`m4%M+W{48Q%Gr6-il_W00009`X)aB literal 0 HcmV?d00001 diff --git a/blog/front-end-combat/demo/transform.html b/blog/front-end-combat/demo/transform.html new file mode 100644 index 0000000..3302f5e --- /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 0000000..cdd0bfe --- /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 d316bda..b29043a 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 0000000..1b4c4c2 --- /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 661f612..f9f22f8 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 65f71de..a20003f 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" + } } -- GitLab