个人文档
  • AI编程Cursor
  • GPT使用笔记
  • npm常用库合集
  • 同步用
  • 小Demo们
  • 工具网站教程集合
  • HTML、CSS 工具方法集合
    • HTML 全局属性
    • css常用功能
    • font-face 字体|子集相关
    • iframe父子页面传值
    • input输入优化
    • loading状态
    • nodejs使用谷歌邮箱发邮件
    • 为 Dom 自定义事件监听
    • 初始html的head标签配置
    • 拼音输入中文汉字的事件监听
    • 文字颜色效果
    • 文档片段范围 Range
    • 移动端开发-rem
    • 等宽字体推荐
    • 网站SEO优化注意点
    • 邮件html模板
  • JS 工具方法集合
    • Axios 简单使用
    • Axios 简单封装
    • Gitbook的安装和使用
    • Github 登录开发
    • HTML转为纯文本
    • JS 中强大的操作符
    • cookie 操作
    • js 动态加载js资源
    • js 常用功能语句
    • js取代trycatch的方法封装
    • js接口下载二进制
    • script 标签的异步属性
    • 判断当前是移动端还是pc端
    • 刷新token队列管理
    • 前端多线程 Web Worker
    • 加密-AES对称加密
    • 加密-node进行rsa加密解密
    • 地区省市区三级联动的地址数据 + 功能
    • 复制插件
    • 开发时环境变量
    • 得到随机图片
    • 数字格式整理集合
    • 数学计算插件
    • 时间格式整理
    • 获取ip地址
    • 获取url传参
    • 进制转换和位运算符
    • 页面隐藏|激活|关闭的监听
  • JS 知识点研究
    • Babel 历史和原理
    • Babel 配置和使用
    • Function 的 apply、call、bind
    • HTTP浏览器缓存粗解
    • Source map 文件还原为源码
    • TS常用技巧
    • js 的加载和模块化
    • js 的新数据类型 Symbol
    • js的代理对象 proxy 和 defineProperty
    • js的原型链 prototype
    • vite 打包体积优化
    • webpack 可视化打包文件大小插件
    • webpack 基础使用配置
    • webpack 版本5的报错
    • yeoman 开发脚手架的工具
    • 同步异步和微任务宏任务
    • 移动端调试---谷歌工具+eruda+vconsole
    • 转换-Blob URL
    • 转换-FileReader
    • 转换-Js文件类型和转换
    • 转换-前端开发的URL的编码和解码
    • 转换-字符串和Base 64的转换
  • Node 和 Npm 相关
    • Node 开发环境配置
    • express + jwt 校验
    • node 常用方法
    • node后台服务器-PM2
    • node基本使用
    • npm 中依赖的版本问题
    • npm 功能使用
    • npm指令说明和其他对比
    • nvm版本管理+自动切换node版本
  • React 学习
    • React Hook
    • React 项目基础开发
    • React.memo 和 React.PureComponent
    • React懒加载进阶
    • useContext Hook
    • useEffect Hook
    • useMemo 和 useCallback - Hook
    • useRef Hook
    • useState Hook
    • 同步修改变量功能封装 useVal for react
    • 轻便的传值组件
  • Rust 语言相关
    • Rust 基本
    • Rust 基础学习
    • Rust 调用 Object-C 的API
    • Tauri 基本使用
    • Tauri 是什么
  • VUE 学习
    • Vue3 使用
    • Vue3使用hook
    • Vue开发小技术点
    • vue路由切换时的动画效果
    • 花式引入组件和资源-打包时拆包减少js体积
  • Web3相关
    • Web3.0开发上-准备和概念理解
    • Web3.0开发下-功能代码示例
    • 以太坊区块链和Web3.0
    • 开发智能合约
  • python
    • pyenv版本管理工具
    • python初始化
    • python基本概念
    • venv虚拟环境
  • 个人其他
    • Steam Deck的基本设置和插件
  • 其他编程相关
    • Git教程和常用命令
    • Java开发-JDK和Maven的安装和卸载
    • Jenkins安装和基本使用
    • Linux系统指令
    • Mac 使用2K屏幕开启缩放
    • Mac 使用VS code打开项目
    • Mac 安装 Homebrew
    • Mac 的终端 shell 与 zsh
    • Mac 软件和插件
    • MacBook使用建议
    • Mac升降级到指定版本的系统
    • Mac安装Zsh
    • Mac安装软件各种提示
    • Mac系统脚本语言 AppleScript 的使用
    • Mac终端代理工具
    • Markdown(md)文档开发-Typora
    • Mysql 的安装和使用
    • Nginx 安装和基础使用
    • Nginx 稍微高深的配置
    • Slate - Api 的文档开发工具
    • Sublime配置
    • Ubuntu的 apt-get 使用
    • VScode配置
    • Windows 软件和插件
    • curl 工具使用
    • github 网站访问优化
    • host 文件
    • inquirer 终端中和用户交互
    • uTools的插件开发教程
    • vim 文本编辑功能
    • 使用 Github Pages 免费部署网站
    • 压缩指令 zip 和 unzip
    • 油猴的安装和开发(Tampermonkey)
    • 阿里云简略使用
  • 微信开发
    • 微信小程序开发
    • 微信开发必读
    • 微信开发提前购买域名
    • 微信手机打开的页面中授权登录
    • 微信扫码登录
    • 微信服务号登录+推送服务提醒
    • 自定义分享卡片-node.js实现
  • 数据结构与算法
    • KMP算法
    • Wildcard字符串分析算法
    • 二叉树
    • 字典树
    • 时间复杂度浅析
    • 算法神器——动态规划
Powered by GitBook
On this page

Was this helpful?

工具网站教程集合

Previous小Demo们NextHTML、CSS 工具方法集合

