- 博客(45)
- 收藏
- 关注
RSS订阅原创 关于elementUi中el-select组件根据下拉框选择的值不同所显示的背景颜色不同
【代码】关于elementUi中el-select组件根据下拉框选择的值不同所显示的背景颜色不同。
2023-05-12 10:56:38
1805
原创 gulp的基本使用操作
gulp局部安装 gulp创建一个简单的应用，文件结构如下：配置编码: gulpfile.js构建命令:gulp 插件gulp 插件是专门针对 gulp 开发的工具包（npm包），用来实现特定的功能。Babel 是一个 JavaScript 编译器，可以将新的 JS 语法（ES6、7、8）转化为浏览器识别的 ES5 语法。gulp-babel 是 babel 为 gulp 封装的插件安装插件：@babel/core 是 babel 的核心包@b...
2022-06-21 19:21:17
592
原创 WebPack
Webpack 是一个模块打包器 (bundler)，本身是一个工具。 https://webpack.docschina.org/在 Webpack 看来，前端所有的静态资源文件都是模块，如 JS / JSON / CSS / IMG / LESS / FONTS 等等，这些文件都会作为模块来处理。Webpack 会根据模块之间的依赖关系，进行分析打包，生成最终的静态资源。Webpack 有五个核心的概念需要知道，分别是入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建
2022-06-21 18:13:53
337
原创 Js流程控制语句
一、流程控制语句1. prompt函数prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串。var age = parseInt(prompt('请输入您的年龄:'))；alert(age);2. if语句书写格式：if (判断式){代码块}if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if (condition){ 当条件为 true 时执行的代码}请使用小写的if。使用大写字母（IF）会生成 JavaScr
2022-05-25 21:13:15
229
原创 Tab切换
// (8)扩展 -tab切换 //面向对象tab切换 //Tab切换一般要的是 标题的集合 和内容的集合 function Tab(oTitles, oCons) { this.oTitles = oTitles; this.oCons = oCons; var _this = this; this.oTit
2022-05-25 21:00:41
89
原创 JS 基础
JavaScript基本使用1. JavaScript初体验在 HTML 中，JavaScript 代码必须位于<script>与 </script> 标签之间。JavaScript可以写在<body>或者<head>中将js文件最好让在body的最后面，因为文档的执行顺序是自上而下执行的。引入外部JS文件注意：在外部文件中放置脚本有如下优势：分离了 HTML 和js代码使 HTML 和 JavaScript 更易于阅读和维护
2022-04-27 20:35:22
775
原创 CSS3伸缩盒
一、基本使用1、设置伸缩容器1.1、设置元素为伸缩容器.wrap { display: flex;}1.2、设置内联级伸缩容器.wrap { display: inline-flex}2、主轴方向和换行2.1、flex-direction概念flex-direction属性决定主轴的方向（即项目的排列方向）。语法.box { flex-direction: row | row-reverse | column | column-reverse;
2022-04-27 19:50:33
155
原创 CSS3变换-过渡-动画-多列布局
CSS3变换一、2D变换1、2D位移1-1、translateX()属性： translateX() 设置水平方向的位移，指定一个值；属性值： px，像素。 %，相对于自身的宽度来计算（包括内容区，边框，内边距）1-2、translateY()属性： translateY() 设置垂直方向的位移，指定一个值；属性值： px，像素。 %，相对于自身的宽度来计算（包括内容区，边框，内边距）1.3、translate属性： translate 同时设置水平和垂直方向
2022-04-27 19:49:29
126
原创 CSS3基础
一、css3前导1-1、css3新特性1) 完善的选择器；2） 完善的视觉效果；（圆角、阴影、渐变背景、半透明度、边框等）；3） 完善的背景效果；（background-origin、background-clip、background-size）4） 完善的盒子模型5）增强背景功能；6） 增加阴影效果；7） 增加多列布局和弹性盒子模型布局8） 完善的Web字体和Web Font图标9）增加动画和交互效果10）完善媒体特性和响应式（Responsive）布局1-2、css3属性
2022-04-27 19:47:26
203
原创 HTML5相关标签及标签属性
1、新增语义化标签<header></header> 头部<nav></nav> 导航<section></section> 章节、段落<article></article> 文章<aside></aside> 侧边栏<footer></footer> 底部2、新增状态标签2-1、meter标签标签： <mete
2022-04-11 19:15:53
851
原创 css布局
# CSS浮动一、浮动前提1-1 什么是文档流？文档流： 就是文档按照一定的流程来进行排列；流程： 自上而下 【块级元素】 从左往右 【行内元素】1-2、为什么要浮动因为它可以让块状元素在一行内显示，并且元素之间无间隙注：display:inline-block也可以使块状元素在同一行内显示，但是元素之间有间隙存在。二、浮动基础2-1、浮动的基本语法语法： 选择器{float:属性值;} none 不浮动，默认 left 左浮动 right 右浮动三、浮动特点
2022-04-05 20:32:25
1309
原创 css基础
css基础1、css基础css:全称（Cascading Style Sheets） 层叠样式表；也称样式表；作用：css用来修饰结构 （html标签）的；让结构显示的更美观；以前布局使用的是表格，缺点，修改不够灵活，因为结构和表现写在一起，耦合度高后来用html+css布局（div+css）html和css实现了结构和表现相分离；耦合度低。；2、css语法css语法： 选择器{ 属性：属性值； 属性：属性值1 属性值2； } 语法说明： 1、css
2022-03-23 23:06:23
624
原创 HTMl相关标签
HTML1、web标准结构 xml xhtml html(html5)表现 css行为 dom, javascript2、HTML5基本结构和关系结构<!DOCTYPE html><html lang="en"> <head> <meat charset="utf-8"></meat> <title>标题</title> </head&g
2022-03-21 23:31:02
230
原创 HTML/CSS相关面试题
前端面试题HTML面试题1、<image> 标签上title属性与alt属性的区别是什么？- alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的 - title属性可以实现鼠标悬停提示的效果。2、请写出至少5个HTML5新增的标签，并说明其语义和应用场景？ <header>：主要用于定义内容的介绍展示区域，描述了文档的头部区域，比如定义文章的头； <nav>：定义导航链接的部分； <s
2021-09-10 15:05:37
144
原创 CSS预处理器——Less
lessless是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。less的中文官网：http://lesscss.cn/bootstrap中less教程：http://www.bootcss.com/p/lesscss/Less编译工具koala 官网:www.koala-app.comless中的注释以//开头
2021-08-06 10:48:42
103
原创 JSON对象
JSONJS中的对象只有JS自己认识，其他的语言都不认识JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互JSONJavaScript Object Notation JS对象表示法JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号其他的和JS语法一致JSON分类：对象 {}数组 []JSON中允许的值：字符串数值布尔值null对象数组
2021-08-06 10:09:35
83
原创 宿主对象BOM
BOMECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少事实上的规范导致 BOM 有很多问题，因为浏览器提供商会按照各自的想法随意去扩展它。W3C 为了把浏览器中JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规范中。window对象BOM 的核心对象是 w
2021-08-06 10:08:26
57
原创 宿主对象DOM
宿主对象DOMDocument Object Model文档对象模型，通过DOM可以来任意来修改网页中各个内容文档文档指的是网页，一个网页就是一个文档对象对象指将网页中的每一个节点都转换为对象转换完对象以后，就可以以一种纯面向对象的形式来操作网页了模型模型用来表示节点和节点之间的关系，方便操作页面节点（Node）节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点虽然都是节点，但是节点的类型却是不同的常用的节点文档节点 （D
2021-08-06 09:58:03
80
原创 正则表达式
正则表达式的相关方法split()可以将一个字符串拆分为一个数组方法中可以传递一个正则表达式作为参数，这样的方法会根据正则表达式去拆分字符串根据任意字母来将字符串拆分 var str = '1a2b3c4d5e6f'; var result1 = str.split('3'); var result2 = str.split('c'); var result3 = str.split(/[0-9]/); console.log(result1);
2021-07-25 21:17:14
473
原创 JS中的Math对象
Math对象Math和其它的对象不一样，它不是一个构造函数它属于一个工具类不用创建对象，它里面封装了数学运算相关的属性和方法比如：Math.PI 表示圆周率 console.log('圆周率是：'+Math.PI);Math对象方法abs() 返回某值的绝对值console.log('-2的绝对值是'+Math.abs(-2));ceil() 向上进行舍入 console.log('1.2向上舍入为：'+Math.ceil(1.2));floor(
2021-07-21 10:21:13
164
原创 JS中的Date对象
Date对象在JS中使用一个Date对象来表示时间创建一个Date对象如果直接只用构造函数创建一个Date则会封装为当前代码执行的时间也可以指定一个时间；格式：月/日/年 时：分：秒var d = new Date();var d1 = new Date('04/20/2021 10:25:34 ');console.log(d);console.log(d1);getFullYear()该方法可返回一个表示年份的 4 位数字。console.log('年份 ： '+d.g
2021-07-21 10:17:54
101
原创 JS中数组对象
数组（Array）1、数组的简介数组也是一个对象它和我们普通的对象功能类似，也是用来存储一些值的不同的普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作索引：从0开始的整数就是索引数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据2、创建数组 // 创建数组对象 var arr = new Array(); //使用typeof来检查数组时返回object console.log( typeof arr); /
2021-07-21 10:16:32
289
原创 JS中的函数
JS中的函数1、函数function声明函数也是一个对象函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）函数中可以保存一些代码在需要时调用使用typeof检查一个函数对象时，会返回function创建函数的几种方式：创建一个函数对象语法：var 函数名 = new Function();使用函数声明来创建一个函数语法：function 函数名(形参1，形参2····形参n){语句······}使用函数表达式创建一个函数语法
2021-07-18 12:16:35
141
原创 object对象
object对象基本数据类型都是单一的值’hello’ ‘123’ 'true’值与值没有任何关系在js中来表示一个人的信息（name gender age）var name = '李四';var sex = '男';var age = '18';如果使用基本的数据类型的数据，我们所创建的变量都是独立的，不能成为一个整体对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性对象的分类内建对象由ES标准中定义的对象，在任何的ES的实现中都可以使用；
2021-07-14 18:45:12
77
原创 JavaScript数据类型之间转换
day2类型、值、变量=============================================================在js中的六种数据类型基本数据类型：StringNumberBooleanNullUndefined引用数据类型：Object=============================================================基本数据类型01-String字符串在Js中字符串需要用引号引用起来
2021-07-14 18:15:04
99
原创 JavaScript中的基本运算符
运算符操作运算符也叫操作符通过运算符可以对一个或者多个值进行运算，并获取运算结果比如：typeof就是运算符，可以获取一个值的类型它会将该值的类型以字符串的形式返回number string boolean undefined object01-算数运算符当对非Number类型进行运算时（除字符串类型外），会将这些值转换为Number然后进行运算。任何值和NaN运算都得NaN。加【+】+可以对两个值进行加法运算，并将结果返回如果对两个字符串进行加法运算，则会做拼串
2021-07-14 17:48:33
180
原创 break 和 continue
break 和 continuebreak关键字break关键字用在switch语句和for循环语句不能在if语句中使用break和continue;break关键字会立即终止离它最近的for语句； for(var i = 0;i <= 5;i++){ document.write(i); break; }==================================================== for(var i = 0;
2021-07-07 11:42:08
53
原创 javascript语句
javascript语句流程控制语句JS中的程序是从上到下一行一行执行的通过流程控制语句可以控制程序执行流程，使用程序可以根据一定的条件来选择执行语句的分类：条件判断语句，条件分支语句，循环语句条件判断语句：使用条件判断语句可以在执行某个语句之前进行判断，如果条件执行则执行，如果条件不成立则不成立。if语句语法一； + if(条件表达式){ 语句····· }if语句在执行时，会先对表达式进行判断。如果条件表达式的值为true，
2021-07-07 10:40:38
67
原创 javascript中的基本运算符
目录javascript中的基本运算符运算符操作01-算数运算符02-一元运算符03-自增自减04-自增自减练习题05-逻辑运算符05-1布尔值之间的运算05-2非布尔值之间的运算06-赋值运算符07-比较运算符08-相等运算符09-条件运算符javascript中的基本运算符运算符操作 运算符也叫操作符 通过运算符可以对一个或者多个值进行运算，并获取运算结果 比如：typeof就是运算符，可以获取一个值的类型 ...
2021-06-28 11:25:01
265
原创 Javascript基本词法结构
目录Javascript基本词法结构01-js中的三条输出语句；02-js代码可以书写的位置；03-js中的基本语法04-js中的注释05-js中字面量与变量06-js中的标识符Javascript基本词法结构01-js中的三条输出语句；向控制台输出语句：console.log("向控制台输出内容");向页面输出内容：document.write("向页面写内容");弹出一个警告框：alter("这是一个警告框");02-j
2021-06-25 22:51:20
110
原创 HTML5+CSS3新增的主体属性
1.关于Article元素的介绍：article所表示的内容与外边是独立的，并且有自己的页眉和页脚。具体结构如下所示：<article> <header> <h1>标题</h1> <p>创建时间<time pubdate="pabdate">2010/10/24</time></p> </header> <p>内容</p>
2020-10-12 22:52:30
199
1
原创 DIV+CSS布局（溢出和浮动）
一，浮动：float浮动属性；right 左；left 右；用来定义div页面的布局具体代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> 浮动和溢出</title> <style type="text/css"> .div{ width: 960px; height: 900px;
2020-10-06 22:07:27
1245
原创 DIV+css布局
DIV是块级元素；（块级元素是占用整个一行）span是内联元素；（内联元素是占用文本所需的一块)具体效果如图所示：盒模型：margin（盒子外边框） border（盒子边框）padding（盒子内边框）盒模型主要用来控制各边框以及各块之间的布局布局相关属性：定位方式：1，relative 正常定位 2，adsolute 根据父元素进行定位 3，fixed 根据浏览窗口进行定位 4，static 没有定位 5.inherit 继承。adsolute根据父元素进行定位...
2020-10-05 23:48:36
187
原创 css列表定义
css列表定义css列表分为有序列表和无序列表标记类型的定义：list-style-type:属性；none（无标记） disc（默认，标记是实心圆） circle（空心圆）square（实心方块） decimal(标记是数字） decimal-leading-zero（0开头的数字标记；如：01，02，03等）lower-roman（小写开头的罗马数字） upper-roman（大写开头的罗马数字） lower-alpha（小写英文字母开头）upper-alpha(大写字母...
2020-10-04 22:02:47
602
原创 css边框属性
css边框属性css属性分为:边框的分别风格，边框宽度，边框颜色；统一风格为：border-style：属性；单独定义某一方向的边框样式：border-方向-style：属性；边框的风格分为：none(无边框） solid（直线边框）dashed（虚线边框）dotted（点状边框）double（双线边框）groove（凸槽边框）ridge（垄状边框）inset边框 outset边框边框统一宽度的定义：border-width：属性; 单独定义某一方向的边框宽度样式：border..
2020-10-04 16:56:14
498
原创 css背景属性
css背景的基本属性；background-color: 属性;设置背景颜色；background-image: url(img/bg.gif);设置背景图片；background-repeat: no-repeat;将图片设置为不重复；background-position:X Y;设置图片位置；具体代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> &l
2020-10-04 16:30:57
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人