自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 vue基础

vue是一个MVVM框架,Model-View-ViewModel 是一个MVC的前端版本ViewModel 是一个控制器的角色,在他里面实现逻辑运算等,这样就可以把 Model层和View层高度分离View:视图,用于封装和展示数据以及效果,其实就是html结构Model:数据模型,用来封装数据以及数据运行的业务逻辑。

2024-05-28 14:05:58 1527

原创 日历控件

纯原生日历,可用于组件。

2024-07-15 10:39:54 201

原创 Swiper轮播图

此Swiper轮播使用的是纯原生js、html 和 css 编写而成,可用于vue封装组件。

2024-07-15 10:39:17 287

原创 input上传--upload

此压缩包 包含前后端简单交互,后端需要用到Node.js,运行口令 nodemon app.js。或者在serve文件夹直接运行run.bat文件,运行成功后打开html即可。:run.bat运行成功后不要退出cmd。

2024-07-12 17:21:41 279

原创 计算器原生js

此压缩包 包含前后端简单交互,后端需要用到Node.js,运行口令 nodemon app.js。或者在serve文件夹直接运行run.bat文件,运行成功后打开html即可。:run.bat运行成功后不要退出cmd。

2024-07-12 17:02:47 416

原创 登录/注册

【代码】登录/注册。

2024-07-12 16:46:05 611

原创 Excel表格下载模板和分析

以上方法是在vue3 setup语法糖中实现的,包含了excel文件的上传分析和模板下载,通过这种方式,可以自己设置用户使用的excel模板,分析用户上传的excel文件,并把获取到的表格数据渲染到页面中。

2024-05-28 13:05:45 177

原创 token令牌

APP登录的时候发送加密的用户名和密码到服务器,服务器验证用户名和密码,如果成功,以某种方式比如随机生成32位的字符串作为token,存储到服务器中,并返回token到APP,以后APP请求时凡是需要验证的地方都要带上该token,然后服务器端验证token,成功返回所需要的结果,失败返回错误信息,让他重新登录。JWT (全称:Json Web Token)是一个开放标准(RFC 7519),它定义了一种紧凑的、自包含的方式,用于作为 JSON 对象在各方之间安全地传输信息。####token流程。

2023-10-31 15:50:02 115

原创 js第二弹-js运算符

原理:如果两个不同类型的数据(相加),有一个是字符串,则另一个数据会被隐式转化为字符串,然后通过 + 和另一个数据拼接在一起。除了 + 运算的时候,把数字转化为字符串,其他的算数运算符都是把字符串转化为数字。如果被转化的字符串是 一个普通字符,则得出的结果是 NaN。如果 + 的两边有一个是字符串,则表示的是字符串的拼接。如果被转化的字符串是 一个数字,则参与减法运算。=== 不但比较数值,而且比较类型。= = 只比较数值,不比较类型。3. >= 大于等于,4.

2023-08-08 20:03:51 75

原创 js第一弹-简单介绍js

1. 关键字值: var let2. 声明变量var abc;abc是变量名let num;num是变量名3. 声明变量的值.abc=100;num=50;**使用var声明变量,变量的值在程序运行期间可以改变**声明变量 var abc;abc是变量名定义变量的值 abc=100;直接声明和定义 var abc = 100**注:**var可以在运行过程当中修改变量的值变量在使用之前最好先声明和定义,如果此声明没有定义,则变量的值是 undefinded(未定义的)

2023-08-07 19:05:39 83

原创 过渡动画-css

transition-property 设置需要过渡的css属性,如果有多个属性需要过渡,则可以用英文逗号分开,也可以直接设置all,all表示所有变化的css属性都需要过渡,如果不设置挂属性,默认为all。transition-delay 设置过渡动画的延迟时间,动画开始的时候有延迟,结束的时候也有延迟。2.先写缩放,然后平移,它的结果是 先把所有的值进行缩放,然后按照缩放后的值平移。1.先写平移,然后缩放,他的结果是 先平移到具体的位置,然后在该位置上执行缩放。linear 匀速运动。

2023-07-31 09:21:21 189

原创 渐变与2D形变#前端

2.left top right bottom center 等方向名词的组合,如果只写一个词,则另一个默认是 center。repestling-linear-gradient 设置重复性下你选线性渐变,设置方式和线性渐变一样,效果是自动渲染出重复的渐变内容。同背景图一致,也可以设置多组渐变,同时设置多组背景图或者渐变图,后面设置的会被前面设置的图覆盖。注意,度数不能是90度,使用复合写法,他们的和不能为90。缩放使用 scale(x轴方向的倍数,y轴方向的倍数)*形变的层级,后来者居上。

