自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 收藏
  • 关注

原创 echarts使用总结(使用echarts画工字型标记线;无数据时设置纵坐标刻度0-1;tooltip数据展示;工具栏 toolBox 图标配置)

1. 使用echarts画标记线(工字型)1.1 实现效果1.2 使用属性详细参数可查看echarts官网,markline属性https://echarts.apache.org/zh/option.html#series-bar.markLine1.3 代码实现import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(cha

2022-05-23 17:42:16 1606

原创 ElementUI el-dropdown 如何实现下拉框出现“触发元素”样式修改

el-dropdown 改变触发元素样式

2022-04-13 14:43:20 3565 3

原创 vue + elementui el-table表头 树形筛选 功能实现

效果图代码<template> <el-popover placement="bottom" width="200" trigger="manual" v-model="visible" popper-class="organ-header-popover" > <el-tree :data="data" :props="defaultProps" node-key="value"

2021-09-07 13:31:09 1439

原创 网站关闭浏览器页签不需要重新登录关闭整个浏览器需要重新登录

使用cookie来实现第 1 步:当登录进入网站时记录状态位loginStatus到cookie中,注意不要设置expires,这样cookie在会话期间有效,当关闭全部浏览器的时候会清除cookie。setCookie('loginStatus', true);第 2 步 :再次打开浏览器进入页面,获取cookie中的loginStatus,此时已经获取不到了,在此处下线登录状态,就需要用户重新登录了。// 此处代码要写在项目 这样一进来网站就会被访问到if (!getCookies('l

2021-09-04 15:27:14 2262

原创 vue + elementui el-table表头 筛选搜索 功能实现

vue + elementui el-table表头 筛选搜索 功能实现

2021-07-12 17:32:17 8236 2

原创 学习笔记:JavaScript(对象)

1. 对象1.1 什么是对象?对象是一个具体的事物。在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如 字符串、数值、数组、函数等。对象是由 属性 和 方法 组成的。属性: 事物的特征,在对象中用属性来表示(常用名词)方法: 事物的行为,在对象中用方法来表示(常用动词)1.2 为什么需要对象保存一个值是,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?2. 创建对象的三种方式在 JavaScript 中,现阶段

2020-06-04 22:09:17 230

原创 学习笔记:JavaScript(函数 + 作用域 + 预解析)

1. 函数的概念在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。

2020-06-04 14:33:52 239

原创 学习笔记:JavaScript(数组)

1. 数组的概念数组是指一组数据的集合 ,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下 的优雅方式。// 普通变量一次只能存储一个值var num = 10;// 数组一次可以存储多个值var arr = [1, 2, 3, 4, 5];2. 创建数组2.1 数组的创建方式JS中创建数组有两种方式:利用 new 创建数组利用数组字面量创建数组2.2 利用 new 创建数组var 数组名 = new Array();var

2020-06-04 14:33:40 261

原创 学习笔记:JavaScript(流程控制)

1. 流程控制在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构,分别是 顺序结构、 分支结构 和 循环结构,这三种结构代表三种代码执行的顺序。2. 顺序流程控制顺序结构是程序中最简单、最基本的流程控制,他没有特定的语法结构,程序会按照代码的先后顺序,依次执行 ,程序中大多数的代码都是这样执行的。3. 分支流程控制 if 语句3.

2020-06-04 14:33:28 225

原创 学习笔记:JavaScript(运算符)

1. 运算符运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符2. 算术运算符2.1 算术运算符概述运算符描述实例+加10 + 20 = 30-减10 - 20 = -10*乘10 * 20 = 200/除10 / 20 = 0.5%取余数(取模)返回除法的余数 9 % 2 = 1

2020-06-04 14:33:04 350

原创 笔记:JavaScript(变量)

JavaScript1. JavaScript的组成JavaScriptECMAScriptDOMBOM1.1 ECMAScriptECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。1.2 DOM–文档

2020-06-01 15:19:37 355

原创 2D转换 + 动画 + 3D转换

1. 2D 转换转换(transform)是CSS3中最具有颠覆性的特性之一,可以实现元素的位移、旋转、缩放等效果移动:translate旋转:rotate缩放:scale1.1 二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系1.2 2D转换至移动 translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。语法:transform: translate(x,y); //或者分开写transform: tran

