CSS
文章平均质量分 55
我就不思
你才不菜鸡!只不过是对手太强了!
展开
-
Bootstrap更改默认的“请在电子邮件地址中包含@”
今天开发一个外贸系统,必须全部英文的,但是使用到bootatrp 4的input标签的type="email"输入没有含“@”符号时会提示:“请在电子邮件地址中包含@”中文提示!一开始以为是中国下载的谷歌是浏览器自带的提示,可能国外没有的!原创 2024-06-28 09:17:27 · 162 阅读 · 0 评论 -
object-fit属性
当图片比例不固定时,想要让图片自适应,一般都会用background-size:cover/contain,但是这个只适用于背景图。保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。宽度和高度中短的那条边跟容器大小一致,长的那条等比缩放。长度和高度中长的那条边跟容器大小一致,短的那条等比缩放,可能会留白。mode 有 14 种模式,其中 5 种是缩放模式,9 种是裁剪模式。内容拉伸填满整个盒子, 但不保证保持原有的比例。原创 2024-06-14 17:44:20 · 234 阅读 · 0 评论 -
Next.js Tailwind CSS UI组件
今天公司使用到一个前端ui框架——Next.js Tailwind CSS UI组件!这从头构建一个AI驱动的前端UI组件生成器,生成Next.js Tailwind CSS UI组件:原创 2024-06-06 17:30:46 · 1092 阅读 · 0 评论 -
margin-left: auto;使元素靠右
今天写样式遇到一个东西,就是需要表单居右显示的,但是作用了弹性布局,其他的都不行的,一开始使用了浮动,但是使用了浮动后盒子就不继承父盒子的宽度了,移动端还行,自动回到100%状态,但是pc端宽屏的时候就被吃掉了一截!原创 2024-05-28 15:46:35 · 317 阅读 · 0 评论 -
css实现扫码循环扫描特效
需求中需要模拟扫描的效果来实现户型的生成!由于接口ai生成的图片户型时间比较长,所以需要模拟特效!原创 2024-04-07 17:30:50 · 478 阅读 · 0 评论 -
Flex布局下居中滚动溢出截断处理
遇到一个需求,在uniapp swiper下实现轮播图,图片的高度是自适应的,超出屏幕设备的高度的时候,滚动显示全部,图片的高度没有超过屏幕的高度时候,上下居中于屏幕的中间!下面写了个dome来研究一下这!原创 2023-12-20 12:05:33 · 1229 阅读 · 0 评论 -
css实现四角圆边框
封装了对应的盒子给到对应的class,给不同高宽来实现原创 2023-09-28 09:51:59 · 675 阅读 · 0 评论 -
前端面试锦集
基本面试:做过最满意的项目是什么?项目背景?为什么要做这件事情?最终达到什么效果?你处于什么样的角色,起到了什么方面的作用?在项目中遇到什么技术问题?具体是如何解决的? 如果再做这个项目,你会在哪些方面进行改善?基础扎实:IT行业,哪些发展好的同学都是具备扎实基础知识,如果理解计算机基础会更好,因为我们面临很多非前端计算问题的。主动思考:被动完成任务成长会很慢的,需要有自己的想法,而不是仅仅是完成任务的。自动学习:前端领域知识淘汰速度很快,需要经常学习新知识。追溯深度:遇到问题是多研究背.原创 2020-09-02 14:44:02 · 4873 阅读 · 2 评论 -
浮动布局再续前缘
最近在写商城专题,有PC端和移动端!由于本人移动端写的页面比较多,一般都是使用弹性布局来适配不同分辨率的!所以我写PC端的时候也使用弹性布局+绝对定位来画页面的!但是在我电脑上正常,到了测试那边由于分辨率不一样出现了表单错位的现象!后来想到还有一个浮动布局,只不过我基本没有用过!说真的这次解决掉的适配还是浮动布局搞定的!所以要好好复习一下浮动布局!...原创 2022-08-27 15:23:56 · 205 阅读 · 0 评论 -
space-between时,当为两个内容时中间被空出的解决方案
用flex布局时用到justify-content:space-between属性让弹性容器内的元素向两端对齐,并且平摊对应的宽度!原创 2022-05-19 09:25:29 · 4995 阅读 · 3 评论 -
浪漫情怀的灵魂·520表白源码
程序员不仅仅只有代码,还有诗和远方!谁说程序员就是闷葫芦了!原创 2022-05-12 17:57:19 · 277 阅读 · 2 评论 -
关于column-count多列布局内容被切割在下列的解决方法以及瀑布流实现方式
问题:这部分的内容应该是第二列的,但是跑到第三列去了,陷入不合理的!原创 2022-05-12 17:13:44 · 3160 阅读 · 1 评论 -
CSS给给图片添加流动边框
需求:给一张图片添加流动的边框!原创 2022-03-03 16:23:22 · 481 阅读 · 0 评论 -
v-for下定时给图片添加动画
需求:在vue中v-for遍历图片列表依据index时定时给图片添加动画!原创 2022-03-02 17:56:28 · 488 阅读 · 1 评论 -
vue中swiper position:fixed;拖动内容会丢失
今天vue项目中遇到使用vue-awesome-swiper两个swiper联动,滑动渲染的内容会不见了!原创 2021-11-21 20:20:27 · 1094 阅读 · 0 评论 -
Vue中v-html图片溢出
前端发中个经常遇到渲染富文本的需求!但是也会有很多问题,今天遇到v-html渲染富文本时图片会溢出,找了很多方法没有用!然后自己试了很多次五一中发现的实现方法!原创 2021-11-19 15:50:04 · 1260 阅读 · 0 评论 -
[CSS]控制图片<img src=“ “>没有时隐藏
当src为空值时的状态:css隐藏:img[src=""],img:not([src]){ opacity: 0; border:none; visibility: hidden; max-width: none; }这样处理,站位符父级还是会存在的,<div class="list_img" v-if="item.images != undefi原创 2021-11-16 16:52:14 · 1974 阅读 · 0 评论 -
vue报Duplicate keys detected:‘XXX‘.This may cause an update error
報錯問題:Duplicate keys detected: ‘查看訂單不會的原因’. This may cause an update error.雖然不影響,但是還是要解決的,不然一進來强迫症的我看到控制臺波鴻就是不爽!問題排查:v-for循環裏,key值可能重複了,所以會報這錯誤,以前遇到,沒有記錄,忘記了。分析:key必須是唯一的,如果重複了就會報錯的。解決方案:把key值改爲index(其實就是用索引做key值),就可以避免這種情況!...原创 2021-10-28 11:48:23 · 2406 阅读 · 0 评论 -
谈谈v-if显示隐藏问题
vue条件语句v-if中条件较多时优雅写法普通写法:v-if=" type==1 || type==2 || type==3 "优雅写法:v-if=" [1,2,3].includes(type) "更高级写法:使用方法,复用性高,适用场景:多个标签都需要用到此判断,这样多个标签中的v-if只要用到matchState方法,都可以做判断注意写法:matchState(某元素,/[匹配值]/)标签中: v-if="matchState(type,/[123]/)"方法中: metho原创 2021-10-23 17:44:35 · 3399 阅读 · 2 评论 -
根据后端返回来的不同参数值显示不同的class
需求:根据后端返回的不同参数值来显示二维码不同的位置(居中、左上角、左下角、右上角、右下角)后台返回给我的数字是 1、2、3、4、5,根据数字不同对应不同的class显示不同的位置,本来是用if写的,但是代码量太多,就研究了一下相比之下比较简单的方法。说明:触发对应的图片来生成对应的海报来控制二维码的位置,如果回来的字段为空,则默认显示居中的状态(三维运算符)!如果可以使用v-for来遍历控制更好做,直接拿取数组的应对字段来控制 :class=“locStyle[imgList.locatio.原创 2021-07-09 09:34:47 · 500 阅读 · 0 评论 -
cubic-bezier处理下拉和回弹
* 下拉和回弹 * 1.关闭bounce避免ios端下拉冲突 * 2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉 * transition设置0.1秒延迟,让css来过渡这段空窗期 * 3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-be...原创 2020-07-19 16:55:03 · 1192 阅读 · 0 评论