2023-07-31 09:20:45 56

原创 背景-background属性

background: linear-gradient(to 方向,颜色 开始渐变的位置,颜色 开始渐变的位置,...);radial-gradient(半径 形状 at 圆心,颜色 渐变的开始位置,颜色 渐变的开始位置......)box-shadow:x方向的偏移量 y方向的偏移量 阴影的发散度(模糊度) 阴影的宽度 阴影的颜色[阴影位置]注意:在元素上设置阴影,通常是为了增强元素的立体感,阴影不占据文档流空间,因此不会引起元素盒模型的变化。开始简便的位置可以是具体的数值,也可以是百分比。

2023-07-31 09:19:49 124

原创 css选择器

属性选择器,伪类选择器,伪元素选择器,结构伪类选择器

2023-07-31 09:19:15 41

原创 媒体查询@media

screen 电脑屏幕,手机,ipad 设备中的一种,print 打印机,speech 盲人听读机, all 指的是所有设备。注意事项:媒体查询不提供优先级,因此,需要把媒体查询的样式最后加载,基础样式写在媒体查询的前面,这样才不会覆盖媒体查询的样式。() 在()括号里面设置条件,他里面的条件一般都是max-width min-width的设置。{} 满足条件的时候,设置的css样式必须书写在 {} 内。only 指的是只针对某一种设备。媒体查询 根据不同设备的宽度,设置不同的样式。关键字是@media。

2023-07-31 09:18:56 38

原创 简单介绍流式布局

(flow layout)是一种网页布局方法,通过自动调整内容的位置和大小,使得网页能够根据不同的屏幕尺寸和设备类型灵活地适应各种显示环境。通常,它是基于相对宽度的百分比来定义元素的尺寸,而不是固定的像素值。:流式布局能够根据不同屏幕尺寸和设备类型自动调整元素的位置和大小,使页面在不同设备上都能够呈现出较好的布局效果。总而言之,流式布局是一种灵活适应不同屏幕尺寸和设备类型的网页布局方法,它能够提供良好的可用性和用户体验。元素的位置是根据页面的可用宽度动态调整的,元素会自动换行以适应页面宽度的变化。

2023-07-27 20:31:10 1433

原创 关键帧动画

alternate-reverse 当运行次数为奇数时,反方向运行;值是一个正整数num,表示次数,默认为1次,也可以是 infinite 表示无限次数。alternate 当运行次数为奇数时,正方向运行;backwards 默认值,以动画开始时候的第一帧作为动画的最后呈现状态。forwards 以动画的最后一帧作为动画的最后呈现状态。1.关键帧动画的触发时机是,只要添加关键帧动画,就会立即执行动画。2.关键帧动画可以对动画的流程进行控制。2.给需要设置动画的元素,添加动画属性。running 运动。

2023-07-27 12:00:00 70

原创 3D形变-transform

rotateX(num): num为正,以上边为基准线,上边往时装的里面翻转,num为负,上边往视窗的外面翻转。rotateY(num): num为正,以左边为基准线,左边往时装的外面翻转,num为负,左边往视窗的里面翻转。他的值是具体的数值,不可以是百分比,因为z轴没有百分比,也不能是0或者负值。需要把景深perspective 设置在3D环境的父级上。rotate3d(x倍数,y倍数,z倍数,度数)X轴旋转40度,y轴旋转80度,Z轴旋转120度。以上三个关于3d设置的属性都设置在 3d环境的父级上。

2023-07-27 08:00:00 44

原创 display弹性布局-css3

flex-basis 设置子元素在父元素的主轴方向上所占空间的大小,他的值可以是具体值,也可以是百分比,默认是auto,auto的含义是遵循给该子元素设置的 width值。align-self : 该属性可以设置单个子元素的垂直于主轴方向的对齐方式,他可以覆盖 align-items 设置的方式。如果子元素大于等于3,则每一个子元素质检的间距相等,一个子元素在主轴起始位置,最后一个子元素在主轴结束位置。flex-end 根据主轴方向排列元素,第二排紧跟第一排,并且他的起始位置在主轴的垂直方向的下边。

2023-07-25 20:30:45 81

原创 css单位和viewport

可以理解为 子级设置长度单位或者尺寸的时候,可以使用em作为单位,1em = 父级的font-size,如果当前元素设置了font-size,则1em = 当前元素的font-size。height:值是正整数,定义视窗的高度,单位是px,也可以设置他的值是 height-width,表示视窗的高度为设备高度。width:值是正整数,定义视窗的宽度,单位是px,也可以设置他的值是 device-width,表示视窗的宽度为设备宽度。vh/vw : vh指的是 view-height 视窗的高度。

