😁站/长/资/料

😁个/人/介/绍

本人像素眼如尺，代码强迫症晚期，Git commit风骚，Webpack配置出神入化。

HTML/CSS信手拈来，JavaScript深不见底，React/Vue/Angular三大框架通吃，TypeScript类型体操十段选手。

会手撸WebGL粒子特效，会调教WebAssembly硬刚C++，会魔改V8引擎参数，会调优首屏加载压榨毫秒级性能。

从祖传jQuery到自研微前端框架，从IE6地狱模式到Deno前沿战场，前端十八般武艺样样精通。

《重构：改善既有代码设计》倒背如流，《JavaScript设计模式》实战千遍，键盘起火星，显示器冒青烟。

接需求秒开VSCode，看原型稿脑渲完整DOM树，Chrome调试器人柱力，DevTools黑魔法传承者。兼容性问题弹指灰飞烟灭，内存泄漏追踪直捣黄龙，Lighthouse评分怒刷98+。

线上事故夺命Call响起，三秒定位生产环境诡异BUG，五分钟热修复方案直达用户端，CI/CD管道任我差遣。键盘所至，浏览器无不臣服；代码所向，用户体验尽在掌握。

PS：附赠全栈大礼包——Node.js中间件信手拈来，Nginx配置暗藏玄机，Docker镜像瘦身专家，Serverless架构轻车熟路。

以上都是吹的，我只会HTML超文本标记语言。

 

😁网站的艰难运行环境

服务器最近遭受DDOS攻击，官方部分站点已瘫痪，恢复时间不确定。主页随时可能托管在Github或者虚拟主机上，速度相对较慢，请耐心等待恢复，还您一个舒适的欣赏环境。哈哈哈哈哈哈哈嗝~

 

 

😁文/件/托/管

自己弄个阿里云oss或者腾讯云cos，然后把css文件和js文件托管上去，速度会快好多。

😁图/片/托/管

🤣为缓解服务器压力，图片托管在了腾讯微云，速度嘎嘎快~下面直链，直接复制引用就行了🤣

电脑端开局和移动端顶部图片【start.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/002178339251e27c0c379a074b53421374995f70f380206a91f941eca2a506db9730b7d5e154c0b0a54585fa7dcca392?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=start.jpg&size=750

侧栏顶部头像背景图【cnmtlbg.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/bead1e7b47b025079a73cefdbae4743cea08ca3470f80a09b023945be16337e04dc04db5e3d5c2332f408a5f257de726?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=cnmtlbg.jpg&size=750

头像【tx.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/cb94ddb129a2d625b2bf9cd41781294946040074c54d215d91a6fec19d17f89bbf85410ddc0accb58a4eadec117b1083?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=tx.jpg&size=750

官网首页页面背景图片【shouye.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/ea696cade47ec01a4f2c58b388fd85795311c5d9cb4bdc17a97460c319758177db45d99138e6cf4bf9d437e8140e4c72?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=shouye.jpg&size=750

关于本站页面顶部图片【guanyubenzhan.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/662ea4195755f0cd46211b621aa3182a9c3aac9b6c5ad71b61935ffd475a56a953ba9463e9dd1af985367c936460b450?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=guanyubenzhan.jpg&size=750

站长团队成员图片【cnmteam01.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/07c62d66f216aebf1d1d3948bc23621f3907aaacbe38639121288f3b8dad0a39d30a15a80bef0054b62c8c11e740d3d5?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=cnmteam01.png&size=750

站长团队成员图片【cnmteam02.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/3559a37a5877eb3acc95d81ca173fdd6d1984a6286f3c53a9e308d28dfad31342c6a2318fbf44a1182fe63f9e9dd49ec?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=cnmteam02.png&size=750

站长团队成员图片【cnmteam03.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/9a041b779f08d00846a787dc53e461a3796151202f05311abeda37a5549cc31b45347ddcb9936d6f07a466347f34d77b?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=cnmteam03.png&size=750

站长团队成员图片【cnmteam04.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/d72bd33535074cff369a071ac4a9c68e832e6587cb06260400d328a382447e98f9e84330800eb4d547045d2d1dda907e?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=cnmteam04.png&size=750

站长团队成员图片【cnmteam05.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/11b9a14f2d4274b40b5742683800d522cee1cf9825d1e0e27d8e050b0452609bee75b88e770a627ca8ad7971e6d5b757?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=cnmteam05.png&size=750

