Html + Css + JavaScript
文章平均质量分 78
前端基础知识
CSDN_gmm
热爱生活、热爱代码
展开
-
纯css手写loading效果
css实现动画的加载效果原创 2021-12-17 15:04:47 · 982 阅读 · 1 评论 -
web前端面试资料整理-(欢迎各位补充,留言下方)
1、主流浏览器css兼容问题?Css hack方式:解决ie6-ie11,firefox、safari、oprera、chrome兼容问题浏览器引擎前缀:firefox(-moz-)safari/chrome(-webkit)oprera(-o-)ie(-ms-)2、vue生命周期?beforeCreatecreatedactivated(绑定了keep-alive标签才有这个)beforeMountmountedbeforeUpdateupdatedbeforeD原创 2020-09-18 15:52:03 · 215 阅读 · 0 评论 -
JS的reduce方法使用(数组去重)
话不多说:直接贴代码let a = {}let s = [ {index: 1, name: '张三'}, {index: 1, name: '李四'}, {index: 2, name: '王五'}].reduce((pre, cur) => { (a[cur.index] ? false : (a[cur.index] = true)) && pre.push(cur) return pre}, [])console.log(s)效果图:...原创 2020-06-04 16:04:50 · 202 阅读 · 0 评论 -
浏览器隐藏滚动条-支持火狐、谷歌、edge
下面是隐藏滚动条的样式:元素/样式选择器 { overflow-y: auto; // 隐藏滚动条 &必须是scss/less里面才有用 &::-webkit-scrollbar { /* WebKit */ display: none; } -ms-overflow-style:none; /* Edge */ scrollbar-width: none; /...原创 2019-10-31 10:58:00 · 2227 阅读 · 0 评论 -
Flex弹性布局 入门实例
利用flex布局,写了从一到九的麻将排版格式父元素(容器):flex containerflex-direction: 子元素(项目)的排列方向,默认 rowflex-wrap: 子元素(项目)的总宽度超出时是否换行,默认 nowrapflex-flow: 上两种属性的简写,默认 row nowrapjustify-content: 主轴 main axis 的对齐方式,默认 fle...原创 2019-10-17 10:53:44 · 525 阅读 · 0 评论 -
如何让被遮挡层可以进行事件点击?(纯CSS方法)
css属性添加:外层(被遮挡的层){ pointer-events: none;}内层(要发生事件的层){ pointer-events: auto;} pointer-events属性本身有很多取值,但只有none和auto可以用在浏览器上,其他都只能应用在SVG上取值none:元素永远不会成为鼠标事件的target取值auto:与pointer-events属性未指...转载 2019-10-15 10:28:42 · 472 阅读 · 1 评论 -
浏览器数据库IndexedDB - 增删查改实例
代码 :gitHub - indexedDB-Demo原创 2019-10-14 10:39:14 · 946 阅读 · 1 评论 -
解决跨域窗口的通信问题
Js前端解决方案: 1、片段识别符(fragment identifier) 2、跨文档通信API(Cross-document messaging)- window.postMessage()片段标识符 片段标识符指的是URL # 号后面的部分 比如http://example.com/xxx.html#flag的flag;改变片段标识符,页面不会刷新父窗口改变子窗口的URL...原创 2019-10-10 18:16:36 · 289 阅读 · 2 评论 -
Html5监听返回事件
Html5监听返回事件常使用的场景:移动前端1、安卓手机物理返回键2、苹果手机在企业微信打开浏览器的返回按钮开发语言是:vuevue-router模式:vue-router hash模式和html5 history api提供的模式都是不刷新页面来改变页面的内容演示代码:Html5监听返回...原创 2019-09-27 13:46:31 · 5379 阅读 · 2 评论 -
DIV文字展示(省略...、超出滑动等) - 使用white-space
省略文字…white-space: nowrap; // 一行显示overflow: hidden; // 不允许滚动text-overflow: ellipsis; // 省略符号...截图超出滑动white-space: nowrap; // 一行显示overflow-x: scroll;// 允许x轴方向滚动截图书写格式保留、溢出white-space:pre...原创 2019-09-29 11:17:20 · 683 阅读 · 0 评论