Bambi12-CSDN博客

原创 CSS3学习笔记（十四）——动画Keyframes

animation可以实现多组属性之间变换Keyframes被称为关键帧，在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。<!DOCTYPE html><html lang="en...

2018-12-04 19:08:41 331

原创 CSS3学习笔记（十二）——transform

1、旋转rotate()设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转2、扭曲skew()它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。3、缩放s...

2018-12-04 18:37:22 531

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu

2020-08-11 16:54:31 203

原创按住shift键实现多选

<!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> ::selection { backgrou

2020-08-01 12:34:06 1925

原创 Promise、async/await、setTimout执行顺序

async function async1() { console.log('async1 start') await async2() console.log('async1 end') } function async2(){ console.log('async2') } console.log('script start') ...

2020-04-09 09:37:34 296

原创 ivew 自定义验证规则及Datepicker验证不起作用处理

表单通过rules进行验证name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]但是在验证datepicker的时候，并不起作用，需要添加代码pattern: /.+/ startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur', pattern:...

2019-08-14 16:04:29 627

原创 vue render渲染函数

使用场景：一般情况下，vue使用template来创建html，但是在某些情况下，需要用js来编写，这时候就用render函数了render函数形式演变：render：function(createElement){ return createElement(App)}进一步缩写为：render(createElement){ return createElement(Ap...

2019-08-14 15:28:14 651

原创 Vue watch

1. 监听数据变化，当数据发生变化时，调用函数进行数据处理data中的普通值则用普通监听即可针对对象的监听修改要使用深度监听如果接受父组件传来的属性值，需要初次即执行函数，则设置immediate属性为truenew Vue({ el:"#root", data:{ inputValue:'', list:[1,2,3], Perso...

2019-08-14 13:50:27 183

原创 iview table点击单元格事件

点击事件 on: { click: () => { this.handleShow(params.row) //点击事件 } }title设置 domProps: { title: params.row.noticeTitle //添加title属性 },过长部分截...

2019-08-13 18:32:05 5826

转载分析器错误信息: 未能加载类型“xxxx.Global”。

https://blog.csdn.net/xingxing513234072/article/details/7874621

2019-04-18 10:07:15 2992

原创遇到问题如何排查？

本地问题（1）如果是前端的问题，则F12进行断点监控（2）如果是后端的问题，则在后台打断点进行监控正式环境的问题浏览器问题：（1）如果出现问题，先区分是前台还是后台（2）看是否是Js报错（3）看是否是后台的500（4）看数据库是否没有更新手机端问题：如果是手机端的内容页面，则将网址放到浏览器中进行访问，看能不能通，定位是前端还是后台的问题，然后再进行处理经常报的运行时错误...

2019-04-17 16:03:11 386

原创 Js slide动画

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script type="text/javascript" src="./jquery-2.1.0.js"></script&...

2019-03-22 14:10:11 2070

转载 CSS display:table

概念display:table可以在div等标签中实现表格的效果display:table ：相当于table标签display:table-row ：相当于tr标签display:table-cell ：相当于td标签应用1、利用display:table和display:table-cell让块级子元素垂直居中.box{ width: 200px; height: 200px...

2019-03-22 11:31:04 2263

转载 CSS 三栏布局

1、浮动布局 float<style>.container{ width:100%; height:100px; }.left{ width:250px; height:100%; background:red; float:left;}.right{ width:250px; height:100%; background:pink; float...

2019-03-21 18:12:26 345

转载 CSS flex布局二（flex:1学习笔记）

flex:1;

2019-03-21 15:22:01 214

原创 CSS flex布局一（学习笔记）

一、背景Flexbox布局组件（2017年W3C的候选推荐）目标是在未知容器内项目大小或者动态的情况下，用一种更有效的方式对其进行布局、排列和分配空间。Flexbox背后的原理即是赋予容器可以改变其内部项目宽高及排列顺序以更好的填充可用空间的能力。二、基本概念flexbox是一套组件而不是一个单独的属性。采用flex布局的元素，称为flex容器（flex container，父元素），简称...

2019-03-20 19:32:24 202

转载 CSS position属性、float属性

1、relative:　定义为relative的元素脱离正常的文本流，但其在文本流中的位置依然存在　无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的padding属性会对其影响（会以内容区域的左上角为原点，进行定位。）注：　Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用。　lef...

2019-03-18 10:39:14 207

原创 mui 修改icon的大小

.mui-icon{ font-size:xxxpx；}

2019-03-15 10:14:52 1852 1

转载 moment.js(js date)日期格式化

https://blog.csdn.net/sinat_17775997/article/details/52130948

2019-03-15 09:55:32 799

原创 CSS3学习笔记（十五）——动画属性

div{ animation: name duration timing-function delay iteration-count direction fill-mode;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta

2018-12-05 15:15:47 211

原创 CSS3学习笔记（十三）——transition动画

本质：是在一定时间之内，一组css属性变换到另一组属性的动画展示过程。 transition-property ：要以动画展示哪些属性，可以使用all关键字 transition-duration：动画过程有多久 transition-timing-function：控制动画速度变化（linear,ease,ease-in,ease-out,ease-in-out，贝塞尔...

2018-12-04 19:05:10 201

原创 CSS3学习笔记（十一）——UI元素状态伪类选择器 a标签的伪类选择器

:link 链接被访问之前样式:visited 链接被访问之后样式:hover 链接在鼠标悬停时样式:active 链接在鼠标被按下后样式注：尽量按以上顺序书写<!DOCTYPE html><html><head> <title>apseudo</title> <...

2018-12-04 16:01:37 290

原创 CSS3学习笔记（十）——UI元素状态伪类选择器 ::before和::after

<!DOCTYPE html><html lang="en"><head> <title>before&after</title> <style> .box h3{ text-align: center; position

2018-12-04 15:59:51 314

原创 CSS3学习笔记（九）——UI元素状态伪类选择器 :checked

通过“:checked”状态来自定义复选框效果html<form action="#"> <div class="wrapper"> <div class="box"> <input type="radio" checked="checked" id="boy&quo

2018-12-04 14:32:16 722

原创 CSS3学习笔记（八）——UI元素状态伪类选择器

UI元素状态伪类选择器也是CSS3选择器模块组中的一部分，此类选择器主要运用于form表单元素上，用来提高网页的人机交互、操作逻辑以及页面的整体美观。1、:enabled和:disabled要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。<form action="#"> <div> <labe...

2018-12-04 14:27:18 458

原创 CSS3学习笔记（七）——结构性伪类选择器

1、:root 根选择器，等同于<html>元素:root{ background:orange;}html{ background:orange;}/*代码效果相同*/2、:not否定选择器，可以选择除某个元素之外的所有元素input:not([type="submit"]){ border:1px solid red...

2018-12-04 11:25:03 295

原创 CSS3学习笔记（六）——属性选择器

html：<a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a&a

2018-12-04 10:15:31 194

原创 CSS3学习笔记（五）——与背景相关的样式

1、background-origin 设置元素背景图片的起始位置div{ width:100px; height:100px; border:1px solid red; padding:2px; background-origin:border-box | padding-box | content-box;/*默认值为padding-box*...

2018-12-03 21:27:03 154

原创 CSS3学习笔记（四）——文字与字体

1、text-overflowtext-overflow:clip;/*表示剪切*/text-overflow:ellipsis;/*表示显示省略标记*/但如果用ellipsis，必须强制文本在一行内显示div{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }2、wor...

2018-12-03 19:05:17 159

原创 CSS3学习笔记（三）——颜色

1、alpha透明度参数body{ background-color:rgba(255,255,255,0.5);/*rgba(R,G,B,A)*/}2、渐变色彩 Gradient：线性渐变(linear):向下/向上/向左/向右/对角方向径向渐变(radial):由它们的中心定义线性渐变：默认从上到下...

2018-12-03 18:19:12 263 1

原创 CSS3学习笔记（二）——边框

1、圆角效果 border-radiusbody{ border-radius:5px; /*所有圆角的半径均为10px*/ border-radius:1px 2px 3px 4px;/*按顺时针：左上、右上、右下、左下*/}2、阴影 box-shadowbody{ box-shadow:1px 2px 3px 4px red inset; ...

2018-12-03 17:28:02 203

原创 CSS3学习笔记（一）——关于CSS3

1、CSS3是什么？ body{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style:...

2018-12-03 16:48:09 180

原创 Js 移除Array中的数据

PhotoUrlArray.splice(index,1);

2018-11-26 10:40:20 913

原创 Js 验证码

随机生成验证码html:验证码： &amp;lt;input type=&quot;text&quot; id=&quot;tbxCode&quot;&amp;gt;&amp;lt;div id=&quot;imgCode&quot; title=&quot;点击刷新&quot; onclick=&quot;c

2018-11-22 17:02:56 206

原创 Js 正则表达式验证

手机号码验证130,131,132,133,134,135,136,137,138,139,147,150,151,152,153,155,156,157,158,159,177,173180,181,182,185,186,187,188,189function checkMobile(Phone) { if (!(/^((13[0-9])|(14[5|7])|(15([0-3]...

2018-11-22 16:35:29 179

原创 Select2 样式

（1）圆角设置：.select2-container .select2-selection--single { border-radius: 3px 3px;}

2018-11-22 16:06:11 7297

原创 Sublime Text3的使用

(1)代码颜色变化：Package Control -&amp;amp;amp;gt;Install Package &amp;amp;amp;gt; VUE syntax High light

2018-11-09 18:55:26 198

原创 Vue学习（七）——使用Vue-cli脚手架工具构建项目

（1）首先安装环境：https://blog.csdn.net/dreamzuora/article/details/78911664 这篇文章写得很赞（2）在指定的文件夹内搭建，输入指令vue init webpack todolist然后根据提示进行选择，然后回车就ok了...

2018-11-09 17:59:20 220

原创 Vue学习（六）——父子组件之间的传值

&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot; /&amp;amp;gt; &amp

2018-11-09 17:40:05 208

原创 Vue学习（五）——v-if,v-show,v-for指令

&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;am

2018-11-09 17:29:21 225

空空如也

服务和服务器是什么？详解

微信发送信息控制单片机