商业合作页面背景图片【shangyehezuo.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/8c7b1a2247bba2796cf5da67c751ef25f6299468fcbe5cb8664b3de690da2b227f1d38c5fd39556c8380b669c5fdbcd3?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=shangyehezuo.png&size=750

站点展示页面背景图片【zhandian.jpg】链接：https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/be5bb2c677a2eaa1eea004155de1c5ff9000c580016a8cb7a100b6d705187e5d868d97e757720ee9b73983cb3208507f?pictype=scale&from=30113&version=3.3.3.3&uin=22741441&fname=zhandian.jpg&size=750

 

😀Emoji符号

表/情/类

😀 😁 😂 🤣 😃 😄 😅 😆 😉 😊 😋 😎 😍 😘 😗 😙 😚 ☺️ 🙂 🤗 🤩 🤔 🤨 😐 😑 😶 🙄 😏 😣 😥 😮 🤐 😯 😪 😫 😴 😌 😛 😜 😝 🤤 😒 😓 😔 😕 🙃 🤑 😲 ☹️ 🙁 😖 😞 😟 😤 😢 😭 😦 😧 😨 😩 🤯 😬 😰 😱 😳 🤪 😵 😡 😠 🤬 😷 🤒 🤕 🤢 🤮 🤧 😇 🤠 🤡 🤥 🤫 🤭 🧐 🤓 😈 👿 👹 👺 💀 👻 👽 🤖 💩 😺 😸 😹 😻 😼 😽 🙀 😿 😾

动/物/自/然

🐶 🐱 🐭 🐹 🐰 🦊 🦝 🐻 🐼 🦘 🦡 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦢 🦅 🦉 🦚 🦜 🦇 🐺 🐗 🐴 🦄 🐝 🐛 🦋 🐌 🐚 🐞 🐜 🦗 🕷 🕸 🦂 🦟 🦠 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦀 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🐘 🦏 🦛 🐪 🐫 🦙 🦒 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🐐 🦌 🐕 🐩 🐈 🐓 🦃 🕊 🐇 🐁 🐀 🐿 🦔 🐾 🐉 🐲 🌵 🎄 🌲 🌳 🌴 🌱 🌿 ☘️ 🍀 🎍 🎋 🍃 🍂 🍁 🍄 🌾 💐 🌷 🌹 🥀 🌺 🌸 🌼 🌻 🌞 🌝 🌛 🌜 🌚 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌎 🌍 🌏 💫 ⭐️ 🌟 ✨ ⚡️ ☄️ 💥 🔥 🌪 🌈 ☀️ 🌤 ⛅️ 🌥 ☁️ 🌦 🌧 ⛈ 🌩 🌨 ❄️ ☃️ ⛄️ 🌬 💨 💧 💦 ☔️ ☂️ 🌊 🌫

水/果/食/物

🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🍑 🍍 🥭 🥥 🥝 🍅 🍆 🥑 🥦 🥒 🥬 🌶 🌽 🥕 🥔 🍠 🥐 🍞 🥖 🥨 🥯 🧀 🥚 🍳 🥞 🥓 🥩 🍗 🍖 🌭 🍔 🍟 🍕 🥪 🥙 🌮 🌯 🥗 🥘 🥫 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🍤 🍙 🍚 🍘 🍥 🥮 🥠 🍢 🍡 🍧 🍨 🍦 🥧 🍰 🎂 🍮 🍭 🍬 🍫 🍿 🧂 🍩 🍪 🌰 🥜 🍯 🥛 🍼 ☕️ 🍵 🥤 🍶 🍺 🍻 🥂 🍷 🥃 🍸 🍹 🍾 🥄 🍴 🍽 🥣 🥡 🥢

运/动/娱/乐

