前端
关注
分享
扫一扫
文章平均质量分 66
html,css,javascript等
程序猿向前跑
qq：1917671527
展开
-
前端网格布局grid
grid-template-columns也就是几列,我这边是4列, 所以需要写100px, 100px, 100px, 100px。比如这里,第一行就第一个格子表示a,其他都是没有,所以用点.来表示。然后子项目,也就是容器里面的方块,我们用grid-area,这样写太麻烦,可以直接写成 repeat(4,100px)grid-template-rows是几行,道理是一样的。这个是用来表示布局如何分配,如何分布,就像一个草图一样。然后是grid-template-areas,原创 2023-02-18 13:36:47 · 1344 阅读 · 0 评论 -
前端开发常用案例（二）
【代码】前端开发常用案例（二）原创 2023-02-18 09:47:20 · 3572 阅读 · 0 评论 -
We‘re sorry but vue3test doesn‘t work properly without JavaScript enabled. Please enable it to conti
项目在打包的过程中。原创 2023-02-17 22:18:23 · 1168 阅读 · 1 评论 -
前端开发常用案例（一）
【代码】前端开发常用样式。原创 2023-02-16 11:13:59 · 3111 阅读 · 0 评论 -
onShareAppMessage 微信小程序
监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。原创 2023-02-02 15:51:39 · 5433 阅读 · 0 评论 -
前端效果-css+javascript
【代码】双开门效果-css+javascript。原创 2023-01-14 09:20:48 · 168 阅读 · 0 评论 -
JS中的防抖
用 time 来控制事件的触发,然后建立一个延时器,用固定事件500ms来控制事件的触发,输出this.value ,那么之前,需要进行一个判断,判断time是不是有值,如果有值就去清掉time,然后下面的代码又重新赋值给time`。原创 2022-12-22 16:20:59 · 200 阅读 · 0 评论 -
vite.config.js-element-plus
1、首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。一、根据element-plus官网给的方法配置自动导入。原创 2022-11-15 21:51:35 · 648 阅读 · 0 评论 -
export 和 export default 的区别
pc端的学习。原创 2022-11-15 19:28:38 · 160 阅读 · 0 评论 -
实现放大镜的效果
实现放大镜效果原创 2022-11-01 16:09:49 · 203 阅读 · 0 评论 -
offsetWidth / offsetHeight等
offsetWidth / offsetHeight原创 2022-11-01 11:44:01 · 755 阅读 · 0 评论 -
CSS之伪元素 ::before
border的大小为1px，所以伪元素的宽为2px，按理说高也为2px，但是浏览器默认字体大小为16px，虽然字体大小为16px，但是字体实际所占的位置的高为21px，所以伪元素的高为2+21=23px；行内元素是有默认行高的，就是字体所占的高度。伪元素：操作元素的子元素，如 ::before、::after、::content等等。解释： block元素不设置宽高时，宽度跟随父元素宽，所以是200px。结果： 高为2px， 宽为200px。结果： 宽为2px，高为23px。原创 2022-10-28 09:36:04 · 2201 阅读 · 0 评论 -
JavaScript 中 call()、apply()、bind() 的用法
JavaScript 中 call()、apply()、bind() 的用法原创 2022-10-26 14:06:08 · 98 阅读 · 0 评论 -
require.context()
require.context()原创 2022-10-18 17:01:48 · 659 阅读 · 0 评论 -
检验空数组和空对象以及两个数组比较，去重
检验数组和对象的方法原创 2022-09-21 13:51:54 · 439 阅读 · 0 评论 -
CSS多行省略的几种方法
css换行原创 2022-09-13 15:19:49 · 402 阅读 · 0 评论 -
(0 , _login.default) is not a function ES6，小程序浮点数精度问题
es6原创 2022-09-06 11:31:41 · 678 阅读 · 0 评论 -
document.activeELement和antdesign-useForm
JavaScript中document.activeELement焦点元素原创 2022-08-18 22:31:44 · 473 阅读 · 0 评论 -
rowspan, colspan 用法
原生表格原创 2022-08-18 15:01:02 · 12483 阅读 · 1 评论 -
正则表达式[\S\s]的意思
正则原创 2022-08-17 23:17:19 · 1892 阅读 · 0 评论 -
数据处理函数es6
reduce函数定义：reduce()方法接受一个函数作为累加器，数组中的每个值（从左到右）。语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)total:计算结束后的返回值 （必须）currentValue:当前元素 (必须)currentIndex:当前元素的索引(可选)arr:当前元素所属的数组对象(可选)initialValue:传递给函数的初始值(可选) total() {原创 2022-05-28 11:09:55 · 597 阅读 · 0 评论 -
css3，flex笔记
::before原创 2022-03-15 11:20:08 · 636 阅读 · 0 评论 -
JSON和JavaScript的关系
JSON 与 JS 对象的关系很多人搞不清楚 JSON 和 JS 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。如：var obj = {a: ‘Hello’, b: ‘World’}; //这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含var json = ‘{“a”: “Hello”, “b”: “World”}’; //这是一个 JSON原创 2021-08-21 17:20:59 · 1002 阅读 · 0 评论 -
echart，数据可视化
echarts一组柱状图两根柱子中间无缝隙在 series 某一个bar下面加这个： barGap: ‘0%’,原创 2021-11-24 11:38:36 · 102 阅读 · 0 评论 -
正则表达式
.表示除\n之外的任意字符\w 在查阅很多相关正则的描述之后，发现对于\w 的释义都是指包含大 小写字母数字和下划线 相当于([0-9a-zA-Z]). 匹配除换行符以外的任意字符\w 匹配字母或数字或下划线或汉字 等价于 ‘[^A-Za-z0-9_]’。\s 匹配任意的空白符\d 匹配数字\b 匹配单词的开始或结束^ 匹配字符串的开始$ 匹配字符串的结束\w能不能匹配汉字要视你的操作系统和你的应用环境而定https://www.runoob.com/regexp/regexp-synt原创 2021-11-12 21:23:50 · 445 阅读 · 0 评论 -
从Url中获取某一参数的参数值:var reg = new RegExp(“(^|&)“ + name + “=([^&]*)(&|$)“, “i“)；详解
https://blog.youkuaiyun.com/weixin_44296929/article/details/101207166点击跳转转载 2021-11-10 20:20:43 · 408 阅读 · 0 评论 -
前端面试题
HTML,CSS2.请简述css盒子模型一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框4.HTML5新增的内容有哪些新增语义化标签新增表单类型表单元素表单属性表单事件多媒体标签5.Html5 新增的语义化标签有哪些语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维原创 2021-10-25 11:45:44 · 294 阅读 · 0 评论 -
bootstrap
记录自己的学习过程，更多内容参考菜鸟教程和bootstrap官网https://www.bootcss.com/bootstrap基础模板BootStrap模板<!DOCTYPE html><html lang="en"> <head> <!--设置当前HTML文件的字符编码--> <!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）--> <!--声明当前网页在移动端原创 2021-10-17 15:06:25 · 700 阅读 · 0 评论 -
jquery 的学习
this只是个自定义的变量； this只是个自定义的变量； this只是个自定义的变量； (this)是将当前don对象转换成jquery对象 ； 一般定义jquery变量习惯开头，提高可读性而已。 开头，提高可读性而已。 开头，提高可读性而已。 (this)是把DOM对象封装成jquery对象，其相当于一个集合。...原创 2021-09-29 10:25:37 · 393 阅读 · 0 评论 -
移动端WEB开发之响应式布局
1. 响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时我们的响应式尺寸划分超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px原创 2021-09-11 11:09:27 · 1071 阅读 · 0 评论 -
移动WEB开发之rem适配布局
方案 ？页面布局文字能否随着屏幕大小变化而变化？流式布局和flex布局主要针对于宽度布局，那高度如何设置？怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？1. rem 基础rem 单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。rem的优势：父元素文字大小可能不一致， 但是整个原创 2021-09-10 16:05:12 · 680 阅读 · 0 评论 -
移动WEB开发之flex布局-携程网案例
1.1 传统布局与flex布局建议：如果是PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持2.1 布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器原创 2021-09-09 20:37:11 · 615 阅读 · 0 评论 -
移动WEB开发之流式布局-京东案例
2. 视口视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口2.1 布局视口 layout viewport视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手原创 2021-09-09 15:30:42 · 898 阅读 · 0 评论 -
浏览器私有前缀
浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。私有前缀 -moz-：代表 firefox 浏览器私有属性 -ms-：代表 ie 浏览器私有属性 -webkit-：代表 safari、chrome 私有属性 -o-：代表 Opera 私有属性3… 提倡的写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px.原创 2021-09-09 13:47:07 · 132 阅读 · 0 评论 -
HTML5 和 CSS3 提高
1. HTML5 的新特性HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明：新特性增加了很多，但是我们专注于开发常用的新特性。1.1 HTML5 新增的语义化标签以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。<div class=“header”> </div><di原创 2021-08-17 16:51:16 · 150 阅读 · 0 评论 -
jQuery核心-滑动效果，选择器，样式等（一)
原生JavaScript功能强大，但是开发比较复杂，而jQuery能够简化我们的开发过程，下面开始对jQuery进行学习。1.1 JavaScript 库仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原原创 2021-08-15 10:19:07 · 577 阅读 · 0 评论 -
JavaScript核心-PC 端网页特效（四）
1.1 offset 概述offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意： 返回的数值都不带单位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2021-08-14 10:45:01 · 783 阅读 · 0 评论 -
JavaScript核心-定时器-异步同步等（三）
8.1 常用键盘事件事件除了使用鼠标触发，还可以使用键盘触发。注意：如果使用addEventListener 不需要加 ononkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。三个事件的执行顺序是： keydown – keypress — keyup8.2 键盘事件对象注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。在我们实际开发中，我们更多的使用keydown和keyup， 它能识原创 2021-08-13 20:47:12 · 3980 阅读 · 4 评论 -
JavaScript核心-兼容性问题等（二）
5.8 三种动态创建元素区别document.write()element.innerHTMLdocument.createElement()document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂createElement() 创建多个元素效率稍低一点点，但是结构更清晰总结：不同浏览原创 2021-08-13 15:29:39 · 2321 阅读 · 5 评论 -
JavaScript核心内容-前端必备技能（二）
4. 操作元素4.5 排他思想案例：百度换肤原创 2021-08-13 10:06:23 · 427 阅读 · 0 评论