前端css
CSS基础
为满足网页的需要,来进行前端代码的学习 CSS基础 一:style <style> css标签 </styte> 例:对p标签进行更改 <style> p{ color:red; /*像素*/ font-size: 30px; /*背景*/ background: aqua; /*宽度*/ widt ......
css
/* *{ padding: 0; margin: 0; border: none; } */ /* margin: auto; =0 auto上下为0,左右自适应*/ /* body{ display: flex; justify-content: center; align-items: cen ......
handsontable 前端类似excel组件
基于table https://handsontable.com/docs/javascript-data-grid/demo/ 基于canvas canvas-datagrid 基于canvas SpreadJS ......
【前端】IMG 标签 src 地址为 HTTPS 时,图片不显示
【前端】IMG 标签 src 地址为 HTTPS 时,图片不显示 1、问题描述 最近将网站升级为 HTTPS 时,发现富文本中的图片不能显示。如果单独将图片地址,在浏览器上请求,图片显示正常。 2、解决方法 自动将http的不安全请求升级为https 页面的head中加入: `upgrade-ins ......
前端项目代码阅读指南
0. 把项目运行起来,如果npm总是报错,并且项目年代久远,直接放弃,找一个能跑起来的看。 1. 看 package.json ,了解项目中用到了哪些依赖,这些依赖一般都是怎么使用的,项目结构大概什么样子 2. 看目录,猜一下每个目录下的文件都是干什么的 3. 看入口文件,一般是index.js,或 ......
Vue3 前端传递字典格式会变味
axios .post('http://127.0.0.1:5000/'+modalAction.value+'_data',modalData.value,{headers:{'Content-Type':'application/json;charset=UTF-8'}}) .then(resp ......
前端随笔
1、webpack的作用 模块打包工具,可以将项目打包成兼容浏览器的格式,或者打包成手机app等。 它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用 2、node的作用 ......
记录-一个栗子让你彻底弄懂CSS3补间动画和逐帧动画
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS3提供了Animation关键帧动画,我们在工作中比较常用。但在写CSS动画的时候,其实Animation能实现两种动画模式: 补间动画 设置关键帧的初始状态,然后在另一个关键帧改变这个状态,比如大小、颜色、位置、透明度等,电脑将自 ......
系统化学习前端之JavaScript(ES6:异步编程)
系统化梳理 JavaScript 异步编程相关知识点,包括 Promise,generator 生成器函数,以及 async await 异步函数等。 ......
前端pdf预览-pdfh5
遇到问题 用iframe、embed 标签死活都加载不出1M以上的文件,最后用开源项目 pdfh5解决问题 github连接: gjTool/pdfh5: web/h5/移动端PDF预览插件 (github.com) 1. 下载pdfh5 2.引包 <link rel="stylesheet" hr ......
CSS 让 div 中的 img 标签图片完全填充 div
CSS 让 div 中的 img 标签图片完全填充 divdiv 下 img 标签中的图片填充满整个 div 容器显示一、基本概述 在平时的开发中有让 div 中的 img 标签中的图片完全填充整个 div 的需求,实现方式多种多样例如可以将 img 中的图片更改为 div 容器的背景图片再利用相应 ......
前端性能优化——图片优化
前端性能优化——图片优化 一、图片优化措施 优化图片是 Web 前端优化的重要一环,因为图片是 Web 页面中最耗费带宽和加载时间的资源之一。以下是一些通过优化图片来优化 Web 前端的方法: 压缩图片:压缩图片可以减少图片的文件大小,从而减少加载时间。 使用矢量图形:使用矢量图形(如 SVG)可以 ......
css3 箭头上下跳动
.container .stepsItem.permit .permitStepItem .table .showTable { width: .37rem; margin: .20rem auto; position: absolute; bottom: 0; left: 50%; margin- ......
前端项目首页加载速度及项目性能优化
提升首屏的加载速度或项目整体优化,是前端性能优化中最重要的环节,接下来跟大家分享一些常规且有效的首屏优化建议及做法。 一、路由懒加载 SPA项目,一个路由对应一个页面,如果不做处理,项目打包后,会把所有页面打包成一个文件,当用户打开首页时,会一次性加载所有的资源,造成首页加载很慢,降低用户体验,因此 ......
前端项目首页加载速度及项目性能优化
提升首屏的加载速度或项目整体优化,是前端性能优化中最重要的环节,接下来跟大家分享一些常规且有效的首屏优化建议及做法。 一、路由懒加载 SPA项目,一个路由对应一个页面,如果不做处理,项目打包后,会把所有页面打包成一个文件,当用户打开首页时,会一次性加载所有的资源,造成首页加载很慢,降低用户体验,因此 ......
CSS: position: relative absolute
<div class="course-b"> <div class="outer"> <div class="inner"></div> </div> </div> .outer{ margin: 50px; width: 200px; height: 200px; background: gray ......
app直播源码,css预加载旋转动画 与 流光字体
app直播源码,css预加载旋转动画 与 流光字体 一、预加载旋转动画 Html <view class="concentric_round"></view> css body {}.concentric_round {width: 200rpx;height: 200rpx;position: ......
前端性能精进(七)——构建
前端性能精进(七)——构建 前端构建是指通过工具自动化地处理那些繁琐、重复而有意义的任务。 这些任务包括语言编译、文件压缩、模块打包、图像优化、单元测试等一切需要对源码进行处理的工作。 在将这类任务交给工具后,开发人员被解放了生产力,得以集中精力去编写代码业务,提高工作效率。 构建工具从早期基于流的 ......
[CSS]文字超出一行隐藏+图片居中
来自酱酱。做个记录。 .book_item > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .book_item > div:nth-child(1) { display: flex; align-i ......
记一次springboot通过jackson渲染到前端,出现大写字母变成小写问题
前言 最近业务部门接手了外包供应商的项目过来自己运维,该部门的小伙伴发现了一个问题,比如后端的DTO有个属性名为nPrice的字段,通过json渲染到前端后,变成nprice,而预期的字段是要为nPrice。于是他们就找到我们部门,希望我们能帮忙解决一下这个问题,本文就聊聊如何解决问题,至于为什么会 ......
前端使用highcharts报错“Error: Highcharts error #13”
报错情况如下: 错误原因: 查找了下这个错误,图形容器无法找到,会导致报这个错误,两个页面都在使用同一个容器id时可能也会导致这样的问题,我遇到的是后者。。。。所以就改了一id然后就成功解决 如果是前者:建议 : 检查一下界面文件路径,或者F12查看一下是否有对应的图形容器 ......
前端使用highcharts绘制3D圆环图报错 “this.chart.is3d is not a function ”
废话不多说直接上解决办法: 需要在main.js中添加如下代码: import highcharts from 'highcharts' import highcharts3d from 'highcharts/highcharts-3d' highcharts3d(highcharts) ......
css 设置 div等于屏幕的时候直角,小于屏幕圆角
.card { border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 8px); } clamp() clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接 ......
前端Vue项目打包性能优化方案
一.前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面 ......
前端,将图片转为base64格式后保存至数据库
调用上述函数,因为onload回调是异步的,需要等图片转换成功后使用base64图片路径,所以需要包在promise实例内抛出去 this.imgBase().then(baseUrl =>{ // 使用成功回调拿到图片处理成功后的格式 }) ......
CSS文本属性(文本颜色、文本对齐、装饰文本、文本缩进、行间距)
本博文介绍CSS中常用的文本属性,包括文本颜色、文本对齐、装饰文本、文本缩进和行间距。 属性 说明 属性值 color 文本颜色 颜色(如red、green)#十六进制(如#ff0000) rgb代码(如rgb(255,0,0)) text-align 文本对齐 left(默认值,左对齐) righ ......
前端已死?金三银四?你收到offer了吗?
最近在脉脉、知乎等平台都有人在渲染前端从业人员的危机,甚至使用“前端已死”的字眼,颇有“语不惊人死不休”的意味,对老鸟来说,这关乎职业寿命,关乎生活,但因为浸淫行业多年,个中变化比较了解,应该不会太受影响,对新人可能就有误导了,甚至不敢入行。 ......
记一次前端页面切换卡死的排查经历
这是一个老项目的新迭代,项目由element admin改编而来,bug的症状是:来回切换页面,有概率页面卡死。 我首先怀疑是内存泄漏导致了页面卡死,因为有几个页面请求了很多的数据,页面中还用到了一些定时器。 首先尝试通过chrome的performance和memory来查看内存和性能的变化,但是 ......