前端css
css屏蔽图片长按选中下载
在移动端开发中，我们通常不希望页面的图片被长安选中可下载，会禁用图片选中事件，这时，css不能使用通配符全局设置 pointer-events:none; 否则会把所有点击事件禁用。 解决方案 img { box-sizing: border-box; -moz-user-select: none; ......
css border不能同时设置圆角和 border-image
如标题，css border不能同时设置圆角和 border-image，当我想要实现既有圆角，并给圆角加 border-image的时候，发现无法同时生效，只有 border-image会生效。 <!DOCTYPE html> <html lang="en"> <head> <meta chars ......
前端打包部署后接口BASE_URL不对问题解决办法
在前端打包部署时，为了免去不同环境打包的麻烦，项目用的流水线触发方式。在这里不细说，重点说说下面情况。 当项目提交打包部署后，访问压测环境或者生产环境的地址来使用项目时，发现接口报错404。 在NETWORK里发现接口的BASEURL和当前环境需要调用的后端baseurl不同。 主要问题在于配置问题 ......
【前端可视化】Canvas 绘制图层覆盖了怎么办？
`ctx.globalCompositeOperation = 'destination-over';` >Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 属性设置要在绘制新形状时应用的合成操作的类型，其中 type ......
前端使用Blob生成伪链接
Blob（二进制大对象）是一种特殊的数据类型，用于表示二进制数据。它可以保存任意类型的数据，包括图像、音频、视频、文件等。 Blob 对象通常在浏览器环境下使用，它提供了一种在客户端处理二进制数据的方式。Blob 对象包含两个重要的属性：`size` 和 `type`。 - `size` 属性表 ......
CSS精灵技术
一、CSS精灵 需求： 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的 ......
前端项目创建
1.public文件 1.1 ico文件是浏览器上显示的小图标 1.2 index.html 单页应用的唯一html文件 2.src文件夹 2.1 api会去封装我们发给后端的请求 2.2 request.js帮我们封装了axios 2.2.1 请求拦截器 帮你往请求头里面塞数据进去 2.2.2 响 ......
前端埋点、pv/uv统计、前端监控
1. pv/uv统计 pv: 页面重复浏览量 统计方式，多页面应用通常在页面load事件，单页应用通常在页面路由中 uv: 页面独立访客浏览量 统计方式，pv统计的基础上，添加唯一标识，可以是IP地址，用户浏览器localStorage存储的uuid等。 IP地址存在局域网内的共享一个ip、代理、动 ......
CSS :last-child选中不了元素
1.情况：当div：finaincingMark-right-item后还有div：sliderLine时，使用finaincingMark-right-item:last-child无法选中finaincingMark-right-item遍历后的最后一个div：finaincingMark-ri ......
CSS中实现元素居中的七种方法总结
在前端开发中，经常需要将元素居中显示，CSS提供了多种技术方法来实现元素的居中，在不同场景下有不同的使用方法、不同的效果，需要特别记住它们的应用场景才能够正常的居中。这篇文章就大致总结一下CSS中的居中方法。 一、元素分类 在CSS中，元素大致可以分为以下几种： 1.块级元素（Block-level ......
CSS font-weight
主要理解UI给得英文名 对应得数值 字体粗细：‘font-weight’属性名称： font-weight取值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900初始： nor ......
css grid布局(网格布局)笔记
## Grid 布局 ### 网格布局的基本概念 [CSS 网格布局](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout)引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。 #### 什么是网格？ 网格是一 ......
前端Vue自定义手机号文本格式化组件手机号码文本转星号
#### 前端Vue自定义手机号文本格式化组件, 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13231 #### 效果图如下: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1f ......
前端Vue自定义银行卡号格式化组件 中间卡号文本转星号
#### 前端Vue自定义银行卡号格式化组件 中间卡号文本转星号, 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13230 #### 效果图如下: ![](https://p3-juejin.byteimg.com/tos-c ......
前端Vue自定义微信支付弹框dialog alert popup
#### 前端Vue自定义微信支付弹框dialog alert popup, 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13245 #### 效果图如下: #### ![](https://p3-juejin.byteimg ......
Web前端：JavaScript的10个实际应用
JavaScript在网络上无处不在。它是最常用的编程语言，97.7%的网站使用JavaScript作为客户端编程语言。因此，如果你想找一份网络开发人员的工作，JavaScript技能是必不可少的。 JavaScript广泛用于构建网站和web应用程序。我们来讨论一下JavaScript在各个细分领 ......
前端自适应写法--媒体查询
自适应一般什么rem，vw,vh这些单位注意一下。还有就是一些bootStrap什么的。在这里主要写一下媒体查询的方式。 使用CSS中的媒体查询来根据不同的屏幕尺寸应用不同的样式。以下是如何使用媒体查询分别为320px-480px范围内、768px-1024px范围内和大于1024px的屏幕尺寸编写 ......
618技术揭秘：探究竞速榜页面核心前端技术
本文将探究京东竞速榜H5页面的核心前端技术，包括动画、样式配置化、皮肤切换、海报技术、调试技巧等方面，希望能够为广大前端开发者提供一些有用的参考和思路。 ......
前端文件上传的几种交互造轮子
前端文件上传本来是一个常规交互操作，没什么特殊性可言，但是最近在做文件上传，需要实现截图粘贴上传，去找了下有没有什么好用的组件，网上提供的方法有，但是没找完整的组件来支持cv上传，经过了解发现可以用剪贴板功能让自己的cv实现文件上传，于是自己就整合了目前几种文件上传的交互方式，码了一个支持cv的vu... ......
webpack前端项目调试环境安装入门：禁用UglifyJs只合并JavaScript不压缩混淆代码
webpack是目前比较流行的前端build工具，本质上是一个模块打包器。合并压缩JavaScript,css,图片等。 目前有很多开源项目使用webpack进行打包，下面介绍的是如何编绎这些开源项目。 webpack安装 webpack目前的版本较多，各个版本使用上区别也较大，一般在项目的 pac ......
CSS
# 第1章 CSS简介 ## 1.1 HTML的局限性 1. **HTML是一个非常单纯的东西，只关注内容的语义** ## 1.2 CSS—网页的美容师 1. **CSS是层叠样式表的简称。** 2. 有时我们也会称为CSS样式表和级联样式表。 3. CSS也是一种标记语言。 4. CSS主要用于设 ......
css居中（自己常用的，不全）
水平居中: 1.text-aligin:center 如果仅使用 text-align:center; 是无法达到水平居中的效果的，为什么？ text-align:center; 需要在行内块元素上使用的，而盒子是块级元素，所以，需要将盒子转换为行内块元素 text-align:center; 才能 ......
了解微前端
什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 微前端架构旨在解决 ......
前端解决跨域
重新整理了下 Vue 的接口去跨域的事，其实就两个地方实际生效，其他地方乱写端口什么的反倒是阻碍了。这边展示 Vue3+Vite 的例子： ```js // 写在vite.config里 server:{ port:81, //定义前端程序使用的端口 disableHostCheck:true, p ......
css常用技巧
1、多行文本溢出隐藏 ```css div{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; // ......
《深入解析 css》笔记
第一章：层叠、优先级和继承 1.优先级：！important>行内样式>id 选择器>类选择器>标签选择器 2.两条经验法则：选择器少用 id；少用!important。 3.使用 inherit 属性使元素属性继承自父元素，方便修改。 4.使用简写属性的时候会默认给细化的属性赋默认值，如标签 h1 ......
前端项目部署到nginx
# 前端项目部署到nginx 1. 配置好本地的nodejs环境 2. 切换到前端项目所在的文件目录 3. 以命令行的方式运行`npm run build`命令 4. 命令执行成功会生成dist文件夹，将文件夹中的内容压缩上传到nginx_html数据卷对应的目录下 5. 执行解压命令`unzip ......
《css 揭秘》笔记
粗读了《css 揭秘》这本书，里面提到的很多技巧和操作暂时用不到，可以在用到时当工具书看，目前对我有帮助的几个技巧做了个笔记。 尽量使用相对单位。line-height 与 font-size 的比例而不要使用绝对值。em 单位（相对于当前元素的字体大小）可以在修改字体尺寸同时修改其他的数值。rem ......
CSS实现根据子元素数量应用不同样式
theme: condensed-night-purple highlight: atelier-cave-light 在前端的页面布局中经常会出现在子元素个数使用不同的样式的需求，比如文章列表，在较少内容下单列表现，而在元素内容较多时使用双列表现。再比如在页面排版上，可以根据元素内容的多少来修改内 ......