- 博客(42)
- 收藏
- 关注
RSS订阅原创 element-plus里el-date-picker日期选择器，默认值不显示的问题
找了很多方法，最终是给v-model="defaultTime"绑定初始值。
2024-01-10 15:00:48
1379
1
原创 单行、多行文本下划线自适应
结构：单行及多行文本下划线单行及多行文本下划线 单行及多行文本下划线 单行及多行文本下划线样式：a {color: #808080;text-decoration: none;background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.5)); 控制线的颜色background-size: auto 4px; 控制线的粗细background-repeat: repeat no-repeat;backgr.
2021-09-28 15:09:22
284
原创 Vue中生命周期钩子函数详解。
生命周期1.定义.从开始到结束(销毁)的过程就是一个生命周期钩子函数:在某事某刻自动被触发的函数称之为钩子函数.2.生命周期钩子函数beforeCreate 创建之前创建之前:什么都是undefined beforeCreate(){ console.group('==创建之前==') console.log(this.$el); console.log(this.$data); console.log(this.name); console.groupEnd() },
2021-03-30 22:22:35
153
原创 初始Vue你都应该了解什么？？？
一.引入直接通过cdn引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>二.基本语法* 1.产生一个vue实例,需要new Vue()* 2.需要传递一个jSON,{}有很多个选项: el,data,methods* 3.不能将vue挂载到html或者body标签上* 4.vue实例和元素节点是一一对应的关系.所以尽量使用id选择器做挂载点.* 5.所有的css样式选择器都可做
2021-03-29 22:38:17
91
原创 Set集合和Map集合的使用方法
1.Set集合 set是一个无序的 不重复的集合 它主要的特点就是不重复 主要用来去重 我们使用set集合的时候 需要new 也就是说他是一个对象1.使用 使用的时候 必须先进行实例化 可以传递一个参数 参数是可选 如果传递参数 参数是数组 返回的结果是set集合 去重之后的数组// set集合let arr = [11,33,99,88,66,99,88,66,99,88,66,99,88,66,99,88,66];// 实例化set集合let set
2021-03-11 21:10:24
181
原创 generator函数的使用方法和原理。
1.简介 ES6提供的解决异步编程的方案之一，Generator函数是一个状态机, 可控制函数执行过程 可暂停函数(惰性求值), 内部yield可暂停，外部调用next方法可启动，每次返回的是yield后的表达式结果2.使用 定义generator需要在function后面加上* ，调用函数不会打印任何函数数据，而是会返回一个指针对象 调用指针对象中的next方法，来执行generator函数中的内容，返回结果和iteraator相似// function mmm(){// y
2021-03-11 21:07:05
269
原创 百度导航条的写法jQuery
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ..
2021-01-14 09:42:05
575
原创 BOM的基本操作与设置
3.BOMBOM：Browser Object Model 浏览器对象模型console.log(window); //窗口 js中最大的一个对象//document和window//window--窗口 js中最大的一个对象//document--文档，html文档//所有的全局函数和全局变量都属于window,一般会省略window 3.1 window提供的系统方法(了解)3.1.1 系统提供的对话框//警告框alert("今天周末，考试吗?");//带确认对
2020-12-28 20:47:33
765
原创 DOM的基本操作与设置
3.1 获取3.1.1 DOM获取元素通过id名：document.getElementById（“id名”）：具体的实际的标签，获取的时候有就是有，没有就是没有通过TagName:document.getElementsByTagName（“标签名”）:整个文档中，获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签父元素.getElementsByTagName（“标签名”）:父元素中的,获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签
2020-12-27 22:23:19
589
1
原创 JavaScript实现时间倒计时（圣诞倒计时）
倒计时 原理：时间差 = 目标(未来)时间-当前时间目标(未来)时间可以随时改变，代码里面有显示的备注。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2020-12-23 22:29:02
672
原创 JavaScript中函数调用的方式和使用方法
2.函数函数的概念：函数是由事件驱动的或当他被调用时可重复使用的代码块使用场景：作为事件处理函数 标签.事件 = function(){}函数封装代码复用2.1函数的声明和使用普通声明方式声明：function 函数名(){代码块}调用：函数名（）表达式声明声明：var 变量 = function （）{ 代码块}调用：变量名() //1.普通函数声明方式 function study(){ console.log("沉迷学习，日渐消瘦
2020-12-18 22:09:30
447
1
原创 JavaScript的密码显示隐藏写法
代码如下，里面有详细注释。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
2020-12-16 22:05:45
368
原创 JavaScript开关灯具体操作
原理：利用if语句，鼠标点击换图片，再点击在换图片。具体图片代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></
2020-12-16 19:14:15
244
原创 JavaScript的流程控制语句有哪些？怎么使用
2.流程控制语句分类：顺序结构分支结构(分支结构、分支语句) ：if-else循环结构 for while2.1 分支结构ifif：如果，给一个假设条件，条件成立会执行一个操作语法：if(条件){ 条件成立执行的代码 } //1.如果有钱(100块),花两块买彩票，中500万 var money = 99; if (money >= 100) { console.log("花两块买彩票，中500万"); console.log("买50
2020-12-16 19:06:23
292
原创 js的数据类型有哪些？怎么使用？
1.数据类型根据数据特性、以及存储空间位置、存储容量进行划分。1.1数据类型的分类js数据类型分为6大类五大基本数据类型number ： 数值string：字符串 “” ‘’boolean：布尔 true falseundefined：未定义null：空复合类型(复杂类型、引用类型)object ： 对象array：数组function：函数1.2 基本数据类型number：小数、整数、 负数、二进制、八进制、十六进制、NaN、infinity//1.
2020-12-15 22:16:46
111
原创 怎么调用js？？？
1.JavaScript是什么？JavaScript是基于对象和事件驱动的解释性脚本语言。基于对象：js内部提供了一些对象（工具），这些对象的方法或者属性可以实现js的基本功能。事件驱动：浏览器对用户行为的直接响应，不需要经过服务器。解释性：浏览器可以直接识别js语言，逐行解析代码，不需要编译。编译性：高级语言，计算机没有办法直接识别和执行，必须先编译成计算机能够识别的，然后在一起执行。解释性：可以直接识别的代码，读一行执行一行。2.JavaScript组成ECMAScript ： Ja
2020-12-14 22:31:00
955
原创 响应式布局之grid网格布局，应该怎么用？
二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)<div class="container"> <div class="item"> <p>1</p> </div> <div class="item">2</div> <div class="item">3</div> <div class
2020-12-10 20:24:31
843
原创 什么是视口布局？
视口布局vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh100vw : viewport width 视口宽度，浏览器可视区域的宽度100vh : viewport height 视口高度，浏览器可视区域的高度750px 100vw 1vw = 7.5px;375px 100vw 1vw = 3.75px以设计稿为准:假设还是750px设计稿 750px=100vw 1px=0.13333vw;预设字体基础值 100px 1r
2020-12-08 20:19:02
229
原创 手机端和小程序端html5的写法
LESS导入css文件往另一个css文件里面导入.css--->.css .less --->.less 导入@import "文件路径";嵌套父子 嵌套 .a>.b .a { .b { }}兄弟平行 .a +.b .a { }.b { }如果想加伪类 ；.a{ //&代指上一级选择器 &:hover { }}编译后效果:.a
2020-12-05 23:37:33
800
原创 弹性布局css3与LESS语言的用法
弹性盒布局css3(伸缩盒布局)传统布局的局限性清除浮动影响很难实现居中结构不灵活 不能随时添加盒子弹性盒布局非常灵活 提供一套浏览器内置布局 特点：一维布局 固定的css属性决定了 这个布局一般用在移动端加在弹性父盒子身上的属性1. 声明弹性盒-webkit-display:flex;display:flex;2. 设置主轴方向flex-direction:row水平（默认）/row-reverse水平反向/column垂直/column-reverse垂直反
2020-12-04 08:37:00
195
原创 用css和html写的正方体，六面体的旋转和分离
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ .
2020-12-02 22:23:06
704
原创 动画的属性和用法
动画： 过渡， 变形， 关键帧动画过渡从一个状态到另外一个状态 （两个状态的连接 最初，最终）的变化 ，并且时间的持续transition: 要过渡的属性 持续时间s/ms 运动的曲线 延时的时间s/ms;transition: width 2s linear 0s; transition: all 1s linear 2s; transition:width 2s linear 0s ,height 1s linear 0s ,background-color .5s
2020-12-02 22:17:45
236
原创 css3新增的属性和用法
css3 就是css第3个版本 增加了一些选择器，布局，动画，背景，新盒模型，私有前缀。选择器表单选择器:focus 聚焦选择器 选择的是当下被聚焦的表单元素input:focus {}:checked 勾选 选择的是当下被勾选的复选框或单选框input:checked {}:disabled 选择的是当前被禁用的元素:enabled 选择的是当前没有被禁用的元素::placeholder 选择的是文本框里提示的文字属性选择器[ ]attr 属性名 value 属
2020-12-02 08:30:25
237
原创 双背景的写法案例案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ ..
2020-12-01 22:23:23
122
原创 html5语义化标签的使用和表单类型属性
语义化标签解决语义化兼容性问题表单控件类型表单控件属性音视频标签css3新增选择器新增语义化布局标签header.footer,nav ,aside, article>section, figure （推荐在移动端使用）ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题**解决兼容性问题 **ie8- 不认识标记 那我们让它认识即可手动去创建这些标记document.createElement(..
2020-11-30 21:17:01
257
原创 html中经典的多列布局和两列自适应布局
经典的多列布局自适应： 一个盒子的宽度随着屏幕宽度发生变化 单位：%两列自适应布局原理： 两列并排 左列固定宽度 右列宽度自适应（100%）/* 1.解决方案：左列+ float: left; *//* 2.解决方案 左列+ position:absolute */三列自适应布局原理： 左右两列固定宽度 中间列自适应 (100%)圣杯布局过程：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居
2020-11-27 22:33:30
1785
原创 什么是BFC规则？
BFC规则1. 什么BFC规则？Block Formatting Context 块级格式化上下文块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部2. 哪些属性可以触发BFC规则？ 1. float不为none 2. position属性为absolute和fixed 3. oveflow不为visiable 4. html 根标签 3. BFC有哪些规则 1. BFC盒子内部的子标签按照垂直从上到下排 2. 共用一个BFC盒
2020-11-27 22:23:04
594
原创 浏览器常见HTML兼容的问题
图片下间隙问题盒子>img 图片和盒子多的底边有一个默认的间距图片下间隙：原因：图片具有文本的特性—》 以基线对齐—》 间距就是基底之间距离解决办法：1. 给父盒子加字体属性2. 图片设置除了基线以外的对齐属性3. 给图片转块元素结构hack(条件hack)(ie10废除了)在ie的低版本里 查询一些盒子或者是样式要不要显示的条件 // 在什么地方需要显示 ie8- 条件是： 只要浏览器版本是ie8及其以下就显示这个p // lte: less tha
2020-11-27 22:19:43
142
原创 IE的兼容性问题及其解决
1、ie8下图片边框问题（经常遇见）<a> <img src=""></a>解决办法：reset.cssimg { //取消默认添加的边框 border:none;}2. ie8下透明度问题（经常遇见）其他浏览器背景透明, 内容不透明background-color:rgba(0,0,0,.3)背景和内容一起透明opacity:0-1; 0是完全透明 （消失） 1是不透明 ie8下透明度显示效果:..
2020-11-26 23:43:37
125
原创 html中的基本表单
表单结构作用：收集用户信息表单： 作用： 用来收集用户信息；也叫 表单框（表单域form）<form method=""></form>action: 传给后端的地址 method: 传给后端的方法GET： 从后端获取数据，数据量比较小，安全性比较低，速度较快POST： 向后端发送数据，数据量大，安全性高，速度较慢name: 表单的标识表单控件:在表单里面，绝大部分的表单控件都是input标签，通过type属性的不同来区分的，表单控件要写在form标
2020-11-26 23:35:00
161
原创 html5文本溢出应该怎么处理？
一共有三种方法，分别是：单行文本溢出实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap; (强制文本文本一行)效果如图：多行文本溢出实现方法1：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden; text-overflow:ellipsis;效果如图：适用范围：
2020-11-25 22:28:16
1164
原创 微信的滑动门技术应该怎么写。
微信滑动门技术（经典）什么是微信滑动门？特殊背景图技术（特点：背景图颜色单一，对称的，阴影，边框…）原理： 是一张宽度大小固定的图片铺到宽度不确定的盒子里 ，需要父子关系的两个盒子 ，内部盒子（子元素span）铺图片的右上角位置(backgrpund-position:100% 0%)，外侧盒子（父元素a）铺图片的左上角位置(backgrpund-position:0% 0%)。这两个是背景图需要可以下载<style> * { padding
2020-11-24 18:15:18
122
原创 html与css中都有哪些定位？
定位类型position静态定位position:static; 默认值静态定位不能使盒子位置变化 不适合布局作用：解决低版本浏览器兼容问题相对定位position:relative;1.能不能使盒子发生位置变化 （可以）2.参考对象：自身初始位置3.脱离不脱离标准流 不脱离标准（保留原来位置 ）4.是否适合布局：不适合布局（压盖，特殊位置）因为会留空白作用：1. 微调元素的位置（相当于外边距）2.辅助绝对定位(子绝父相)#### 绝对定位position:absolute
2020-11-23 18:41:46
208
原创 浮动对布局的影响
行内块并排缺点：中间有间距文本内容行数 多少不一样的时候 会出现对不齐现象浮动属性作用： 专业解决并排float: left左侧浮动/right右侧浮动/none不浮动;float:none;默认值 标准状态标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距浮动特点：浮动只有水平移动 在父盒子区域内部进行左右移动float:left 靠近父盒子左侧边界 right 靠近父盒子右侧边界浮动元素脱离标准流 ，不占据界面位置—》形成浮动流
2020-11-20 18:50:46
218
原创 html背景属性及选择器进阶 ，优先级计算
背景属性插入图片 img src ,css 属性插入图片div { width:100px; height:100px; //背景属性 background: }background:图片路径url() 是否平铺 位置/尺寸 是否随着滚动条滚动 背景颜色;图片路径 background-image:url(./image/a.jpg);是否平铺 background-repeat:no-repeat不平铺/repeat 平铺（
2020-11-19 21:54:35
290
原创 外边距塌陷（父子嵌套塌陷兄弟上下塌陷）
浏览器默认问题，只发生块类型元素的上下外边距overflow:hidden;创造一个密闭私有空间触发BFC规则。父子嵌套塌陷兄弟上下塌陷
2020-11-19 21:27:25
359
1
原创 盒模型外边距margin与内边距padding的用法。
外边距margin使用： 上外边距可以使盒子向下移动 左外边距可以使盒子向右移动 右下外边距不能使盒子发生移动 只能将这个盒子与其他盒子的距离拉开，外边距可以设置负值 。margin:10px;margin: 0 auto ;水平居中（1.块类型 2.明确可以计算的宽度）内边距padding使用：上下左右内边距全部有用 移动内容位置（一定要做减法）加了内边距必定会增大盒模型 做内减计算 减在有效内容宽高用法：实线三角形边框交界形成分割线 .box{
2020-11-19 21:20:17
310
原创 页面布局相关元素的分类与转换
元素的分类与转换元素分类大致三类：（与布局相关），大致不是全部块类（display:block）<div></div>,<p></p>,h1~h6,<ul></ul>, <li></li> ,ol li ,dl dd dt ...特点：宽度是默认100% 高度由内容撑开 可以设置宽高独立成行 一行一个垂直放置 （霸道）行高撑开盒子高度行内类display:inlineaspan,e
2020-11-18 21:33:30
243
2
原创 与文本相关的css属性
文本相关的css属性字体属性font:字体是否是斜体 字体粗细 字体大小/行高 字体类型;字体是否是斜体 font-style:normal正/italic 斜体/oblique斜体font-weight:100-900 100最细 900最粗 400正常 >400粗 <400细 font-size: px /em/rem/%; 字体大小不写% 最小12px 默认16px 字体类型 font-family:Microsoft YaHei,Heiti
2020-11-18 21:19:20
231
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人