⚽️ 🏀 🏈 ⚾️ 🥎 🏐 🏉 🎾 🥏 🎱 🏓 🏸 🥅 🏒 🏑 🥍 🏏 ⛳️ 🏹 🎣 🥊 🥋 🎽 ⛸ 🥌 🛷 🛹 🎿 ⛷ 🏂 🏋️‍♀️ 🏋🏻‍♀️ 🏋🏼‍♀️ 🏋🏽‍♀️ 🏋🏾‍♀️ 🏋🏿‍♀️ 🏋️‍♂️ 🏋🏻‍♂️ 🏋🏼‍♂️ 🏋🏽‍♂️ 🏋🏾‍♂️ 🏋🏿‍♂️ 🤼‍♀️ 🤼‍♂️ 🤸‍♀️ 🤸🏻‍♀️ 🤸🏼‍♀️ 🤸🏽‍♀️ 🤸🏾‍♀️ 🤸🏿‍♀️ 🤸‍♂️ 🤸🏻‍♂️ 🤸🏼‍♂️ 🤸🏽‍♂️ 🤸🏾‍♂️ 🤸🏿‍♂️ ⛹️‍♀️ ⛹🏻‍♀️ ⛹🏼‍♀️ ⛹🏽‍♀️ ⛹🏾‍♀️ ⛹🏿‍♀️ ⛹️‍♂️ ⛹🏻‍♂️ ⛹🏼‍♂️ ⛹🏽‍♂️ ⛹🏾‍♂️ ⛹🏿‍♂️ 🤺 🤾‍♀️ 🤾🏻‍♀️ 🤾🏼‍♀️ 🤾🏾‍♀️ 🤾🏾‍♀️ 🤾🏿‍♀️ 🤾‍♂️ 🤾🏻‍♂️ 🤾🏼‍♂️ 🤾🏽‍♂️ 🤾🏾‍♂️ 🤾🏿‍♂️ 🏌️‍♀️ 🏌🏻‍♀️ 🏌🏼‍♀️ 🏌🏽‍♀️ 🏌🏾‍♀️ 🏌🏿‍♀️ 🏌️‍♂️ 🏌🏻‍♂️ 🏌🏼‍♂️ 🏌🏽‍♂️ 🏌🏾‍♂️ 🏌🏿‍♂️ 🏇 🏇🏻 🏇🏼 🏇🏽 🏇🏾 🏇🏿 🧘‍♀️ 🧘🏻‍♀️ 🧘🏼‍♀️ 🧘🏽‍♀️ 🧘🏾‍♀️ 🧘🏿‍♀️ 🧘‍♂️ 🧘🏻‍♂️ 🧘🏼‍♂️ 🧘🏽‍♂️ 🧘🏾‍♂️ 🧘🏿‍♂️ 🏄‍♀️ 🏄🏻‍♀️ 🏄🏼‍♀️ 🏄🏽‍♀️ 🏄🏾‍♀️ 🏄🏿‍♀️ 🏄‍♂️ 🏄🏻‍♂️ 🏄🏼‍♂️ 🏄🏽‍♂️ 🏄🏾‍♂️ 🏄🏿‍♂️ 🏊‍♀️ 🏊🏻‍♀️ 🏊🏼‍♀️ 🏊🏽‍♀️ 🏊🏾‍♀️ 🏊🏿‍♀️ 🏊‍♂️ 🏊🏻‍♂️ 🏊🏼‍♂️ 🏊🏽‍♂️ 🏊🏾‍♂️ 🏊🏿‍♂️ 🤽‍♀️ 🤽🏻‍♀️ 🤽🏼‍♀️ 🤽🏽‍♀️ 🤽🏾‍♀️ 🤽🏿‍♀️ 🤽‍♂️ 🤽🏻‍♂️ 🤽🏼‍♂️ 🤽🏽‍♂️ 🤽🏾‍♂️ 🤽🏿‍♂️ 🚣‍♀️ 🚣🏻‍♀️ 🚣🏼‍♀️ 🚣🏽‍♀️ 🚣🏾‍♀️ 🚣🏿‍♀️ 🚣‍♂️ 🚣🏻‍♂️ 🚣🏼‍♂️ 🚣🏽‍♂️ 🚣🏾‍♂️ 🚣🏿‍♂️ 🧗‍♀️ 🧗🏻‍♀️ 🧗🏼‍♀️ 🧗🏽‍♀️ 🧗🏾‍♀️ 🧗🏿‍♀️ 🧗‍♂️ 🧗🏻‍♂️ 🧗🏼‍♂️ 🧗🏽‍♂️ 🧗🏾‍♂️ 🧗🏿‍♂️ 🚵‍♀️ 🚵🏻‍♀️ 🚵🏼‍♀️ 🚵🏽‍♀️ 🚵🏾‍♀️ 🚵🏿‍♀️ 🚵‍♂️ 🚵🏻‍♂️ 🚵🏼‍♂️ 🚵🏽‍♂️ 🚵🏾‍♂️ 🚵🏿‍♂️ 🚴‍♀️ 🚴🏻‍♀️ 🚴🏼‍♀️ 🚴🏽‍♀️ 🚴🏾‍♀️ 🚴🏿‍♀️ 🚴‍♂️ 🚴🏻‍♂️ 🚴🏼‍♂️ 🚴🏽‍♂️ 🚴🏾‍♂️ 🚴🏿‍♂️ 🏆 🥇 🥈 🥉 🏅 🎖 🏵 🎗 🎫 🎟 🎪 🤹‍♀️ 🤹🏻‍♀️ 🤹🏼‍♀️ 🤹🏽‍♀️ 🤹🏾‍♀️ 🤹🏿‍♀️ 🤹‍♂️ 🤹🏻‍♂️ 🤹🏼‍♂️ 🤹🏽‍♂️ 🤹🏾‍♂️ 🤹🏿‍♂️ 🎭 🎨 🎬 🎤 🎧 🎼 🎹 🥁 🎷 🎺 🎸 🎻 🎲 🧩 ♟ 🎯 🎳 🎮 🎰

 

