共享博客 - 简单搜索

Css选择器-层次选择器（关系选择器）

2024年04月07日 1. E F 匹配 E 元素下所有的子元素 F （后代选择器） eg:.box a{ color: red; } 匹配 .box 下所有的子元素 a2. E > F 匹配 E 元素下第一级子元素 F （子选择器） eg:.box>a{ color: red; } 匹配 .box 下第一级子元素 a3. E + F 匹配 E 元素后面紧邻的哪一个 F 元素（有且仅有一个）（相邻兄弟选择器） eg:.box+h1

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

使用弹性盒设置不定/定宽高元素在窗口/父元素中水平垂直居中方法

2024年04月07日 1. 使用弹性盒的方式实现不定宽高的元素在屏幕窗口水平垂直都居中，方法如下:html,body{ height: 100%; } body{ display: flex; juastify-content: center; align-items: center; }2. 使用弹性盒的方式实现不定宽高元素在父元素水平都垂直居中，方法如下:父元素{ display: flex; justify-content:

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

公众号开发如何获取access_token，获取返回 errcode":40164 如何解决

2024年04月07日今天开始接触微信公众号开发，在获取 access_token 时，返回{ "errcode": 40164, "errmsg": "invalid ip 117.136.86.87, not in whitelist hint:[UIluoA05892067]" }意思是这个IP 117.136.86.87 不在白名单内我们需要登录微信平台，在“开发”--“基本配置”--“公众号信息开发”--“

前端 JS JavaScript

市场主流五大浏览器内核

2024年04月07日 1. IE浏览器内核：Trident（IE内核）；2. Mozilla Firefox（火狐）内核：Gecko；3.Safari，Chrome 内核Webkit4. Opera（欧朋）内核：Presto5. 最新版本谷歌浏览器内核：Blink （由Google和Operasoftware联合开发的浏览器排版引擎）

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css选择器-结构性伪类选择器

2024年04月07日 1. :first-child 匹配每个父元素下的第一个子元素 eg:.uls :first-child{ color: red; } 匹配 .uls 下第一个子元素 eg:.uls li :first-child{ color: red; } 匹配 .uls 下第一个子元素 li ，此时 li 必须是父元素下的第一个子元素注: :first-child 等价于 :nth-child(1) 都是匹配父元素下的第一个子

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css3基础变形的语法以及使用介绍

2024年04月07日语法:transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);注: 当多种变形方式综合在一起时，用空格隔开1. rotate 旋转( X/Y/Z 必须为大写 ) ① rotateX(30deg) 沿X轴翻转30deg 等价于 rotate3d(1,0,0,30deg) 3d空间的沿X轴翻转 ② rotateY(30deg) 沿Y轴翻转30deg 等价于 rotate3d(0,1,0,

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

VUE中实现获取手机验证码之后倒计时60s内不允许重新获取

2024年04月06日今天上班刚好调取验证码登录接口，网上找了一个很不错的demo分享给大家，代码如下<span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span>data(){ return { show: tr

前端 JS JavaScript vue

使用原生js来实现瀑布流效果

2024年04月06日瀑布流网页页面效果目前是一种很常见的布局，下面使用原生js实现一个瀑布流效果，附代码如下复制代码，图片路径自己修改即可<style type="text/css"> *{ margin:0; padding:0; } img{ vertical-align: bottom; } #box{ position: relative; margi

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

表单介绍及表单常用语法详细介绍

2024年04月06日表单：作用：用来搜集用户信息语法:<form method="get/post" action="服务器文件"></form> 1.文本框语法：<input type="text" value="admin"/>2.密码框语法：<input type="p

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css背景渐变属性语法介绍以及使用

2024年04月06日 1. 线性渐变语法:background: linear-gradient(tp top, red 0%, yellow 30%, green 45%); 注: 重复的线性渐变写法如下background: repeating-linear-gradient(red 0%, yellow 10%, green 20%) 重复的线性渐变必须自定义渐变的位置才能出现重复渐变的效果2. 径向渐变语法:background: -webkit-radial-

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

容器溢出关于 overflow 的属性值详细介绍

2024年04月06日容器溢出语法：overflow: visible | hidden | scroll | auto | inherit; visible: 默认值，容器溢出不裁剪，正常显示; hidden: 溢出部分隐藏不可见; scroll: 当容器没有溢出时，会显示一个默认的滚动条，当容器溢出时，显示一个可以滚动的滚动条; auto: 当容器溢出时，显示滚动条; inherit: 规定从父元素继承overflow属性;当然，还可以设置

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css背景切割与原点属性语法介绍以及使用

2024年04月06日 1. 背景切割语法:background-clip: border-box | padding-box | content-box; border-box: 默认值，背景在包含边框以内的区域可见 padding-box: 背景在包含padding以内的区域可见 content-box: 背景在content部分可见2. 背景原点语法:background-origin: padding-box | border-box | content-b

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

关于VUE常会问到的部分面试题

2024年04月06日 1.vue的虚拟dom？虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。2.如何理解vue中MVVM模式？ MVVM全称是Model-View-ViewModel；vue是以数据为驱动的，一旦创建dom和数据就保持同步，每当数据发生变化时，dom也会变化。DOMListeners和DataBindings是实现双向绑定的关键。DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

背景尺寸 background-size 属性语法介绍以及使用

2024年04月06日语法:background-size: 值;1. length 该属性值是设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果只设置第一个值，第二个值自动为auto，等比例缩放 eg:background-size: 300px 100px; /*有可能变形*/ background-size: 300px; 注: 背景图有可能会发生变形2. 百分比设置以父元素的百分比来设置背景图的宽度和高度，第一个值代表宽，第二个值代表高，如果省略号

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

弹性盒布局 flex项目属性介绍

2024年04月06日 1. order 设置 flex 项目的排列顺序，值越小越靠前2. align-self 设置某个 felx 项目不同于其他 flex 项目的交叉轴对齐方式语法:align-self: flex-start | flex-end | center | baseline | stretch;3. flex-grow 设置 flex 项目的放大比例语法:flex-grow： 0; 默认值为0，即使存在剩余空间，也不放大; 当值为1是，flex项目

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS