- 博客(86)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue基础入门
一、vue简介1、什么是vue2、vue的特性（1）数据驱动试图（2）双向数据绑定（3） MVVM（4）MVVM 的工作原理3、vue 的版本二、vue的基本使用1、 基本使用步骤2、基本代码与 MVVM 的对应关系三、vue 的调试工具1、 安装 vue-devtools 调试工具2、配置 Chrome 浏览器中的 vue-devtools3. 使用 vue-devtools 调试 vue 页面四、vue的指令与过滤器1、指令的概念（1）内容渲染指令（2）属性绑定指令
2022-09-07 09:47:32
166
原创 前端工程化与webpack
前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。好处：前端开发自成体系，有一套标准的开发方案和流程。概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的。...
2022-08-17 16:31:09
298
原创 输入框输入数字限制或校验
（1）原文位置：《vue element中input限制只能输入正整数》只能输入正整数与只能输入正整数和：（2）原文位置：《element-ui / 表单之正整数验证，小数点后为0也要除外》输入限制校验判断数字、浮点的正则表达：............
2022-07-07 16:25:04
2021
原创 vue + element导出表格（导出不展示的列、且不导出展示的最后一列）
导出如下图所示的表格，但最后【查看】一列不导出，还需导出未展示的一列
2022-07-06 13:39:12
2903
5
转载 原生JavaScript实现remove()删除和recover()恢复元素
利用原生JavaScript实现：1、remove(selectors)删除指定的一个或一组元素。2、recover(selectors)恢复刚才删除的元素。
2022-07-06 11:12:23
3274
原创 git学习笔记
文章目录一、版本控制1、文件的版本2、版本控制软件3、使用版本控制软件的好处4、版本控制的分类（1）本地版本控制系统（2）集中化的版本控制系统（3）分布式版本控制系统二、git基础1、git概念2、git的特性（1）SVN的差异比较（2）Git 的记录快照（3）近乎所有操作都是本地执行3、Git中的三个区域4、Git中的三种状态5、基本的Git工作流程三、安装并配置Git1、在 Windows 中下载并安装 Git2、配置用户信息3、Git 的全局配置文件4、检查配置信息5、获取帮助信息四、Git的基本操作
2022-05-14 11:50:00
164
原创 数组、函数、作用域、预解析
文章目录一、JavaScript 数组1、创建数组（1）new 创建数组（2）数组字面量创建数组2、获取数组中的元素3、遍历数组4、数组中新增元素（1）通过修改 length 长度新增数组元素（2）通过修改数组索引新增数组元素5、案例（1）删除指定数组元素（2）翻转数组（3）冒泡排序二、JavaScript 函数1、函数的使用（1）声明函数（2）调用函数（3）函数的封装2、函数的参数（1）形参和实参（2）函数形参和实参个数不匹配问题3、函数的返回值（1）return语句（2）return终止函数（3）ret
2022-04-25 15:46:47
989
原创 初识JavaScript（变量、数据类型）
文章目录一、计算机编程基础1、编程语言2、计算机基础二、初识JavaScript1、初识JavaScript2、JavaScript注释3、JavaScript输入输出语句一、计算机编程基础1、编程语言编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。注意：上面所定义的计算机指的是任何能够执行代码的设备，可能是
2022-04-21 18:35:00
862
原创 移动Web第七天（响应式网页：媒体查询、BootStrap）
文章目录一、媒体查询二、BootStrap1、UI框架2、BootStrap简介3、BootStrap使用步骤4、BootStrap栅格系统一、媒体查询媒体特性常用写法：max-width（从大到小）、min-width（从此到大）@media (媒体特性) { 选择器 { css属性 }} 完整写法：@media 关键词 媒体类型 and(常用)/only/not (媒体特性) { css代码 }媒体类型是用来区分设备类型的，如屏
2022-04-18 12:32:13
579
原创 移动web第六天（vw/vh）
文章目录一、vw / vh一、vw / vh相对单位相对视口的尺寸计算结果vw：viewport width1vw=1/100视口宽度vh：viewport height1vh=1/100视口高度vw单位的尺寸=px单位数值 / (1/100视口宽度)vh单位的尺寸=px单位数值 / (1/100视口高度)vh是1/100视口高度，全面屏视口高度尺寸大，如果vw和vh混用可能会导致盒子变形。...
2022-04-16 11:24:52
246
原创 移动web第五天(rem与less)
文章目录一、移动适配1、rem（1）rem单位（2）媒体查询（3）flexible.js2、less（1）Easy Less（2）注释（3）运算（4）嵌套（5）变量（6）导入（7）导出一、移动适配rem：目前多数企业在用的解决方案vw/vh：未来的解决方案【见《移动web第六天》】1、rem（1）rem单位相对单位rem单位是相对于HTML标签的字号计算结果1rem = 1HTML字号大小rem单位的尺寸= px单位数值 / 基准根字号（HTML标签的字号）（2）媒体查询
2022-04-14 16:55:18
100
原创 移动web第四天（Flex布局之主轴方向及换行）
文章目录一、Flex布局1、主轴方向2、弹性盒子换行二、使用Flex布局模型快速开发一、Flex布局1、主轴方向Flex布局模型中，弹性盒子的主轴默认是水平方向，侧轴默认是垂直方向修改主轴方向属性: flex-direction属性值作用row行, 水平(默认值)column列, 垂直row-reverse行, 从右向左column-reverse列, 从下向上2、弹性盒子换行弹性盒子换行显示: flex-wrap: wrap;调整行
2022-04-13 10:30:41
404
原创 移动web第三天（移动端、百分比布局、Flex布局）
文章目录一、移动端特点1、移动端和PC端网页不同点2、谷歌模拟器3、分辨率4、视口5、二倍图二、百分比布局三、Flex布局一、移动端特点1、移动端和PC端网页不同点PC端网页屏幕大，网页固定版心移动端网页屏幕小，网页宽度多数为100%可以使用谷歌模拟器在电脑里面边写代码边调试移动端网页效果2、谷歌模拟器按F12键或Fn+F12键后，点击图中所示：3、分辨率物理分辨率是生产屏幕时就固定的，它是不可被改变的逻辑分辨率是由软件（驱动）决定的制作网页参考逻辑分辨率移动端主流设备分辨
2022-04-12 16:25:02
105
原创 移动web第二天之案例
用《移动web第二天》文章里的内容完成各案例文章目录一、3D导航一、3D导航注意应为动态效果，建议代码运行查看旋转会改变坐标轴方向，编写代码时请注意<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
2022-04-12 05:53:50
149
原创 移动web第二天（空间转换、动画）
文章目录一、空间转换1、空间位移2、透视3、空间旋转4、立体呈现5、空间缩放二、动画1、实现步骤2、动画属性3、多组动画一、空间转换目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。空间转换也叫3D转换1、空间位移语法transform: translate3d(x, y, z);transform: translateX(值);transform: transla
2022-04-12 05:00:22
130
原创 移动web第一天之案例
用《移动web第一天》文章里的内容完成各案例文章目录一、购物车【字体图标】二、双开门【位移】一、购物车【字体图标】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt.
2022-04-11 11:35:54
172
原创 移动web第一天（字体图标、平面转换、渐变）
文章目录一、字体图标1、下载字体包2、使用方法（1）Unicode编码（2）类名3、上传矢量图二、平面转换1、位移三、渐变一、字体图标灵活性：灵活地修改样式，例如：尺寸、颜色等轻量级：体积小、渲染快、降低服务器请求次数兼容性：几乎兼容所有主流浏览器使用方便：下载字体包，使用字体图标1、下载字体包图标库：https://www.iconfont.cn/登录（新浪微博）→选择图标库→选择图标加入购物车→购物车→添加至项目→下载至本地2、使用方法（1）Unicode编码引入字体
2022-04-11 11:33:48
132
原创 CSS样式补充
文章目录一、项目样式补充1、精灵图2、背景图片大小3、盒子阴影4、过渡二、项目前置认知1、骨架结构标签2、SEO三大标签3、`.ico`图标一、项目样式补充1、精灵图项目中将多张小图片，合成一张大图片，这张大图片称之为精灵图优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度精灵图的使用：a、创建一个盒子，设置盒子尺寸与小图尺寸相同b、将精灵图设置为盒子的背景图片c、修改背景图位置background-position: x y;2、背景图片大小background-siz
2022-04-02 14:13:55
495
原创 CSS定位装饰之综合案例
用《CSS定位装饰》文章里的内容完成各定位案例文章目录一、图标定位二、图片定位三、底部半透明遮罩效果一、图标定位效果展示代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport".
2022-03-27 10:29:08
175
原创 CSS定位装饰
文章目录一、定位1、常见布局方式（1）标准流（2）浮动（3）定位2、定位的基本使用（1）设置定位方式（2）设置偏移值3、相对定位4、绝对定位（1）父元素为静态定位（2）父元素为非静态定位【子绝父相】（3）子绝父相水平居中（4）位移居中5、固定定位6、元素的层级关系二、装饰1、垂直对齐方式2、光标类型3、边框圆角4、overflow溢出部分显示效果5、元素本身隐藏一、定位1、常见布局方式（1）标准流块级元素：独占一行，垂直布局行内/行内块元素：一行显示多个，水平布局（2）浮动可以让垂直布
2022-03-27 01:54:01
225
原创 CSS浮动之案例--导航
用《CSS浮动》文章里的内容完成布局导航案例效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial.
2022-03-25 14:47:49
215
原创 CSS浮动之案例--布局二
用《CSS浮动》文章里的内容完成布局案例二效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.
2022-03-25 14:47:11
104
原创 CSS浮动之案例--布局一
用《CSS浮动》文章里的内容完成布局案例一效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.
2022-03-25 14:46:33
511
原创 CSS浮动
文章目录一、结构伪类选择器二、伪元素三、标准流四、浮动五、清除浮动1、直接设置父元素高度2、额外标签法3、单伪元素清除法4、双伪元素清除法5、给父元素设置`overflow:hidden`css书写顺序：浏览器执行效率更高1、浮动/display2、盒子模型：margin、border、padding、宽高背景3、文字样式一、结构伪类选择器选择器说明E:first-child{}匹配父元素中第一个子元素，并且是E元素E:last-child{}匹配父元素中最后
2022-03-25 14:44:46
174
原创 CSS盒子模型之案例--新闻列表-div布局
用《CSS盒子模型》文章里的内容完成一个新闻列表-div布局案例效果图实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width.
2022-03-24 17:19:13
1583
原创 CSS盒子模型之案例--新浪导航
用《CSS盒子模型》文章里的内容完成一个新浪导航案例布局顺序从内向外，从上向下效果图实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.
2022-03-24 17:18:49
342
原创 CSS盒子模型
文章目录一、CSS三大特性1、继承性2、层叠性3、优先级一、CSS三大特性1、继承性子元素默认继承父元素样式的特点可继承的常见属性（文本控制属性都可以继承）：a . colorb . font-style,font-weight,font-size,font-familyc . text-indent,text-alignd . line-heighte . ······巧记：控制字的都可以继承，不是控制字的不能继承a标签的color会继承失效h系列标签的font-si
2022-03-24 17:16:19
118
原创 前端CSS进阶之案例--导航
用《前端CSS进阶》文章里的内容完成一个导航案例效果展示代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi.
2022-03-19 21:59:50
125
原创 前端css进阶
文章目录一、选择器进阶1、后代选择器2、子代选择器3、并集选择器4、交集选择器5、hover伪类选择器二、背景相关属性1、背景颜色2、背景图片3、背景平铺4、背景位置5、背景相关属性连写6、背景图片与img的区别三、元素显示模式1、块级元素2、行内元素3、行内块元素4、元素显示模式转换5、拓展四、CSS特性1、继承性2、层叠性一、选择器进阶1、后代选择器语法选择器1 选择器2 {css}后代包括：儿子、孙子、重孙子······后代选择器中，选择器之间用空格隔开<!DOCTYPE ht
2022-03-19 21:41:53
433
原创 前端CSS基础之案例--图片
用《前端CSS基础》文章里的内容完成一个图片案例效果展示：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini.
2022-03-18 19:16:12
134
原创 前端CSS基础之案例--新闻
用《前端CSS基础》文章里的内容完成一个新闻案例效果图展示代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.
2022-03-18 15:47:17
349
原创 前端CSS基础
文章目录一、CSS引入方式1、内嵌式2、外联式3、行内式二、基础选择器1、标签选择器2、类选择器3、id选择器4、通配符选择器三、字体和文本样式1、字体样式2、文本样式（1）文本缩进（2）文本水平对齐方式3、line-height行高4、样式的层叠问题一、CSS引入方式1、内嵌式写在style标签中，通常约定写在head标签中常用于小案例<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
2022-03-17 16:50:12
239
原创 前端HTML学习之案例--表单
用《前端HTML学习》文章里的内容完成一个表单案例效果图实现代码 <h1>好好学习，天天恋爱</h1> <hr> <form action=""> 昵称： <input type="text" placeholder="请输入昵称"> <br><br> 性别： <label><input typ.
2022-03-16 18:10:41
274
原创 前端HTML学习之案例--学生信息表
用《前端HTML学习》文章里的内容完成一个学生信息表效果图实现代码 <table border="1" width="500" height="500"> <caption><h3>学生信息表</h3></caption> <thead> <tr> <th>年级</th> .
2022-03-16 17:39:27
3571
空空如也
3D 是八位十六进制还是两位十六进制
2022-04-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人