×

css3

使用 div 实现 input、textarea 并支持输入框 placeholder 属性(解决浏览器兼容性)

小海 小海 发表于2024-04-23 浏览6959 评论0
解决这个问题的初衷:在做文本编辑器时,系统自带的 textarea 在 火狐 浏览器中回车不会进行换行,被显示成了空格,找了好几种方案没解决,试了下 div 实现 input、textarea 的方式,发现可以完美解决这个问题 # 使用 contenteditable=“true” 实现的文本框全选内容 # 输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true” 实现的输入框也支持) 一、div 实现 textarea 1、给 div 添加 cont

css3

记一次web中对svg基于图形拖动和缩放卡顿的性能优化(svg.js) - viewbox vs transform

Yζั͡琰ั͡✾???? Yζั͡琰ั͡✾???? 发表于2024-04-23 浏览6039 评论0
前言 在web中对svg图形的操作,我使用svg.js库挺久的了,对svg图形的拖动缩放我一直用的衍生插件svg.panzoom.js svg.panzoom库对svg拖拽缩放是对viewBox的设置来实现的,至于使用viewBox来缩放、拖拽的原理,建议各位百度了解一下,不细说了(以后有空可以讲解一下) 最近使用这个库拖拽svg发现了一个比较严重的性能问题(其实之前一个项目就发现了,不过当时没有这么卡顿且需求是只用同时预览一张图即可),对性能没有太大要求,便没有多管,现在这个项

css3

Swiper插件的使用和介绍(swiper组件的常用属性)

Athey Athey 发表于2024-04-23 浏览6350 评论0
Swiper介绍 swiper是一款开源的解决前端开发中触摸滑动案例的插件 swiper官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发https://www.swiper.com.cn/ swiper的使用 使用swiper首先要下载swiper  下载完成后在官网在线演示中找到你所需要的  这里我选择了基础演示中的010  首先在你下载的压缩包中找到010的demo文件  打开后点击鼠标右键打开网页源代码 打开编辑器在自己项目中引入s

css3

position四个属性详解

淡然 淡然 发表于2024-04-23 浏览8019 评论0
1. position:static; 这个属性让元素使用正常的布局(元素在文档常规流中当前的布局位置)。 也就是说元素没加这个属性和加了以后位置都是不变的 只是此时 top, right, bottom, left 和 z-index属性无效。 2. position:relative;:相对定位 在元素原有的位置基础上,根据设置的top,left调整元素位置 不会改变页面布局,不影响其他元素的偏移,因此会在此元素未添加定位时所在位置留下空白 position:relati

css3

【Web前端】CSS详解(中篇)(web前端 css)

snkqq123 snkqq123 发表于2024-04-23 浏览6790 评论0
CSS相对复杂一点,但也是前端很重要的一部分,我准备分上中下三篇来写! 一.CSS盒子模型(Box Model) 所有HTML元素可以看作盒子! 1.CSS 盒子模型 在CSS中,盒子模型用于设计和布局。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 说明: Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容

css3

HTML三大布局方式

半梦半醒 半梦半醒 发表于2024-04-23 浏览5321 评论0
欢迎使用Markdown编辑器 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 一、浮动布局 (float布局) 使用浮动来完成左中右三栏布局 float:left----左浮动 float:right----右浮动 注意:使用float浮动时,margin:0px auto;使块元素居中将会失效。 代码示例 <!DOCTYPE html> <html> <head> <meta charset="

css3

css实现轮播图(css实现轮播图自动切换)

网站制作 网站制作 发表于2024-04-22 浏览13725 评论0
轮播图:就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 轮播图的实现代码: 1)创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致,这样就可以保证一次轮播一张图片 最外部的盒子 <div class="box1></div> 最外部盒子的css样式 .box1{ width:722px; height:358px; margin:0 auto; overflow: hid

css3

自学WEB前端到什么程度可以去找工作?(自学web前端到什么程度可以去找工作呢)

IPASS IPASS 发表于2024-04-22 浏览5421 评论0
有的人只学到js就找到了实习的工作,有的人学了框架做了项目练习,但是基础不够扎实,一样也找不到工作。 说到底,找工作就是实力+运气。技术扎实、学历好就代表你硬实力强,你找工作就不怎么需要运气。相反,如果你学历差技术还很弱,那你找工作运气就非常重要。 碰运气式的找工作,只需要跟网上说的那样,大致掌握HTML、CSS、JavaScript、Vue,能鼓捣出一两个项目,就能去碰碰运气,尝试找一些基础的代码搬砖工作。 我个人是很讨厌网上这些说学完前端三件套就能上手框架的言论的,在我看来说这些话的人

css3

懒加载前端的图片(三种方式) (前端实现图片懒加载)

金百丰广告 金百丰广告 发表于2024-04-22 浏览5472 评论0
何为懒加载🌃: 在我们访问一个图片展示比较多的网页时,加载速度慢很多时候正是因为图片多导致,大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面,若用户只查看了网页的前面部分便离开,许多已经加载却因为处于网页底部而未呈现在视口区的图片,它们极大加重服务器压力了但是用户看都没看,白白浪费了性能。   为了解决上面的问题需要引入图片懒加载,懒加载其实很好理解,重点就是一个‘懒’字。当用户滚动相应可视区域,若可视区域有图片便加载,而在可视区域外未加载

css3

js dom节点操作的增加和删除(js移除dom节点)

神经蛙 神经蛙 发表于2024-04-22 浏览5258 评论0
一、增加元素节点 我们想要增加一个节点,节点不能凭空产生,我们需要先创建一个节点,创建一个元素节点的操作很简单。例如我们想要在一个 ul 的标签添加一个 li 标签。 (1)创建一个节点操作 var li=document.createElement('li'); (2)添加节点操作 添加节点有两种方式: 第一种是 node.appendChild(node) node 代表的是父级,child 代表的是子级 ,需要注意的是,它是从后面追加元素,类似于数组中的push var ul=do

css3

浏览器指纹js代码实现重写(WebRtc,WebGl,Rect,Audio)

凡间教主 凡间教主 发表于2024-04-22 浏览7772 评论0
JS获取浏览器的指纹,个人总结如下几个方案 1、Canvas:用Canvas画一张10X10像素的图片,随便找几个位置加写黑点。把这张图片转成base64字符串,用360浏览器和谷歌浏览器得到的结果,是不一样的,2台不同电脑的360浏览器结果也不一样。我自己想,应该是生成一张图片,关系到浏览器,主板,显卡,cpu都有参与,所以稍微有点不一致,base64的结果就会有出入。 2、Plugins:获取浏览器的navigator.plugins(浏览器插件) 3、UserAgent:最