😁写/在/前/面

此源码全开源发布，转载还请保留版权信息（Tsui）！

官方网站：HTTPS://

 

😁版/权/相/关

主页面底部版权可修改，可删除，不强求。

各站长可以在自己的网站发布此主页的开源代码，还请保留版权。

 

😁源/码/相/关

大佬们可以对本源码进行任意修改，期待你们的魔改版。

使用F12调试修改，注释掉引入[tsui_copy.js]文件的那行代码即可。

主要样式修改指引，下面有详细教程，代码注释写的也很全，可以快速找到界面对应代码。

 

😁修/改/指/引

(1)网站特殊字体

全局字体：默认宋体 [tsui_pc.css]第5行

特殊英文字体：[tsui_pc.css]第16行

 

(2)图片索引

电脑端

开局背景图片：[tsui_pc.css] 第44行

侧栏上面的背景图片：[tsui_pc.css] 第100行

官网首页页面背景图片：[tsui_pc.css] 第181行

关于站长页面顶部头图：[tsui_pc.css] 第391行

商业合作页面背景图片：[tsui_pc.css] 第605行 第618行 两个不一样会来回切换

站点展示页面顶部头图：[tsui_pc.css] 第714行 第737行 两个不一样会来回切换

站点展示页面顶部宇航员图片：[tsui_pc.css] 第748行

站点展示页面顶部鲸鱼图片：[tsui_pc.css] 第760行

 

移动端

顶部头图：[tsui_mp.css] 第52行

关于本站顶部头图：[tsui_mp.css] 第142行

商业合作背景图片：[tsui_mp.css] 第332行

站点展示顶部头图：[tsui_mp.css] 第392行

商业合作页面背景图片：[tsui_pc.css] 第604行 第617行 两个不一样会来回切换

站点展示页面顶部头图：[tsui_pc.css] 第902行 第925行 两个不一样会来回切换

站点展示页面顶部宇航员图片：[tsui_pc.css] 第937行

站点展示页面顶部鲸鱼图片：[tsui_pc.css] 第949行

其他的图片在index.html里面，行数易变，这里就不列举了，很简单，自行替换。

 

(3)配色

电脑端

首页欢迎来到四个大字：[tsui_pc.css] 第230行

首页CNM官方网站：[tsui_pc.css] 第239行

首页右上右下角文字：[tsui_pc.css] 第294行

首页探索按钮背景颜色：[tsui_pc.css] 第256行

关于本站页面顶图文字背景颜色：[tsui_pc.css] 第402行

关于本站页面联系站长按钮背景颜色：[tsui_pc.css] 第444行

站点展示页面顶图小飞机背景颜色：[tsui_pc.css] 第770行

 

移动端

首页顶栏背景颜色：[tsui_mp.css] 第26行

首页栏目背景颜色：[tsui_mp.css] 第81行

关于本站页面顶图文字背景颜色：[tsui_mp.css] 第158行

站点展示页面顶图文字背景颜色：[tsui_mp.css] 第401行

 

😁拓/展/功/能

这些都不难，你们可以自行选择添加

鼠标点击特效，修改鼠标样式

添加一个音乐播放器

添加一个看板娘

添加一个聊天室

添加一些小游戏