2023-07-25 20:26:52 63

原创 H5新标签

H5各种功能比较新,低于IE9的浏览器支持的功能不够全面,建议使用 IE9及其以上浏览器。article :他一般包含在 section中,使用article包裹独立的模块。通过 input的 list属性和 datalist的id属性进行绑定。当前标签中的文字,只有在浏览器不支持的时候会被渲染出来。audio 标签,用来播放音频文件,支持 MP3 ogg wav 类型文件。header :页面的头部区域,要和head标签作区分。video 视频播放标签,支持 mp4,ogg,webm 格式。

2023-07-25 20:25:21 69

原创 透明度-opacity

opacity :设置元素的透明度,可以使整个元素透明,包含元素里面所有的内容。取值范围 0-1, 0是完全透明 1是完全不透明。transparent 透明色。

2023-07-25 08:00:00 65

原创 input标签

autofoucs 自动获取光标,自动聚焦。普通 input 的type类型。

2023-07-25 08:00:00 38

原创 表格-table属性

一个表格是由 thead、ybody和tfoot组成,这三个标签可以不写,浏览器会自动添加。以上宽高属性可以设置到table td th 上 width影响的是一列,width 设置表格的宽度,可以是具体的值,也可以是百分比。height 设置表格的高度,可以是具体的值,也可以是百分比。td:表示表格中的一个单元格,一般代表表内容。th:表示表格中的一个单元格,一般代表表头。border-collapse设置单元格的边框是否合并。colspan 合并列(横向合并)rowspan 合并行(竖向合并)

2023-07-24 23:58:05 780

原创 居中-css

就可以使父元素的内容居中。vertical-align 只能使用在行元素或者内联元素(inline-block)上,不能使用在块元素上。a.给需要居中的元素设置 margin-top 和margin-left 为自身的一半。1.如果父元素的高度由其中的一个子元素撑开,那么给其他元素设置。2.行元素,内联元素的啥水平居中 在父级设置text-align:center;3.使用 vertical-align 设置行元素和内联元素的垂直居中。5.父元素宽高固定,子元素绝对定位,可以实现水平绝对居中。

2023-07-24 23:56:31 38

原创 定位-position属性

4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位,如果不存在这样的祖先级元素,则相对于document(文档)定位。absolute:绝对定位,以 当前元素的 第一个具有定位属性的祖先级元素为参照物,作为参照物的祖先级元素,必须具有position: relative 或者 position: absolute 设置。3.元素设置了相对定位以后,虽然元素脱离了文档流,但是元素本身的位置依然占据文档流的空间。4.相对定位的元素,天然的提升层级,比没有定位的元素层级高。

2023-07-24 23:55:56 58

原创 精灵图(雪碧图)

精灵图

2023-07-24 23:55:11 39

原创 浮动与清浮动

当子级元素进行浮动的时候,他的父级会被因此产生影响,由于浮动元素脱离文档流,父元素没有子元素撑开,导致父元素没有高度,这样在布局的时候会产生混乱。2.块属性标签浮动之后不再独自占据一行空间,如果不设置宽高,则它的宽高由内容撑开。3.块属性标签浮动之后,他的margin属性的auto值失效。1.给浮动元素的父级,添加 overflow:hidden;浮动的作用:从整体出发,把标签元素进行横向布局。4.给父元素添加浮动,可能会影响布局。清除浮动产生的影响(清浮动)浮动的原理:设置浮动的元素超出文档流。

2023-07-24 23:54:42 33

原创 水平居中-margin

水平居中

2023-07-24 23:54:05 118

原创 form表单-html

post: post请求,在post提交的数据信息中,不会看到提交的数据结构,相比较get是安全的,并且提交的数据较大。name属性,对于界面的显示没有任何影响,主要用于数据交互,实质上name的值即是后台数据的字段名。get: get请求可以把数据拼接到 接口地址的 url上,缺点是不安全,提交的数据较少。label标签,行标签,经常和input搭配使用,表示input的标题。action 属性,提交的数据要提交到的服务器地址,一般是接口地址。get,post,put,delete等。

2023-07-24 20:26:22 47

原创 html基础学习

