自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 uniapp标签的变化

cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件。其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签。但不推荐这种用法,调试H5端时容易混乱,基于元素的选择器也会出问题。form、button、checkbox、radio、label、textarea、canvas、video 这些还在。

2022-09-14 19:29:10 961 1

原创 Webpack 入门教程

入口 entry 输出output(path:__dirname+"/dist"(__dirname当前目录),filename文件名称)他将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。gulp grunt sea.js require.js webpack依赖webpack.config.js打包。从图中我们可以看出,Webpack可以将多种静态资源js、css、less转换成一个静态文件,减少了页面的请求。// 指定@代表当前目录下的src目录。..

2022-08-27 10:40:14 280

原创 简单触底刷新

【代码】简单触底刷新。

2022-08-25 09:34:35 301

原创 Vue Router路由

Vue Router 是的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转。

2022-08-05 17:42:36 538

原创 vue基础---axios的使用

axios可以理解为ajaxi/osystem,是一个基于用于浏览器和nodejs的HTTP客户端,简单的理解就是ajax的封装。

2022-07-28 17:10:04 143

原创 vue的组件传参

emit(事件名,事件值)发送一次事件,事件名(counterchange)和事件值(counter)是自定义的。$event固定写法,事件的值(counterchange事件的值,也是子组件$emit的第二个参数)父传给子的数组是只读的(做默认值,读取显示)3.子传父使用的事件$emit。第一步CounterCom.vue。CounterCom.vue组件中。2.父传子使用props。//01接收参数并定义默认值。//02使用参数num。App.vue文件中。...

2022-07-27 17:44:06 97

原创 vue的生命周期

Vue的生命周期就是vue实例从创建到销毁的全过程,也就是newVue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期。在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。此时模板已经被渲染成真实DOM,用户已经可以看到渲染完成的页面,页面的数据也是通过双向绑定显示data中的数据。6.updated(更新后)...

2022-07-27 17:36:11 204

原创 vue脚手架

npmrunservre,然后会出来一个网址,复制网址打开浏览器,项目就运行好了。data(){return{msg"脚手架写大项目"}}vue的指令连接了template和script。可以通过scoped限定样式使用范围在本组件。template有且只有一个子节点。vuecreate+文件名。data必须是函数返回一个值。cd/切换到c盘的根目录。cd+新建的项目进入项目目录。5.template模板。2.创建一个vue项目。1.安装vue脚手架。6.script逻辑。...

2022-07-25 21:34:33 161

原创 cmd和npm基础命令

npminit初始化项目,创建package.json的文件(所有选项yes即可)(3)开发依赖安装,安装的插件在项目开发阶段使用,项目上线之后就不需要。输入磁盘的名字,后面加冒号,如D就从c盘切换到d盘了。CMD命令是一种命令提示符,CMD是command的缩写。(4)产品环境依赖安装,安装的插件再开啊与线上阶段都需要。(2)全局安装,电脑上的任何项目都可以引用到安装的插件。help+命令,可查看这个命令的使用方法。rd+目录名/s/q,删除有内容的内容。...

2022-07-25 21:22:30 1360

原创 初学vue

1.Vue.js是一款流行的JavaScript前端框架,是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。2.vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快;缺点:Vue 不缺入门教程,可是很缺乏高阶教程与文档。同样的还有书籍;VUE不支持IE8;生态环境差不如angular和react。3.React与Vue最大的区别是模板的编写。Vue鼓励去写近似常规HTML的模板。写起来很接近标准HTML元素,只是多了一些

2022-06-27 21:27:38 201

原创 正则表达式

正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符")。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。许多程序设计语言都支持利用正则表达式进行字符串操作。从字符串 str 中提取数字部分的内容(匹配一次):var str = "abc123def";var patt1 = /[0-9]+/;document.write(str.match(patt1));输出123;

2022-05-09 23:25:38 112

原创 DOM模型的相关概念和操作

