<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Yang_Xingxing_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Yang_Xingxing_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Yang_Xingxing_]]></copyright><item><title><![CDATA[echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/124930284</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/124930284</guid><author>Yang_Xingxing_</author><pubDate>Mon, 23 May 2022 17:42:16 +0800</pubDate><description><![CDATA[1. 使用echarts画标记线（工字型）
1.1 实现效果

1.2 使用属性

详细参数可查看echarts官网，markline属性
https://echarts.apache.org/zh/option.html#series-bar.markLine
1.3 代码实现
import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(cha]]></description><category></category></item><item><title><![CDATA[ElementUI el-dropdown 如何实现下拉框出现“触发元素”样式修改]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/124147419</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/124147419</guid><author>Yang_Xingxing_</author><pubDate>Wed, 13 Apr 2022 14:43:20 +0800</pubDate><description><![CDATA[el-dropdown 改变触发元素样式]]></description><category></category></item><item><title><![CDATA[vue + elementui el-table表头 树形筛选 功能实现]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/120154540</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/120154540</guid><author>Yang_Xingxing_</author><pubDate>Tue, 07 Sep 2021 13:31:09 +0800</pubDate><description><![CDATA[效果图

代码
&lt;template&gt;
  &lt;el-popover
    placement="bottom"
    width="200"
    trigger="manual"
    v-model="visible"
    popper-class="organ-header-popover"
  &gt;
    &lt;el-tree
      :data="data"
      :props="defaultProps"
      node-key="value"]]></description><category></category></item><item><title><![CDATA[网站关闭浏览器页签不需要重新登录关闭整个浏览器需要重新登录]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/120100622</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/120100622</guid><author>Yang_Xingxing_</author><pubDate>Sat, 04 Sep 2021 15:27:14 +0800</pubDate><description><![CDATA[使用cookie来实现
第 1 步：当登录进入网站时记录状态位loginStatus到cookie中，注意不要设置expires，这样cookie在会话期间有效，当关闭全部浏览器的时候会清除cookie。


setCookie('loginStatus', true);

第 2 步 ：再次打开浏览器进入页面，获取cookie中的loginStatus，此时已经获取不到了，在此处下线登录状态，就需要用户重新登录了。
// 此处代码要写在项目 这样一进来网站就会被访问到
if (!getCookies('l]]></description><category></category></item><item><title><![CDATA[vue + elementui el-table表头 筛选搜索 功能实现]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/118680049</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/118680049</guid><author>Yang_Xingxing_</author><pubDate>Mon, 12 Jul 2021 17:32:17 +0800</pubDate><description><![CDATA[vue + elementui el-table表头 筛选搜索 功能实现]]></description><category></category></item><item><title><![CDATA[学习笔记：JavaScript（对象）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106546240</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106546240</guid><author>Yang_Xingxing_</author><pubDate>Thu, 04 Jun 2020 22:09:17 +0800</pubDate><description><![CDATA[1. 对象
1.1 什么是对象？
对象是一个具体的事物。
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如 字符串、数值、数组、函数等。
对象是由 属性 和 方法 组成的。

属性： 事物的特征，在对象中用属性来表示（常用名词）
方法： 事物的行为，在对象中用方法来表示（常用动词）

1.2 为什么需要对象
保存一个值是，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？

2. 创建对象的三种方式
在 JavaScript 中，现阶段]]></description><category></category></item><item><title><![CDATA[学习笔记：JavaScript（函数 + 作用域 + 预解析）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106519474</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106519474</guid><author>Yang_Xingxing_</author><pubDate>Thu, 04 Jun 2020 14:33:52 +0800</pubDate><description><![CDATA[1. 函数的概念
在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

]]></description><category></category></item><item><title><![CDATA[学习笔记：JavaScript（数组）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106505085</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106505085</guid><author>Yang_Xingxing_</author><pubDate>Thu, 04 Jun 2020 14:33:40 +0800</pubDate><description><![CDATA[1. 数组的概念
数组是指一组数据的集合 ，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下 的优雅方式。
// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1, 2, 3, 4, 5];


2. 创建数组
2.1 数组的创建方式
JS中创建数组有两种方式：

利用 new 创建数组
利用数组字面量创建数组

2.2 利用 new 创建数组
var 数组名 = new Array();
var ]]></description><category></category></item><item><title><![CDATA[学习笔记：JavaScript（流程控制）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106490726</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106490726</guid><author>Yang_Xingxing_</author><pubDate>Thu, 04 Jun 2020 14:33:28 +0800</pubDate><description><![CDATA[1. 流程控制
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是 顺序结构、 分支结构 和 循环结构，这三种结构代表三种代码执行的顺序。

2. 顺序流程控制
顺序结构是程序中最简单、最基本的流程控制，他没有特定的语法结构，程序会按照代码的先后顺序，依次执行 ，程序中大多数的代码都是这样执行的。

3. 分支流程控制 if 语句
3.]]></description><category></category></item><item><title><![CDATA[学习笔记：JavaScript（运算符）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106473150</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106473150</guid><author>Yang_Xingxing_</author><pubDate>Thu, 04 Jun 2020 14:33:04 +0800</pubDate><description><![CDATA[1. 运算符
运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符


2. 算术运算符
2.1 算术运算符概述




运算符
描述
实例




+
加
10 + 20 = 30


-
减
10 - 20 = -10


*
乘
10 * 20 = 200


/
除
10 / 20 = 0.5


%
取余数（取模）
返回除法的余数 9 % 2 = 1

]]></description><category></category></item><item><title><![CDATA[笔记：JavaScript（变量）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106423822</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106423822</guid><author>Yang_Xingxing_</author><pubDate>Mon, 01 Jun 2020 15:19:37 +0800</pubDate><description><![CDATA[JavaScript
1. JavaScript的组成
JavaScriptECMAScriptDOMBOM
1.1 ECMAScript
ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

1.2 DOM–文档]]></description><category></category></item><item><title><![CDATA[2D转换 + 动画 + 3D转换]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106351919</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106351919</guid><author>Yang_Xingxing_</author><pubDate>Thu, 28 May 2020 13:47:32 +0800</pubDate><description><![CDATA[1. 2D 转换
转换（transform）是CSS3中最具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等效果

移动：translate
旋转：rotate
缩放：scale

1.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

1.2 2D转换至移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法：
transform: translate(x,y);  
//或者分开写
transform: tran]]></description><category></category></item><item><title><![CDATA[HTML5新特性 + CSS3新特性]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106240694</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106240694</guid><author>Yang_Xingxing_</author><pubDate>Thu, 21 May 2020 16:09:49 +0800</pubDate><description><![CDATA[1. HTML5 新特性
HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
1.1 HTML5 新增的语义化标签

&lt;header&gt;: 头部标签
&lt;nav&gt;: 导航标签
&lt;article&gt;：内容标签
&lt;section&gt;：定义文档某个区域
&lt;aside&gt;：侧边栏标签
&lt;footer&gt;]]></description><category></category></item><item><title><![CDATA[CSS 高级技巧（字体图标+三角+vertical-align+溢出文字省略号显示+常见布局技巧）]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106231433</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106231433</guid><author>Yang_Xingxing_</author><pubDate>Wed, 20 May 2020 16:50:39 +0800</pubDate><description><![CDATA[1. 精灵图
为什么需要精灵图？
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多是，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加在速度。
因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加在速度， 出现了 CSS精灵技术（也称 CSS Sprites、CSS雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵图（sprites）的使用
使用精灵图核心：

精灵技术主要针对于背景图片使用。就是把多]]></description><category></category></item><item><title><![CDATA[CSS 元素的显示与隐藏]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106230213</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106230213</guid><author>Yang_Xingxing_</author><pubDate>Wed, 20 May 2020 11:06:56 +0800</pubDate><description><![CDATA[☆ 1. display 属性
display属性用于设置一个元素应如何显示。

display：none； 隐藏对象
display：block； 除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。
2. visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible；元素可视
visibility：hidden；元素隐藏

visibility 隐藏元素后，继续占有原来的位置。
3. ove]]></description><category></category></item><item><title><![CDATA[CSS 定位知识点]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106213026</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106213026</guid><author>Yang_Xingxing_</author><pubDate>Wed, 20 May 2020 10:23:02 +0800</pubDate><description><![CDATA[1. 为什么需要定位？
以下情况用标准流或者浮动不能实现：

某个元素可以自由的在一个盒子内移动位置，并且压住其它盒子。
当我们滚动窗口的时候，盒子是固定在屏幕的某个位置的。

所以：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其它盒子。

2. 定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中]]></description><category></category></item><item><title><![CDATA[CSS浮动]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106145066</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106145066</guid><author>Yang_Xingxing_</author><pubDate>Mon, 18 May 2020 10:24:13 +0800</pubDate><description><![CDATA[1. 传统网页布局的三种方式
CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：

普通流（标准流）
浮动
定位

2. 标准流（普通流/文档流）
所谓的标准流：就是标签按照规定好的默认方式排列

块级元素会独占一行，从上向下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序 ，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em等

标准流是最基本的布局方式。
注意：实际开发中，一个页面基本都包含了这三种布]]></description><category></category></item><item><title><![CDATA[盒子阴影+文字阴影]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106143826</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106143826</guid><author>Yang_Xingxing_</author><pubDate>Fri, 15 May 2020 15:59:59 +0800</pubDate><description><![CDATA[盒子阴影
CSS3中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：
box-shaow: h-shadow v-shadow blur spread color inset;





值
描述




h-shadow
必须。水平阴影的位置。允许负值。


v-shadow
必须。垂直阴影的位置。允许负值。


blur
可选。模糊距离。


spread
可选。阴影的尺寸。


color
可选。阴影的颜色。


inset
可选。将外部阴影（outset）改为内部阴影]]></description><category></category></item><item><title><![CDATA[圆角边框]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106143462</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106143462</guid><author>Yang_Xingxing_</author><pubDate>Fri, 15 May 2020 15:42:10 +0800</pubDate><description><![CDATA[圆角边框
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交际行程圆角效果


参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
如果是个矩形，设置为高度的一半就可以做圆角矩形
该属性是一个简写属性，可以跟4个值，分别代表 左上角、右上角、右下角、左下角]]></description><category></category></item><item><title><![CDATA[盒子模型]]></title><link>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106135527</link><guid>https://blog.youkuaiyun.com/Yang_Xingxing_/article/details/106135527</guid><author>Yang_Xingxing_</author><pubDate>Fri, 15 May 2020 14:50:55 +0800</pubDate><description><![CDATA[盒子模型
页面布局三大核心，盒子模型、浮动和定位。
1. 网页布局
网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box。
利用CSS设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。
2. 盒子模型（Box Model）组成
所谓盒子模型：就是把HTML页面中的布局元素看作是 一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距和实际内容。
border 边框 c]]></description><category></category></item></channel></rss>