head里面主要是 源信息标签作用是,设置网站的源信息charset 属性,用来定义文本的编码格式author 属性,用来定义网站的作者,一般是公司的名字keywords 属性,用来定义网站的关键字,如果有多个关键字用英文逗号隔开,关键字最好不要超过10个description 属性,用来简单的描述网站的内容,不要超过100字,有利于SEOmeta的另一种写法title 标签,他是一个双标签,他的SEO权重很大,因此需要谨慎书写里面的内容head标签里的内容,不会渲染在页面中。

2023-07-11 19:25:03 132

原创 基础选择器

使用的时候需要在 标签上绑定 class="类名" 如果有多个类名,使用 空格 隔开,类名最好不要超过5个。在一个页面当中,id是唯一的,只能绑定在一个标签上,也就是一个页面中没有同名的id。如果多种选择器所表达的内容是相同的,则可以把他们写成群组选择器。E{css内容}给所有标签名为E的元素设置css样式。.wp,#abc,div{css内容}*表示通配符,他可以匹配任何标签。#id名{css内容}.类名{css内容}

2023-07-11 00:26:02 28

原创 盒模型(margin padding)

盒模型组成部分:Content(内容) ,padding(内边距),border(边框),margin(外边距)content:标签元素内容,一般自定义宽和高,或者由子元素的内容撑开宽和高。padding:设置元素内容到元素边框之间的距离。margin:设置 当前元素到相邻元素之间的距离。padding: 上 右 下 左;padding:上 右 下;padding:上 右;padding:上;

2023-07-11 00:22:36 117

原创 选择器优先级

不同的选择器,同时作用于同一个标签元素,并且它们具有相同的css属性设置,对该css属性设置了不同的值。假设后面的数字是权重的值,那么在比较的时候,只需要把选择器的值相加,然后比较大小即是权重的大小。2. 行间样式,在标签上添加 style属性 10000。4.类名选择器,伪类选择器,属性选择器 100。5.元素(标签名)选择器,伪元素 选择器 10。如果他们的值相同,后来者居上。什么时候需要考虑选择器的优先级?

2023-07-11 00:15:37 37

原创 css选择器

E M{css内容} 通过 E选择器 设置 E 中的 M选择器 的css内容,M可以是E的子集,也可以是E的后代中的某一个选择器。E~M{css内容} 通过E选择器找到 该元素之后的所有选择器名为 M 的兄弟元素,并设置css样式。E+M{ css内容 } 通过E选择器找到 该元素之后第一个兄弟元素M,并且对M设置css样式。E>M{css内容} 通过E选择器找到 E选择器下面的子级M选择器,设置css内容。伪类,是css系统创建好的内部的类,用来对标签的某一个时机设置样式。link:初始时候的状态。

2023-07-11 00:13:21 65

原创 display属性

diaplay属性

2023-07-10 23:49:58 126 1

原创 html与css标签及属性

head里面主要是 源信息标签作用是,设置网站的源信息charset 属性,用来定义文本的编码格式author 属性,用来定义网站的作者,一般是公司的名字keywords 属性,用来定义网站的关键字,如果有多个关键字用英文逗号隔开,关键字最好不要超过10个description 属性,用来简单的描述网站的内容,不要超过100字,有利于SEOmeta的另一种写法title 标签,他是一个双标签,他的SEO权重很大,因此需要谨慎书写里面的内容head标签里的内容,不会渲染在页面中。

2023-07-09 20:59:14 437 1

原创 css文本操作

css文本操作

2023-07-06 15:57:23 65 1

原创 css引入方式

1.@import 是css2.1之后才推出的,因此可能存在兼容问题,link不存在兼容问题。2.link 不仅可以引入 css,也可以引入其他类型的文件,功能更加强大。/* 使用@import 导入css */在head里加入style标签。.外部样式表 开发时常用。

2023-07-06 15:48:09 49 1

原创 emmet语法

百度</a></li><li><a href="">百度</a></li><li><a href="">百度</a></li><li><a href="">百度</a></li><li><a href="">百度内容&</li><li>内容&</li><li>内容&</li><li>内容&</li><li>内容&</li><li>内容</li><li>内容

2023-07-05 23:45:26 30

日历-原生js日历控制

日历控件,原生html、css、js。

2024-07-12

原生Swiper轮播图

原生Swiper轮播图

2024-07-12

原生html,js上传文件

原生html,js配合Node.js上传文件,上传文件为本地地址,需要自己更换地址

2024-07-12

原生js配合Node.js的计算器

原生js配合Node.js的计算器

2024-07-12

登录、注册的建议通用模板

登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板登录、注册的建议通用模板

2024-07-12

空空如也

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

TA关注的人

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