CSS
Jerry cat
前端工程师,最近在搞编辑器相关
展开
-
原生实现placeholder
主要是使用css的伪类和属性来实现的,具体有两种方法原创 2022-07-04 16:04:48 · 140 阅读 · 0 评论 -
前端一周小结
写switch语句的时候报Unexpected lexical declaration in case block错误比如写了下面这段代码,查了一下文档,发现中文文档中解释比较简单:该规则禁止词法声明 (let、const、function 和 class) 出现在 case或default 子句中。根据文档是要加上花括号去包裹,而且这里Eslint提示的是意外的词法声明,应该是和作用域有关,写了代码测试一下:控制台报错了,提示a变量已经被声明,说明虽然逻辑没走到case 1这里,但是ca原创 2021-11-26 20:51:21 · 439 阅读 · 0 评论 -
前端开发小结
正则相关匹配空标签/<([a-z0-9]+?)(\s+[a-zA-Z]+=".*")?><\/\1>/g上面的正则是匹配不到像<br/>这种自闭合标签(base、link、meta、input、image、br)的,要匹配自闭合标签需要下面的正则:/<(?:[^"'>]|"[^"]*"|'[^']*')*>/g或/<(?:[^"'>]|(["'])[^"']*\1)*>/g备注:()表示捕获分组,()会把每个分组里的匹配的原创 2021-11-15 21:22:14 · 841 阅读 · 0 评论 -
body有8px的神秘边距
首先,你需要知道为什么会有8px的神秘边距:很多元素默认有一个8px的 margin,而且在不同浏览器上表现效果不同在项目中,通常都是使用reser.css重置所有的样式表,可以保证在所有浏览器下,项目展示的样式是一致的:(1)在项目中应用:在asset的css中插入reset.css文件,// main.jsimport @/assets/css/reset.css(2)或者在demo这样写:<style>* { margin: 0; padding: 0;}&l原创 2021-11-02 14:11:30 · 2257 阅读 · 0 评论 -
鼠标事件mousemove拖动到iframe上监听失效问题
问题:监听鼠标拖动事件mousemove,当鼠标移动到页面嵌的iframe上时,事件无法被监听到,当鼠标移出iframe后,事件又能被监听到了。解决:可以创建一个层级高的div覆盖在整个项目上面,然后监听该div的鼠标移动事件。const mask = document.createElement('div')mask.style.cssText = 'position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 9999;原创 2021-10-28 18:08:46 · 6053 阅读 · 2 评论 -
word-break在行内元素内无效
再加上white-space: normal就行了原创 2020-11-30 17:24:02 · 824 阅读 · 0 评论 -
Vue项目嵌入编辑器的坑还有项目工程化的解决方案
上周项目用了许久的百度编辑器Ueditor应为太久不维护要更换编辑器了。预研后选择stackedit作为新的编辑器(虽然也好久没维护了),但耐不住功能比Ueditor多啊,后面还能进行二次开发。现在总结下自己遇到的坑:1、编辑器自己有开后端去运行,要把他改造成纯前端编辑器。怎么办呢,只能从头 git 代码下来修修改改了。找到后端运行代码,把里面逻辑修改成发送给后端或者改成 localstorage 本地存储。2、vue-cli版本太低。打开项目,发现vue-cli版本是2.6以下的,我的项目是2原创 2020-10-17 17:19:22 · 674 阅读 · 0 评论 -
一天一个小页面(4)
卡片展示效果今天复习了CSS的内容,就写点CSS的吧!1、效果图2、思路综合用css的知识、、、animation啊、弹性布局啊、ul的排列啊、文字的变换啊3、代码<div class="pricing-table"> <div class="col"> <div class="table"> ...原创 2019-07-20 23:51:11 · 499 阅读 · 0 评论 -
一天一个小页面(3)
掉方块今天时间比较紧,那就写个小小页面解压吧1、效果图2、思路创建多个宽、高都相等的小li,进行浮动排列,也可以用弹性布局,创建div包含所有span然后flex:row wrop;然后用css3新增的box-shadow效果会更好哦!javascript的话①如果你用li,那就可以用事件浮动去触发鼠标悬停在li上的事件②如果你用span,那就用document.querySele...原创 2019-07-20 00:21:28 · 884 阅读 · 0 评论 -
一天一个小页面(1)
跳动的红心今天写跳动的红心1、思路首先要用css实现一个爱心的话,我是用一个正方形+两个半圆画出来的。然后用CSS3动画的animation实现跳动效果。用CSS写的话效率高。2、界面今天写跳动的红心1、思路首先要用css实现一个爱心的话,我是用一个正方形+两个半圆画出来的。然后用CSS3动画的animation实现跳动效果。用CSS写的话效率高。2、界面:...原创 2019-07-16 21:34:31 · 136 阅读 · 0 评论 -
一天一个小页面(2)
手风琴特效图片轮播1、效果图2、思路一个div嵌套创建一个ul>li*4实现字体垂直排列:——用一个div包裹他,宽得和图片最小化时的宽度一致;——再设置他的margin就行实现鼠标移动到图片滑动显示整个图片效果 :——用js对li:hover伪类绑定一个animation动画实现第三步后会发现如果快速滑动鼠标在四个图片上时第四个图片会下移到下面——原因:anima...原创 2019-07-18 19:09:16 · 229 阅读 · 0 评论