前端css
CSS实现文字镂空效果炫酷背景效果
CSS实现文字镂空效果炫酷背景效果 css3中的mix-blend-mode css3中有一个mix-blend-mode的screen混合模式，可以轻松实现镂空文字效果。背景我们可以固定定位设置一个静态图片，gif动态图，视频video，svg动画等等。 代码案例 <!DOCTYPE html> ......
Vins-Mono 阅读笔记——前端
1、前端流程概述 VINS-Mono的前端整个封装成了一个ROS节点其订阅的topic是： 相机或者数据集发来的图片 其发布topic是： 由pub_img发布的"feature"，发布的是当前帧的特征点，特征点分装成了sensor_msgs::PointCloudPtr类型，里面包括了每个特征点的 ......
前端性能优化-gzip压缩
提纲： GZIP是什么 如何启用gzip 什么时候应该启用gzip 1、gzip压缩是什么 gzip是一种文件压缩格式，它可以将文件压缩为较小的大小，以便更快地在网络上传输或存储在磁盘上。gzip压缩算法适用于文本类型的数据，通常用于压缩Web服务器上的静态资源文件，例如HTML，CSS，JavaS ......
CSS基本格式，和引入外部CSS文件
<html> <head> <meta charset="UTF-8"> <title>demo3</title> <style> /*style标签范围内为CSS环境*/ /*标签样式*/ p{ color: red; } /*类样式*/ .font20{ font-size: 20; } /*i ......
若依管理系统前端实践
若依管理系统是一套基于若依框架开发的后台管理系统，它是一个前后端分离的项目，前端使用vue, Element, 后端使用Spring Boot & Security。这篇随笔中将记录一下自己在使用过程中前端使用上的一些收获和问题。 目录 1. 路由控制 1.1 简述 1.2 token的检验 1.3 ......
css Position用法
相对位置和绝对位置 现有3个div如下 <style> .brother { width: 200px; height: 200px; background-color: yellow; } .father { width: 200px; height: 200px; background-colo ......
css浮动问题
引出问题 这是一个正常的排版 代码如下 <style> .father { width: 200px; border: 1px solid red; } .son { width: 100px; height: 100px; background-color: blue; } </style> <d ......
前端笔试遇到的两个编程题
倒计时： 在倒计时不超过一天的代码 var hour = document.querySelector(".hour"); var minute = document.querySelector(".minute"); var second = document.querySelector(".se ......
好用的CSS全局关键字属性值
什么是全局关键字属性值？ 全局关键字属性，可以理解成：所有CSS属性都可以使用的属性值。 举个不是全局关键字属性值的例子： background-color: #000000 上面的 #000000 就是CSS数据类型<color>中的属性值，但是<color>数据类型，并不能使用在下面的场景： / ......
css边距合并的问题
上下两个盒子边距合并问题 <style> * { margin: 0px; padding: 0px; } div { width: 100px; height: 100px; } .top { background-color: red; margin-bottom: 20px; } .botto ......
CSS标准盒子模型与怪异盒子模型
<style> * { margin: 0; padding: 0; } div { /* 宽高改变的是内容大小 */ width: 200px; height: 200px; } /* w3c标准盒子：盒子的总大小=内容+内边距+边框+外边距 */ /* 只要改变 内容，内边距，外边距，边框，盒子 ......
使用 MQTT 实现前端消息传递
MQTT 是一种轻量级的消息传递协议，广泛应用于物联网和分布式系统中。在前端应用中使用 MQTT 可以实现实时消息传递和数据同步。本文将介绍如何使用 MQTT 在前端应用中实现消息传递。 安装 MQTT.js 要使用 MQTT，在前端应用中，需要安装 MQTT.js。在终端中执行以下命令： npm ......
css伪元素选择器
<style> p::before { content: "当不想添加元素又想在其前面插入文字时使用"; } p::after { content: "当不想添加元素又想在其后面插入文字时使用"; } /* 当鼠标选择时发生 */ p::selection { color: red; } /* 选择 ......
CSS伪类选择器
伪类选择器 选择第几个元素 <style> /* 类num后代li的第1个 */ .num li:first-child { color: red; } /* 类num后代li的最后一个 */ .num li:last-child { color: red; } /* 类num后代li的第3个 */ ......
CSS基础选择器
基础选择器 前端页面结构如下 <h1>h1:标签选择器对选定的所有的标签都生效</h1> <p>p:标签选择器对选定的所有的标签都生效</p> <div class="green">div:类选择器测试</div> <div id="myid">id选择器测试，id是唯一的</div> 效果展示如下 ......
2023.04.07 - 前端常用解决跨域问题的方案
JSONP：JSONP（JSON with Padding）是一种前端跨域请求的方式，它利用了 HTML 中的 <script> 标签没有跨域限制的特点，通过动态创建 <script> 标签，构造一个特殊的 URL，让服务端返回一段指定的 JavaScript 代码，然后在本地执行这段代码以达到跨域 ......
完美的模板CSS
body { margin: 0px; padding: 0px;} .left { background: #313541; width: 20%; float: left; position: absolute; top: 0px; bottom: 0px;} .top { width: 80% ......
k8s前端部署
//前端项目打包构建；支持多环境 pipeline { agent any environment { //GIT路径 GIT_PATH = "threegene/dev/zproduct/server/demo.git" //项目名称, 使用Job名称作为项目名称 PROJECT_NAME = " ......
前端里那些你不知道的事儿之 【window.onload】
相信很多前端开发者在做项目时同时也都做过页面性能优化，这不单是前端的必备职业技能，也是考验一个前端基础是否扎实的考点，而性能指标也通常是每一个开发者的绩效之一。尤其马上接近年关，页面白屏时间是否过长、首屏加载速度是否达标、动画是否能流畅运行，诸如此类关于性能更具体的指标和感受，很可能也是决定着年底你... ......
前端代码0bug经验分享
如何写好代码其实是一个很大的话题，本次仅分享一些自己的经验之谈，有其他idea的欢迎交流 在我看来，写好代码更多的是逻辑思维的体现，而这，紧靠一两次分享是无法提高的，我只能尽可能的将可能可以复制的经验进行分享 本次分享不会涉及太多你使用的框架的具体使用细节，技术选型总是千变万化的，我们需要的是抓住不 ......
雪花算法生成的Id过长，前端接收精度丢失
1.问题现象： 表的Id使用雪花算法生成，数据库使用bigint类型可以正常存储，后端使用Long类型也可以正常接收，postman进行请求测试，也可以看到后端正常返回的数据，但是前端接收后显示的id不正常。 2.问题原因： 前端使用number类型进行接收，number类型的范围小于后台Long类 ......
前端FileReader 文件预览
这玩意好像挺强，可以操作用户选择的文件，转为base64或者二进制，blob； 1、实际应用 我的行车记录仪记录事反着放的，所以查看视频都是反过来的，那么我就写了个html，选择对应视频反向播放； input框选择视频文件后，我们就能拿到当前视频文件，使用 let f = new FileReade ......
css 实现文字交融展开动画
css 实现文字交融展开动画 效果 👇👇👇👇👇 <div class="textCont"> <span class="text">这是一条测试文案</span> </div> css: .textCont{ filter: contrast(30); background: #000; ......
直播平台制作，html+css复刻登录输入框
直播平台制作，html+css复刻登录输入框 <!DOCTYPE html><html><!-- *Material文本框 *作者：程序员阿诺斯 *时间：2023-3-5 0：50--><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp ......
免费分享前端面试题，vue面试题，TypeScript基础知识点 PDF格式
免费分享前端资料，面试题，电子书 接前端开发，带徒弟，一对一教学，远程协助，bug修改 微信： ......
vue前端纯小白向快速扫盲贴集合
看的一些博客，对于刚入门被前端各种东西搞得头昏的小白扫盲还是很有帮助的，可以快速理解前端总说的一些东西到底是干什么的。 1 创建vue项目所需外部环境 node npm vue/cli脚手架 官网下载node.js 直接下一步下一步即可，管理员打开cmd 执行 node -v正确返回版本 如何升级n ......
前端加入摄像机人脸识别（mediapipe）
前端加入摄像机人脸识别（mediapipe） import { Camera} from "@mediapipe/camera_utils"; import {FaceMesh} from "@mediapipe/face_mesh"; // <script src="https://cdn.jsd ......
前端cookie,localStorage,sessionStorage区别
图片源自B站up技术蛋老师的视频, 自己大体总结一下关键词:cookie:早期技术,体积小,本地和服务器都存储; localStorage:有效期无限(直至被手动删除),跨窗口,微信小程序等用的缓存storage基于此;sessionStorage:只能同一窗口中有效,有效期到窗口关闭 ......
css居中之vertical-align
现有布局： <div class="div"> <span class="span"></span> </div> 样式： .div{ height:24px; } .span{ display:inline; /*或者 inline-block/table-cell; */ line-height ......