Last updated 3 months ago

Was this helpful?

title: 工具网站&教程集合 id: b2f6f0d3d52d2e2384c7fa35b6d71ad3 tags:

  • 工具

  • 网站 date: 2000/01/01 00:00:00 updated: 2025/03/21 11:28:12 isPublic: true --#|[分隔]|#--

工具网站&教程集合

因为一些用过的或听说过的好用的工具网站,在一段时间不用后,可能会慢慢淡忘掉,这里来记录一下。

CSS样式生成

有时做的对样式不严格要求的网站,想做的美观一些,就需要网上找找各种美观的设计、按钮、卡片、模板之类的,最终以css、svg图、模块组件的形式来使用。

下面可以用来参考,并免费使用。

现成模板

这三个网站是一家的,互相跳转,核心是第一个。

主要服务:提供设计好的动态loading、按钮、表单、卡片、悬浮框等等的模板,可以直接复制对应的react、vue、html/css代码。

复制到自己的项目中,直接套用或者微调后使用。

网站一:https://uiverse.io/

  • 功能:各种设计好的按钮、loading、卡片等

  • 截图展示:

网站二:https://neumorphism.io

  • 功能:实时在线微调中意的一个拟真卡片,调整阴影、颜色、光照等,最后复制css

网站三:https://cssbuttons.io/

  • 功能:列出了很多按钮的样式

在线调试生成复制

网站一:https://app.haikei.app

  • 功能:生成概念化的背景,比如玻璃、形状,下载svg。

网站二:https://lingdaima.com/jianbianse

  • 功能:渐变背景生成器,生成css

网站三:https://lingdaima.com/glass

  • 功能:毛玻璃样式生成器,生成css

网站四:https://lingdaima.com/shadow

  • 功能:阴影在线配置生成器,生成css

Element UI表单设计及代码生成器

网址:https://gitee.com/mrhj/form-generator

预览地址可以看这里:预览地址

功能:通拽配置表单,生成vue + element-ui代码。

前端脚手架配置可视化自定义生成

网站:https://createapp.dev/

功能:前端使用 react、vue 开发时会使用脚手架,同时需要按照业务需求,自定义很多图片、css、babel 的配置。

这个网站就是可视化的进行:

  • 勾选要使用的编译工具(webpack、Parcel等)。

  • 勾选要使用的前端开发框架(react、vue等)。

  • 勾选要使用的工具、编译插件(babel、ts、eslint、图片处理、css处理等)。

勾选的同时同步生成项目配置,最后可以直接下载下来使用的一个网站。

图片压缩网站

这是很有名的图片压缩网站:https://tinify.cn/。

在线版一次20张,每张最大5M。

提供api服务,需要输入昵称和邮箱,生成服务api key,但无论有几个key,每个账户每个月可以免费压缩500次。

免费API:可腾网络科技

官网地址:https://kertennet.com/

提供了几个有用的免费无限制 api,比如:

  • 图片OCR文字识别:https://kertennet.com/index.php/index/show?id=116&catname=tupianchuli

  • 图片压缩(压缩至200k左右):https://kertennet.com/index.php/index/show?id=132&catname=tupianchuli

十分钟邮箱汇总

平时使用一些第三方服务时,只需要接受一次验证码,这时不想使用自己的邮箱时,就可以使用下面这些十分钟邮箱。

不过要注意,有些第三方服务做了校验,能识别一部分10分钟邮箱,他们会拒绝服务,这是我们就换一个。

  • https://10-minutemail.com

  • https://10-minutemail.net

  • https://10-minutemail.org

  • https://email10min.com

  • https://www.mailtemp.net

  • https://email10min.net

  • https://tenminutesmail.net

  • https://10minutemail.info/ (貌似接受邮件有问题)

IP地址风险评估

官网:https://scamalytics.com/。

这个网站用来给IP地址进行风险评估,评分越低越好。

使用代理访问网站时,我们访问到网站的IP地址,就会变成我们使用的代理的IP地址,如果网站有风险策略,发现你这个IP的风险值比较高,可能会禁止这个IP访问。

如果你的IP超过了40或者50,在大部分支付网站都是过不去的;

如果超过了60或者80,甚至有一部分网站都是进不去的,如果达到了100,有些网站会直接封掉你的账号。

跨平台文件传输工具

自己给自己跨平台传文件时,正常一些小文件就直接使用微信的文件传输助手了,但一些体积比较大的,使用微信的话可能体验不太好,而且一些机密文件比如代码、密码、秘钥文件之类的,会留下记录。

下面这款是局域网的跨平台的文件传输工具,支持Windows、macOS、Linux、Android、iOS,支持中文,使用也挺方便。

LocalSend:https://localsend.org/#/download

科学上网购买

翻墙的服务器:搬瓦工:https://bandwagonhost.com/

搬瓦工提供的翻墙服务:https://justmysocks3.net/members/cart.php?language=chinese

谷歌商店的软件生成APK下载链接

谷歌商店:https://play.google.com/store/games(需要翻墙)

转换用的工具网站:https://apkcombo.com/downloader/(需要翻墙)

正常想安装谷歌商店中的软件,必须要在手机上安装谷歌商店这个软件,很多时候不方便。

工具网站的作用,就是在谷歌商店网页版本中,打开你想下载软件的详情页,比如 Facebook https://play.google.com/store/apps/details?id=com.facebook.katana 的详情页,复制这个地址,然后粘贴到工具网站的输入框中,再点击下面的按钮,即可快速生成这个软件的下载链接。

点击下载,就可下载 Facebook 的软件安装包,方便没有谷歌商店、没有翻墙功能,或者其他朋友的手机安装。

截图展示:

截图展示:

截图展示:

截图展示:

截图展示:

截图展示: