前端html css
纯 CSS 实现瀑布流式排版
最近写了个页面，想到了用瀑布流实现页面布局。在我看来一个合格的横向瀑布流式布局包含以下几个条件： 1、每个内容块高度可以不等，但宽度相等。 由于内容的不确定性，内容块的高度应根据内容高度伸缩。高度相等的话就变成了网格布局，规整倒是规整，不仅没有瀑布效果，内容的个性也无从体现。 2、内容块应进行横向排 ......
Web前端技术栈（待更新......）
一、HTML 1、什么是HTML 1.1、初识HTML HTML：==Hyper Text Markup Language(超文本标记语言)== 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势 ①世界知名浏览器厂商对HTML5的支持 1、微软 2、Google 3、苹果 ......
HTML编辑器如何能实现直接粘贴把图片上传到服务器中
图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例：打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉 ......
记录--前端加载超大图片(100M以上)实现秒开解决方案
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 前端加载超大图片时，一般可以采取以下措施实现加速： 图片压缩：将图片进行压缩可以大幅减小图片的大小，从而缩短加载时间。压缩图片时需要注意保持图片质量，以免影响图片显示效果。 图片分割：将超大图片分割成多个小图块进行加载，可以避免一次 ......
前端设计模式——状态模式
状态模式（State Pattern）：将对象的行为和状态分离，使得对象可以根据不同的状态来改变自己的行为。在前端开发中，可以使用状态模式来管理页面的状态和响应用户的交互。 在状态模式中，对象的行为取决于其内部状态，当状态发生变化时，对象的行为也会相应地发生改变。这种模式通过将状态抽象为独立的类来实 ......
普通css实现table表格过长数据隐藏，鼠标停留显示全部
在<style></style>中添加下面代码 table { table-layout: fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } table td { position: relative; /*width: 80px;*/ height: ......
HTML to PDF
一、iTextSharp 1、安装组件 2、封装的代码 using iTextSharp.text; using iTextSharp.text.pdf; using iTextSharp.tool.xml; using System.Text; namespace CommonCore.Helpe ......
CSS实现跑马灯效果
盒子区域 创建一个大盒子，用来装我们的广告语，还有跑马灯的四个小盒子 <div class="box"> <div></div> <div></div> <div></div> <div></div> 创意广告 </div> 设置box样式 * { padding: 0; margin: 0; } ......
web-lottie 前端动画效果
资源 http://airbnb.io/lottie/#/web lottie 官网 动画的实现逻辑借用官网的一句话 Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects anim ......
css实现霓虹灯特效字体
在开始之前先了解外部字体的引入： vite中字体的引入方法（.otf字体等）如下： 1、在src下的assets文件夹下创建font文件夹，将下载好的字体包放到该文件夹下 2、在font文件夹下创建font.css文件，如果你用的是scss，那么就是font.scss。less同理。 3、在font ......
前端已死？后端已亡？弯弯绕绕，几分真几分假
前端已死，我认为更多的是一种焦虑情绪的表达，市场确实不太好，但这并不是针对前端，是整个互联网行业衰败的表现而已，对此持不同意见的怕是只剩培训机构了吧！毕竟唱衰的永远是打工人，唱兴的都是培训班。打心底讲！如果一个前端，工作3年，只会Vue2/React，看不懂框架报错、看不懂请求异常、连给浏览器打断点... ......
前端vue获取后端返回的富文本内容不是标签是转义字符解决方法
新手的我就直接上代码 template部分(UI框架用的vant) <template> <div class="common-bg"> <van-nav-bar title="消息中心" left-arrow :fixed="true" :placeholder="true" @click-lef ......
前端导出表格方法
exportMyReport(){ let userInfo = JSON.parse(this.user) let data = new FormData();//接口参数格式 data.append('userid',userInfo.userId); data.append('roleid', ......
《前端serverless 面向全栈的无服务器架构实战》读书笔记
第1章 什么是severless 什么是NoOps 利用自动化运维代替手工运维模式 什么是severless 开发者无需关注服务器资源配置情况、部署情况、操作系统以及依赖软件等在内等所有细节，这一切都由平台完成，开发者只需要专注于业务实现。 serverless是指在应用的构建环节或应用环节都无需对 ......
CSS 组合选择符
CSS 组合选择符 组合选择符说明了两个选择器之间的关系。 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格 分隔) 子元素选择器(以大于 > 号分隔） 相邻兄弟选择器（以加号 + 分隔） 普通兄弟选择器（以波浪号 ～ 分隔） 后代选择器 后代 ......
前端安全问题——暴破登录
暴力破解登录是一种常见的前端安全问题，攻击者尝试使用不同的用户名和密码组合来登录到受害者的账户，直到找到正确的用户名和密码组合为止。攻击者可以使用自动化工具，如字典攻击、暴力攻击等来加快攻击速度。 ......
阿里云OSS前端直传+net core后端签名
OSS前端直传+后端签名 一、服务端签名后前端直传 首先安装阿里云SDK Aliyun.OSS.SDK.NetCore public static string accessKeyId = "你的accessKeyId"; public static string accessKeySecret = ......
CSS必知必会
CSS概念 css的使用是让网页具有统一美观的页面，css层叠样式表，简称样式表，文件后缀名.css css的规则由两部分构成：选择器以及一条或者多条声明 选择器：通常是需要改变的HTML元素 声明：由一个属性和一个值组成，每个属性有一个值，属性和值使用类似key：value的形式（如下方h1就是选 ......
在Vue3+TypeScript 前端项目中使用事件总线Mitt
事件总线Mitt使用非常简单，本篇随笔介绍在Vue3+TypeScript 前端项目中使用的一些场景和思路。我们在Vue 的项目中，经常会通过emits 触发事件来通知组件或者页面进行相应的处理，不过我们使用事件总线Mitt来操作一些事件的处理，也是非常方便的。 ......
了解CSS Module作用域隔离原理
CSS Module出现的背景 我们知道，Javascript发展到现在出现了众多模块化规范，比如AMD、CMD、 Common JS、ESModule等，这些模块化规范能够让我们的JS实现作用域隔离。但CSS却并没有这么幸运，发展到现在却一直没有模块化规范，由于CSS是 根据选择器去全局匹配元素的 ......
前端性能精进之浏览器（五）——JavaScript
JavaScript 是一种通过解释执行的高级编程语言，同时也是一门动态、弱类型的直译脚本语言，适合面向对象（基于原型）和函数式的编程风格。 直译语言可以直接在解释器中运行，而与直译语言相对应的编译语言（例如 C++），要先将代码编译为机器码，然后才能运行。 不过直译语言有一个弱点，就是如果有一条不 ......
前端设计模式——模板方法模式
模板方法模式（Template Method Pattern）：定义一个行为的骨架，而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个行为的结构即可重定义该行为的某些特定步骤。 这些步骤被称为“具体操作”（Concrete Operations），而整个行为的结构和顺序则被称为“模板方法”（T ......
前端设计模式——桥接模式
桥接模式（Bridge Pattern）是一种结构型设计模式，用于将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构，从而能够更好地组合和扩展这些类。 在前端开发中，桥接模式通常用于处理 UI 组件的复杂性，将组件的抽象与实现分离，使得它们能够独立地变化。通过桥接模式，我们可以让组件的 ......
前端设计模式——过滤器模式
前端设计模式中的过滤器模式（Filter Pattern）是一种结构型设计模式，它允许我们使用不同的条件来过滤一组对象，并返回符合条件的对象列表。 在过滤器模式中，我们有一个包含多个对象的列表，需要根据一些条件来筛选出符合条件的对象。通常情况下，可以使用多个过滤器来实现这个功能。每个过滤器都是一个独 ......
maui BlazorWebView+本地html (vue、uniapp等都可以) 接入支付宝sdk 进行支付宝支付 开发 Android app
首先添加支付宝sdk的绑定库 nuget 包：Chi.MauiBinding.Android.AliPay 项目地址：https://github.com/realZhangChi/MauiBinding 新建maui Blazor应用，在根目录创建一个静态类PublicMethods.cs （类名 ......
CSS 高阶小技巧 - 角向渐变的妙用！
本文将介绍一个角向渐变的一个非常有意思的小技巧！ 我们尝试使用 CSS 绘制如下图形： 在之前，类似的图案，其实我们有尝试过，在 单标签实现复杂的棋盘布局 一文中，我们用单标签实现了这样一个棋盘布局： 那么，本文有什么特殊之处呢？让我们一探究竟。 快速实现网格布局 首先，上述的布局还是希望使用一个标 ......