2020-05-28 13:47:32 846

原创 HTML5新特性 + CSS3新特性

1. HTML5 新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1.1 HTML5 新增的语义化标签<header>: 头部标签<nav>: 导航标签<article>:内容标签<section>:定义文档某个区域<aside>:侧边栏标签<footer>

2020-05-21 16:09:49 410

原创 CSS 高级技巧(字体图标+三角+vertical-align+溢出文字省略号显示+常见布局技巧)

1. 精灵图为什么需要精灵图?一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多是,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加在速度。因此,为了有效的减少服务器接收和发送请求的次数,提高页面的加在速度, 出现了 CSS精灵技术(也称 CSS Sprites、CSS雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。精灵图(sprites)的使用使用精灵图核心:精灵技术主要针对于背景图片使用。就是把多

2020-05-20 16:50:39 1348

原创 CSS 元素的显示与隐藏

☆ 1. display 属性display属性用于设置一个元素应如何显示。display:none; 隐藏对象display:block; 除了转换为块级元素之外,同时还有显示元素的意思display 隐藏元素后,不再占有原来的位置。2. visibility 可见性visibility 属性用于指定一个元素应可见还是隐藏。visibility:visible;元素可视visibility:hidden;元素隐藏visibility 隐藏元素后,继续占有原来的位置。3. ove

2020-05-20 11:06:56 183

原创 CSS 定位知识点

1. 为什么需要定位?以下情况用标准流或者浮动不能实现:某个元素可以自由的在一个盒子内移动位置,并且压住其它盒子。当我们滚动窗口的时候,盒子是固定在屏幕的某个位置的。所以:浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其它盒子。2. 定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。定位 = 定位模式 + 边偏移。定位模式用于指定一个元素在文档中

2020-05-20 10:23:02 340

原创 CSS浮动

1. 传统网页布局的三种方式CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位2. 标准流(普通流/文档流)所谓的标准流:就是标签按照规定好的默认方式排列块级元素会独占一行,从上向下顺序排列常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序 ,从左到右顺序排列,碰到父元素边缘则自动换行。常用元素:span、a、i、em等标准流是最基本的布局方式。注意:实际开发中,一个页面基本都包含了这三种布

2020-05-18 10:24:13 324

原创 盒子阴影+文字阴影

盒子阴影CSS3中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。语法:box-shaow: h-shadow v-shadow blur spread color inset;值描述h-shadow必须。水平阴影的位置。允许负值。v-shadow必须。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。inset可选。将外部阴影(outset)改为内部阴影

2020-05-15 15:59:59 296

原创 圆角边框

圆角边框在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变成圆角了。border-radius 属性用于设置元素的外边框圆角。语法:border-radius: length;radius半径(圆的半径)原理:(椭)圆与边框的交际行程圆角效果参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%如果是个矩形,设置为高度的一半就可以做圆角矩形该属性是一个简写属性,可以跟4个值,分别代表 左上角、右上角、右下角、左下角

2020-05-15 15:42:10 798

原创 盒子模型

盒子模型页面布局三大核心,盒子模型、浮动和定位。1. 网页布局网页布局过程:先准备好相关的网页元素,网页元素基本都是盒子Box。利用CSS设置好盒子样式,然后摆放到相应位置。往盒子里面装内容。网页布局的核心本质:就是利用CSS摆盒子。2. 盒子模型(Box Model)组成所谓盒子模型:就是把HTML页面中的布局元素看作是 一个矩形的盒子,也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,他包括:边框、外边距、内边距和实际内容。border 边框 c

2020-05-15 14:50:55 336

原创 CSS的三大特性

CSS的三大特性css有三个非常重要的特性:层叠性、继承性、优先级1. 层叠性相同选择器给设置相同的样式,此时一个样式就会**覆盖(层叠)**另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠2. 继承性CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。恰当的使用继承可以简化代码,降低CSS样式的复杂性子元素可以继承父元素的样式(text-,font-

2020-05-15 09:36:14 1859

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除