DOM 基本概念文档对象模型(DOM,Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口(API,Application Programming Interface)DOM是展示和操作HTML和XML文档内容的基础API,其中Document -- XML文档 或 HTML文档;Object -- Object对象的属性和方法;Model -- Model模型,DOM 是针对XML或HTML的基于树结构的API根据W3C DOM规范,DOM是一种与浏

2022-04-24 22:59:32 231

原创 JavaScript中的计时器与定时器

JavaScript中有一个调用函数的间隔时间的方法setInterval()方法setInterval(参数1,参数2) .间隔参数2的时间执行参数1.参数1:待执行的js代码串或调用的函数.参数2:里面是毫秒,不需要加单位.setInterval("console.log(123)", 1000)而另外还有一个间隔一段时间后才执行相应代码的方法setTimeout()方法setTimeout(参数1,参数2) .等待参数2的时间执行参数1,只执行一次.

2022-04-11 22:42:02 1100

原创 JavaScript实现简单的邮箱登录界面

<!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-scale=1.0"> <title>D.

2022-04-11 22:22:47 1058

原创 JavaScript函数

为什么需要函数第一,将语句集合成函数的好处是方便代码重用。所谓“重用”,是指有一些代码的功能是相同的,操作是一样的,只不过针对的数据不一样,这时就可以将这种功能写成一个函数模块,以后用到这个功能时只需要调用这个函数模块就可以了,不需要再重复地编写同样的代码。这样可以解决大量同类型的问题,避免重复性操作。第二,将语句集合成函数方便代码的维护。哪个功能出问题了,或者需要修改某个功能,那就只需要修改某个功能的函数就可以了。所以,函数有利于程序的模块化。这实际上就是面向过程的思想。面向过程语言最基本的单位不

2022-04-06 21:49:59 880

原创 js中==和===区别

简单来说: == 代表相同, ===代表严格相同, 为啥这么说呢,这么理解: 当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行===比较, 如果不同, 则愿意为你进行一次类型转换, 转换成相同类型后再进行比较, 而===比较时, 如果类型不同,直接就是false.操作数1 == 操作数2,操作数1 === 操作数2比较过程:  双等号==:  (1)如果两个值类型相同,再进行三个等号(===)的比较  (2)如果两个值类型不同,也有可能相等,需根据以下规则...

2022-03-30 20:58:16 99

原创 null和undefined的区别

Java Object 类是所有类的父类,也就是说 Java 的所有类都继承了 Object,子类可以使用 Object 的所有方法。null和undefined的区别1、首先是数据类型不一样console.log(typeof null) //objectconsole.log(typeof undefined) //undefined2、null和undefined两者相等,但是当两者做全等比较时,两者又不等。(因为他们的数据类型不一样)console.log(null==u..

2022-03-28 22:25:37 2466 1

原创 初学Javascript

今天开始了js的学习。JavaScript的历史为什么起名叫JavaScript?原因是当时Java语言非常红火,所以网景公司希望借Java的名气来推广,但事实上JavaScript除了语法上有点像Java,其他部分基本上没啥关系。因为网景开发了JavaScript,一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)组织定制了Jav

2022-03-28 22:08:19 922

原创 flex弹性盒子项目属性

上次说到容器的属性,今天继续学习内部项目的属性order 定义项目的排列顺序。数值越小,排列越靠前,默认为0flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比 其他项多一倍flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小...

2022-03-25 00:42:02 79

原创 flex弹性盒子

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。 它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。 任何一个容器都可以指定为 Flex 布局。语法:display : flex;display : -webkit-flex;(加上前缀便于浏览器识别)行内元素也可以使用 Flex 布局。 display:

2022-03-23 19:21:19 85

原创 初学移动端

今天开始移动端的学习,因为疫情原因在家上网课.一、先来看一下今天了解的一个css3样式column-count : 3; 列数column-width : 100px; 列宽column-gap : 2em; 列间距column-rule : 2px #f00 outset 列样式可以用这些属性来定义你的段落分列显示。二·、媒体查询@media screen and (max-width: 600px){.list{width: 100%;height: 1

2022-03-22 00:25:12 70

原创 csss3动画

csss3里面可以做一些小动画Keyframes “关键帧”首先设置动画的名字,开始和结束,可以是位置,角度,大小等@keyframes 动画的名称{ from{}to{}}一、animation-name: 动画名称我们用这个属性引入你上面的动画,可以同时引入几个动画给一个元素,但是中间需要用逗号隔开。二、animation-duration 动画持续时间取值:<time> 为数值,单位为s(秒)三、animation...

2022-03-17 21:50:15 394

原创 渐进增强和优雅降级

一.背景介绍:渐进增强和优雅降级是在CSS3出现之后才火起来的。由于低级浏览器,(特)比(别)如(是)IE6等,不支持CSS3的浏览器,但是CSS3的样式又特别优秀不忍放弃 ,所以在高级浏览器中应用CSS3样式,在低级浏览器只保证基本功能。“渐进增强”是被Steven Champeon创造于2003年3月11日在奥斯汀的SXSW互动大会,并于2003年3月和6月间通过一系列Webmonkey教程文章的公布。 (我找了半天资料,翻了下英文文章也只找到这段历史,无奈脸),谷歌公司是很支持这种开发方式的啊

2022-03-16 21:58:54 144

原创 CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。一.旋转 rotate用法:transform: rotate(45deg);共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。二.缩放 scale用法:transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表示缩放倍数;一个参数时:表示水平..

2022-03-16 21:55:39 4815

原创 css3重要样式属性

昨天我们又学习了一些新的选择器,今天我们来学习css3中一些样式属性一文字相关样式首先我们先来看一下设置文字的相关属性(1)第一个肯定就是设置文字的颜色了,我们通过color属性进行设置透明度:opacity属性指定了一个元素的透明度。RGBA:color: rgba(255, 0, 0, 0.6);注意: RGBA是在RGB的基础上多了控制alpha透明度的参数。文本的阴影语法:text-shadow:h-shadow(必写,水平阴影的位置,可以为负值) v-shado

