---
title: "Web 前端 - 一纸忘忧"
canonical_url: "https://www.ikxin.com/category/web"
locale: zh-cn
meta:
  "og:title": "Web 前端"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# Web 前端

## [在 Github 团队项目中白嫖 Vercel 的免费服务](https://www.ikxin.com/article/vercel-team-free)

Vercel 是一个提供 Serverless 服务的平台，特别适用于代理静态页面或创建简单的 API。其免费计划对个人项目非常友好，尤其是在中国地区拥有良好的 CDN 支持。然而，对于托管在 GitHub 组织下的项目，Vercel 通常

[Web 前端](https://www.ikxin.com/category/web) 2024.11.2523583 人浏览 [0 条评论](https://www.ikxin.com/article/vercel-team-free#comments)

[Vercel](https://www.ikxin.com/tag/vercel)

[![HTML Video 在 Vue.js 中消失的 muted 属性](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/uploads/2024/03/22/65fd9a4b7d41f.png)](https://www.ikxin.com/article/vue-muted-attribute)

## [HTML Video 在 Vue.js 中消失的 muted 属性](https://www.ikxin.com/article/vue-muted-attribute)

公司有个新项目由我这边独立选型开发，项目需求是做一个英文的产品展示官网，考虑到项目比较简单且周期不长，最终决定使用 Nuxt 框架来进行开发。 开发过程还算顺利，但中途遇到一个 Bug 花了我不少的时间，在网上找了许久，仅能检索到极少数相关

[Web 前端](https://www.ikxin.com/category/web) 2024.03.234854 人浏览 [0 条评论](https://www.ikxin.com/article/vue-muted-attribute#comments)

[Vue.js](https://www.ikxin.com/tag/vuejs) [ Nuxt](https://www.ikxin.com/tag/nuxt)

[![konva.js 阻止 click 点击事件冒泡到父元素](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/29/6423ea1d7d571.png)](https://www.ikxin.com/article/konva-click-bubbling)

## [konva.js 阻止 click 点击事件冒泡到父元素](https://www.ikxin.com/article/konva-click-bubbling)

在 KonvaJS 中，事件冒泡是默认启用的，这意味着当在子元素上触发事件时，该事件将向上传播到父元素。因此，如果在图层上注册了 click 事件并在其上创建了一个组，那么单击该组也将触发该事件。 KonvaJS 并没有 stopPropa

[Web 前端](https://www.ikxin.com/category/web) 2023.03.295523 人浏览 [0 条评论](https://www.ikxin.com/article/konva-click-bubbling#comments)

[Canvas](https://www.ikxin.com/tag/canvas)

[![Vue.js 中的 v-model 和 model-value 响应式区别](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/28/64229c4ad0677.png)](https://www.ikxin.com/article/vue-model-reactivity)

## [Vue.js 中的 v-model 和 model-value 响应式区别](https://www.ikxin.com/article/vue-model-reactivity)

Vue.js 中的 v-model 和 model-value 都是用于实现表单数据的双向绑定的指令。 v-model 是 Vue.js 提供的一个语法糖，可以让开发者在模板中更方便地实现表单数据的双向绑定。当在一个表单元素上使用 v-mo

[Web 前端](https://www.ikxin.com/category/web) 2023.03.285238 人浏览 [0 条评论](https://www.ikxin.com/article/vue-model-reactivity#comments)

[Vue.js](https://www.ikxin.com/tag/vuejs)

[![Git Commit Message 代码约定式提交规范](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2022/05/19/62862f9890969.png)](https://www.ikxin.com/article/git-commit-conventions)

## [Git Commit Message 代码约定式提交规范](https://www.ikxin.com/article/git-commit-conventions)

上个月公司来了位前端大佬，给我们团队制订了一些技术方面的规范，其中有一项是关于在 Git 上提交代码写 Commit Message 的一些规范。开始我还觉得多此一举，看了许多大型项目的 Commit 记录之后，才知道这个规范算是行业里的标

[Web 前端](https://www.ikxin.com/category/web) 2022.05.195393 人浏览 [0 条评论](https://www.ikxin.com/article/git-commit-conventions#comments)

[Git](https://www.ikxin.com/tag/git)

## [jQuery 在线生成 t.cn 新浪短网址单页版小工具](https://www.ikxin.com/article/jquery-sina-shorturl-tool)

最近在学习 Ajax 技术，所以就经常会写一些小 Demo 出来，比如上次写的「jQuery 在线获取 QQ 名称和头像」，今天我带来的也是一个 Ajax 项目，主要功能是在线生成 t.cn 的新浪短网址，我看过网上很多的压缩网址，都是需要

[Web 前端](https://www.ikxin.com/category/web) 2017.08.106752 人浏览 [0 条评论](https://www.ikxin.com/article/jquery-sina-shorturl-tool#comments)

[jQuery](https://www.ikxin.com/tag/jquery) [ 短网址](https://www.ikxin.com/tag/short-url) [ AJAX](https://www.ikxin.com/tag/ajax)

[![美化 WordPress 后台的登陆页面](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/27/5d14d6a46336d.jpg)](https://www.ikxin.com/article/wordpress-admin-login)

## [美化 WordPress 后台的登陆页面](https://www.ikxin.com/article/wordpress-admin-login)

有没有很多人都和我一样，觉得 WordPress 默认的后台登录页面太丑了？强迫症的我当然受不了，于是就四处寻找修改后台登录页面的插件。 后来想了下，为了改一个页面就用插件会不会太大材小用了，所以我就想着利用 CSS 来实现修改后台登录页面

[Web 前端](https://www.ikxin.com/category/web) 2017.08.055672 人浏览 [0 条评论](https://www.ikxin.com/article/wordpress-admin-login#comments)

[WordPress](https://www.ikxin.com/tag/wordpress) [ CSS](https://www.ikxin.com/tag/css) [ 美化](https://www.ikxin.com/tag/beautify)

## [jQuery 在线获取 QQ 名称和 QQ 头像链接](https://www.ikxin.com/article/jquery-qq-profile)

昨天群里有人问到 Dux 主题的评论处输入 QQ 号直接获取名称和头像是怎么实现的，我看了一下 Dux 主题，发现并没有集成这个功能，倒是 Emlog 的 Dux 主题内置了这个功能，本来想移植过来 WordPress 的，但是发现 Eml

[Web 前端](https://www.ikxin.com/category/web) 2017.07.265247 人浏览 [0 条评论](https://www.ikxin.com/article/jquery-qq-profile#comments)

[jQuery](https://www.ikxin.com/tag/jquery) [ QQ](https://www.ikxin.com/tag/qq) [ 头像](https://www.ikxin.com/tag/avatar)

[![在线压缩解压 HTML、JavaScript、CSS 等源码](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11e3fe93731.png)](https://www.ikxin.com/article/html-js-css-tools)

## [在线压缩解压 HTML、JavaScript、CSS 等源码](https://www.ikxin.com/article/html-js-css-tools)

前几天本站发布了一个 HTML 在线运行的工具，来帮助大家学习前端 HTML，今天我继续发布三个非常实用的小工具，分别是 HTML、JavaScript、CSS 的压缩与解压工具，可以帮助大家更好地优化自己的网站哦，演示图在下方。 HTML

[Web 前端](https://www.ikxin.com/category/web) 2017.07.256862 人浏览 [1 条评论](https://www.ikxin.com/article/html-js-css-tools#comments)

[CSS](https://www.ikxin.com/tag/css) [ HTML](https://www.ikxin.com/tag/html) [ JavaScript](https://www.ikxin.com/tag/javascript)

[![jQuery 实现一个简单的网页的背景颜色渐变](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11b0434fb46.jpg)](https://www.ikxin.com/article/jquery-background-gradient)

## [jQuery 实现一个简单的网页的背景颜色渐变](https://www.ikxin.com/article/jquery-background-gradient)

今天在折腾网页背景的时候，把整个网站都弄成透明的了，这样一来就可以弄一个动态的背景。我首先想到了 CSS + jQuery，可是瞎搞了许久才发现没法和知更鸟主题兼容，两者必须舍弃一个，我自然是放弃了背景。 然后想了下，还是把做好的背景发出来

[Web 前端](https://www.ikxin.com/category/web) 2017.07.248435 人浏览 [0 条评论](https://www.ikxin.com/article/jquery-background-gradient#comments)

[jQuery](https://www.ikxin.com/tag/jquery)

[![网页特殊字符串 HTML 代码大全](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11df0350d2e.png)](https://www.ikxin.com/article/html-special-characters)

## [网页特殊字符串 HTML 代码大全](https://www.ikxin.com/article/html-special-characters)

在编写网页 HTML 时，经常会需要用到一些特殊字符。这些字符往往无法直接通过键盘输入，所以我们需要使用对应的 HTML 实体代码。这些代码在 HTML 手册中都有记载，但查阅起来并不方便。 为了方便自己和大家写网页时快速找到需要的字符代码

[Web 前端](https://www.ikxin.com/category/web) 2017.07.195290 人浏览 [0 条评论](https://www.ikxin.com/article/html-special-characters#comments)

[HTML](https://www.ikxin.com/tag/html)

[![「本站首发」在线运行静态 HTML 工具站](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11de54d7581.png)](https://www.ikxin.com/article/online-html-tools)

## [「本站首发」在线运行静态 HTML 工具站](https://www.ikxin.com/article/online-html-tools)

学习前端时，经常需要运行一些测试代码。当时我大多使用一些在线工具，比如 Chinaz 的站长工具。现在前端技术学得差不多了，于是决定自己动手写一个在线运行工具，帮助更多人更方便地学习前端编程。下面是工具的演示图： 关于 LOGO：目前的 L

[Web 前端](https://www.ikxin.com/category/web) 2017.07.184514 人浏览 [0 条评论](https://www.ikxin.com/article/online-html-tools#comments)

[HTML](https://www.ikxin.com/tag/html)

[![使用纯 HTML 5 + CSS 3 画出 iPhone 6 手机模型](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11dac82c0e0.png)](https://www.ikxin.com/article/html-css-iphone6-model)

## [使用纯 HTML 5 + CSS 3 画出 iPhone 6 手机模型](https://www.ikxin.com/article/html-css-iphone6-model)

在 B 站看到一个 HTML5 作品，是利用纯代码来画出 iPhone 的渲染图，觉得挺有意思的，就发出来给小伙伴们也参考参考，下面先来张效果图： 差不多快 60 行的代码，也不到 60 行，纯代码写的，没有用一张图片素材，包括电池图标和信

[Web 前端](https://www.ikxin.com/category/web) 2017.07.114324 人浏览 [0 条评论](https://www.ikxin.com/article/html-css-iphone6-model#comments)

[CSS](https://www.ikxin.com/tag/css) [ HTML](https://www.ikxin.com/tag/html)

## [CSS 实现自定义浏览器滚动条样式](https://www.ikxin.com/article/css-scrollbar-styling)

今天访问憧憬博客时，发现他网站的浏览器默认侧边滚动条被修改成了自定义样式。后来上网查询了一下，得知该样式可以通过 CSS 来设计。于是我自己捣鼓了一下，顺便把 CSS 代码借了过来，本站已经用上了，效果大家可以自己看看。 注意： 该样式仅限

[Web 前端](https://www.ikxin.com/category/web) 2017.07.084427 人浏览 [0 条评论](https://www.ikxin.com/article/css-scrollbar-styling#comments)

[CSS](https://www.ikxin.com/tag/css)

## [网页添加累计运行时间 JavaScript 代码](https://www.ikxin.com/article/javascript-uptime-timer)

本站成立差不多二十天了，时间不算太长，毕竟才是刚刚开始，于是我就想着写个在线计时器来给网站记录已运行的时间。废话少说，直接开始吧。 首先我想到了用 JavaScript 来定义时间，然后再用 HTML 输出。最麻烦的主要还是时间计算问题。下

[Web 前端](https://www.ikxin.com/category/web) 2017.06.077281 人浏览 [0 条评论](https://www.ikxin.com/article/javascript-uptime-timer#comments)

## [「防君子不防小人」禁用浏览器查看网页 HTML 源码](https://www.ikxin.com/article/disable-view-source-code)

有的时候我们搭建了一个简单的 HTML 网站，又不想让别人看到网页的源代码，这时候我们就要用到代码来禁止别人查看 HTML 代码，我们先分析下别人是怎么查看网页源代码的吧。 一般的我们都知道通过浏览器当你打开一个网页的时候，等网页完全加载好

[Web 前端](https://www.ikxin.com/category/web) 2017.05.265927 人浏览 [0 条评论](https://www.ikxin.com/article/disable-view-source-code#comments)

[HTML](https://www.ikxin.com/tag/html)

## [「悼念」将整个网站页面变成黑白两色](https://www.ikxin.com/article/website-black-white)

记得去年知名歌手乔任梁去世的时候，百度图片破天荒的给他搞了个黑白网页，使得所有用户在百度图片搜索乔任梁的时候都是显示全站黑白的，对于一些需要悼念的日子，很多人也都想把自己的网站弄成全站黑白来表示自己的哀悼之情。 下面我就附上开启全站黑白的教

[Web 前端](https://www.ikxin.com/category/web) 2017.05.227423 人浏览 [0 条评论](https://www.ikxin.com/article/website-black-white#comments)

[CSS](https://www.ikxin.com/tag/css) [ HTML](https://www.ikxin.com/tag/html)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/category/web#webpage","@type":"WebPage","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","name":"Web 前端","url":"https://www.ikxin.com/category/web","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/category/web"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.