2022-03-16 20:09:23 385

原创 前端开发神器 Emmet

好的开发工具是一定要学习和使用的,好工具让你事半功倍。Sublime,webStorm,HBuilder都内置了Emmet,熟练使用可以有效的提升编码效率。Emmet生成HTML的语法•你只需要输入一个 感叹号“!”(当然是英文符号) 就可以生成一个 HTML5 的标准文档初始结构,•然后摁下 TAB 键,就会发现生成了下面的结构:•<!doctype html>•<html lang="en">•<head>• <meta ...

2022-03-16 10:15:45 1096

原创 css3高级选择器

<style type="text/css"> .div1 p{ color:blue; } </style>我们之前已经了解过一些选择器,今天我们来了解一些其他高级选择器高级选择器: 后代选择器:用空格隔开 分组选择器:用逗号隔开 伪类选择器1、后代选择器: 定义的时候用空格隔开对于E F这种格式,表示所有属于E元素后代的F元素,有这个样式。空格就表示后代。后代选择器,...

2022-03-16 00:13:16 246

原创 CSS知识点总结

css基础知识点

2022-03-11 17:33:44 92

原创 绝对定位的应用

作业要求:使十字架在页面的垂直水平居中显示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { position: absolute; left: 0; right: 0; top: 0; bottom: 0;

2022-03-10 21:02:04 300

原创 css精灵图的案例

css精灵图案例

2022-03-08 15:17:05 376

原创 HTML背景图片

在我们日常的生活中,经常会见到一些网页背景是一张图片,那么怎么设置出这种效果呢,小编就带着大家一起来学习一下。首先大家需要料及一个属性:background-image ,通过这个属性来设置背景图片。用url来引入图片位置background-image: url(F2581BA79A437DCC9807D1311783E298.jpg);然后我们引入图片之后,来了解一下如何设置你引入的图片1,background--repeat 这个属性是用来设置图片的显示方式repeat,图片重复

2022-03-07 21:53:31 14459

原创 CSS盒子模型

盒子模型的大小‘、边框、内外边距

2022-03-05 17:01:14 153

原创 如何实现HTML里面鼠标放上之后背景改变

如何使用html制作一个鼠标放上之后文字背景改变的效果,并且点击背景就可以进行网页的跳转默认效果:鼠标放上去之后的效果:代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 首先使用通配符选择器对内外边距进行格式化 */..

2022-03-05 15:12:37 8287

原创 css语法,文本

一,css语法规则:css使用多种选择器来确定要定义的HTML标记和大量的属性来定义HTML文档基本语法:选择器{属性:属性值;}css可以通过多种选择符来选择要修饰的HTML标签1,统配选则器,就是选择所有的标签语法:*{规则}例:*{font-family:"宋体";}2,类型选择器,即使用标签的名字作为选择符语法:标签{规则}例:td{color:#F00;}3,ID选择器。每个HTML标签的id值都是不一样的,一个id只能使用一次语...

2022-03-04 00:52:22 255

原创 css引入样式和字体样式

css知识点css引入方式 1,行内样式<div style="color:red;">内容</div> ,2,内嵌式<style> div{color:red;}</style> 3,外链式<link rel="stylesheet" href="css文件"> 4,导入式@import url("cs...

2022-03-02 21:21:42 191

原创 link和@import的区别:

link和@import的区别:1、从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。2、加载顺序区别加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。3、兼容性区别@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。4、DOM

2022-03-02 20:57:38 4963

原创 href和src的区别

href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。例如:<link href="reset.css" rel=”stylesheet“/> 浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理。src是source的缩写,src的内容是页面必不可少的一部分,是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。例如&lt.

2022-03-02 20:56:47 228

原创 css基本样式

CSS层叠样式表 (Cascading Style Sheets)优点:①使HTML专注于网页的内容,CSS专注于网页的表现②提供了丰富的格式化功能③可以针对各种可视化浏览器(主要有显示器、打印机、PDA等)来设置不同的样式CSS与浏览器并不是所有的CSS的样式都被浏览器支持不同的浏览器对CSS的实现有细微的不同,需要特别注意1,行内样式直接使用标记的style属性style=" width:100px; height:100px; background-col

2022-03-01 21:40:03 62

原创 HTML基本元素分类

前言:学习了一周的HTML,下面是这一周遇到的基本元素分类 块元素 <p></p> <h1></h1>~<h6></h6> <ul></ul> <ol></ol> <hr> <div></div> <form></fo...

2022-03-01 16:52:34 102

原创 HTML表单

一,表单元素type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 textname指定表单元素的名称value元素的初始值。type 为 radio时必须指定一个值size指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位maxlengthtype为text 或 pa..

2022-02-28 21:37:42 173

空空如也

空空如也

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

TA关注的人

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