自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 less基本使用

这里写自定义目录标题了解less变量嵌套函数运算作用域注释了解lesscss是一门标记性语言,它的语法并不困难,使用起来基本没什么要求,但正是因为语法简单,书写css代码的时候就需要大量的看似没有逻辑大量的代码,代码多了之后后期很难做到维护修改,而且也会出现大量的重复代码,因此写的时候简单,一旦出了问题需要修改,就会非常困难,但是less的出现让我们可以像写js一下使用函数,变量等来书写css代码,也就提升了代码的复用和维护。less是一门向后兼容的扩展语言变量css的代码重复率其实是非常高的,比

2021-04-19 00:12:43 404 1

原创 数组去重的七种方法

第一种:利用对象的属性名不能重复的特性去重 var arr = [0, 1, 2, 1, 2, 3, 4, 5, 2, 4, 0] function fn(arr) { var obj = {} var newArr = [] for (let i = 0; i < arr.length; i++) { if (!obj[arr[i]]) {

2021-04-11 23:52:08 585

原创 JavaScript柯里化函数

什么是柯里化函数柯里化函数,官方一点的解释:是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。这么说有些难理解,那么我们直接使用代码来看,首先,我们写一个最简单的几个数求和的函数: function add(a, b, c, d) { return a + b + c + d } console.log(add(1, 2, 3, 4));正常来写,就是这样,但是这

2021-04-05 23:22:05 192

原创 this指向及改变this指向的方法

this指向在js中有一个很重要但是又比较难的点,那就是this的指向问题,this在函数内部定义的时候指向是不确定的,只有在调用的时候才能知道。1.函数直接调用我们写一个代码,首先在声明一个变量a,值为1,,然后再写一个函数,内部同样声明一个a,值为2,在函数内部输出this.a。 var a = 1; function fun() { var a = 2 console.log(this.a); }

2021-03-28 23:33:40 168

原创 认识Nodejs

1.Nodejs是什么首先,要使用nodejs,我们需要知道它到底是什么,Node.js是Ryan Dahl于2009年5月基于Chrome V8引擎构建的一个开源和跨平台的JavaScript运行环境。主要在Windows、Linux、Unix、MacOSX等不同平台上运行。简单的说,nodejs就是可以在服务端运行的JavaScript2.为什么要使用nodejs1.首先,nodejs使用的就是javascript,那么学习难度自然就相对简单一点,对于我们前端工程师来说,掌握一门后端语言还是很有必

2021-03-21 23:27:51 166

原创 canvas实现贼好看的烟花效果

效果图:废话不说,上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>

2021-03-21 21:42:21 675

原创 数组方法详解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&

2021-03-12 15:07:14 105

原创 简述Ajax

文章目录Ajax简介异步加载Ajax请求1.get请求2.post请求Ajax简介首先,我们使用某样东西,就一定要先了解它,那么,Ajax是什么呢,又能帮我们做什么呢?要知道,Ajax其实并不是一种新技术,而是由XHTML,CSS,JavaScript,XmlHttpRequest,XML,JSON,DOM等多种技术混合而成的。传统的页面在与服务器通信后都会刷新页面,而Ajax可以做到不刷新页面,也就是我们说的‘异步加载,局部更新’,在不刷新页面的同事做到局部更新页面。异步加载异步加载指的是某段

2021-03-09 20:51:29 94

原创 响应式布局之bootstrap布局

在写页面时,其实它的html和css写起来是最麻烦的,特别是样式,我们只能一点点的去改,为了开发的效率,我们就要学会使用boostrap这个目前最受欢迎的前端框架了。首先网址:中文网:http://www.bootcss.com/官网:http://getbootstrap.com/我们可以通过这两个网址去下载它1.bootstrap1.1 简介Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它

2021-01-25 20:08:43 215

原创 flex布局

一、flex布局1.1 flex布局是什么?flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局。 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 F

2021-01-25 19:27:33 90

原创 移动端布局

这里写自定义目录标题移动端是什么?移动端的现状移动端布局视口布局视口 layout viewport视觉视口 visual viewport理想视口 ideal viewport移动端难点总结移动端是什么?学习移动端布局,首先,我们需要知道什么是移动端,在前端开发里,一般来说,移动端就是手机和平板电脑。移动端的现状随着时代的发展,手机的品牌越来越多,每个品牌的型号也各不相同,也就导致了我们在开发时不能像pc端一样直接使用像素来布局,移动端的屏幕大小不同意味着我们使用常规布局在每个移动端打开都会不一样

2021-01-05 20:10:39 104

原创 HTML5新增属性来实现立体字效果

html5的出现让我们不用js也可以实现动画效果,先上效果:当我们把鼠标放上去的时候字变成了三个,也就成了立体字,其实我们是通过伪元素来创建出与标签内容一样的内容的元素,并让他们叠在一起,当鼠标经过时改变第一层以及最下面一层,来达到立体效果先写html结构:<div> <span data-text="飞">飞</span> <span data-text="雪">雪</span> <

2020-12-27 23:17:45 811

原创 渐变轮播图

要写轮播图,说先要知道轮播图到底是怎么做到轮播的效果的,今天就写一篇渐变轮播图,代码非常简单。基本原理就是通过改变图片的透明度,然后利用过渡属性来实现图片的渐变,话不多说,上代码:首先是html的,我们先分析框架,一定是一个大盒子包住图片,利用透明度来改变也就是说,当某张图片展现出来的时候其他图片的透明度我们就让他隐藏,然后盒子里应该有下一张和上一张按钮,再加上与图片数量对应得标签,因为要与图片对应,我们最好能够动态创建:<!-- 轮播图的包裹盒 --> <div id="bo

2020-12-27 22:52:02 1392

原创 正则表达式

文章目录前言一、正则表达式是什么?二、创建正则表达式三、字符3.1 基本元字符3.2 限定元字符3.3 首尾四、正则表达式的使用总结前言要学习正则表达式,首先我们需要知道什么是正则表达式,它的作用是什么,最后我们需要在哪里使用它一、正则表达式是什么?正则表达式的全名是regular expression虽然看起来正则特别乱特别复杂,但实际上它是一个有规则的表达式,而它的的作用就是用一段代码来表示一个区域的字符,然后通过它来匹配查找你需要的内容,简而言之,正则表达式就是一个用于查找的含有匹配字符串或

2020-12-20 22:45:56 153 1

原创 12306注册页面

话不多说,先上代码<!-- 表单验证全部内容用div包住 --> <div class="box"> <!-- 头部蓝色导航条 --> <div class="inf">帐户信息</div> <!-- 表单内容 --> <form action="../html/09.渐变轮播图模板.html" class="acc"> &lt

2020-12-20 21:57:47 1607

原创 利用JavaScript实现发表、修改、删除评论

要用js实现这些功能,首先我们分析一下需要做什么1.再文本框写评论2.创建一个能储存写好的评论的地方,我们一般用无序列表li来储存3.li不能让它固定,所以我们也需要用js来动态创建4.肯定要在已经发布的评论哪里删除,也就是说,再创建的li中在创建两个按钮那么大致的html就只需要创建一个文本框和一个发表评论的按钮就够了,为了方便,ul也可以先创建好:<div class="bigBox w"> <textarea name="" id="txt" cols="

2020-12-12 17:08:40 4173 3

原创 弹出登录界面(可拖拽)并且关闭

大多数的网站都会在你进入之前弹出一个登录注册界面,那么怎么实现它呢,这个时候我们需要用到html来搭建内容,css美化,再使用JavaScript来让它动起来好的,首先我们先写一个html:<!-- 首先创建一个div包裹一个a标签,我们需要点击它来弹出登录框 --><div><a href="#">点击,弹出登录框</a></div><!-- 这个div就是登录框了 --> <div> &l

2020-12-12 16:29:50 645

原创 JavaScript初级:函数

.文章目录前言一、函数是什么?二、函数创建2.1 字面量创建函数2.2 匿名函数创建二.参数及返回值总结前言函数的本质其实就是对象,在js中函数的出现是我们在写代码时得到了很多便利,也减少了巨大的代码量,在整个js中函数的重要性是不言而喻的。一、函数是什么?函数的本质其实就是对象,对象储存的是各种数据,但是函数在我们使用时会将一段代码存储在函数中,这段代码一般都是解决某些问题的方法,函数中的代码不会直接运行,需要通过函数名来调用。二、函数创建2.1 字面量创建函数函数语法:

2020-12-06 20:58:23 104

原创 js中的运算

文章目录前言一、操作符和操作数1.1 操作符1.2 表达式二、运算符的分类2.1 算数运算符2.2 比较运算符2.2.1 大小比较2.2.2 相等比较2.2.3逻辑运算符2.2.4 条件运算符总结前言在JavaScript中,数据的运算使用频率非常之高,当然,无论在哪种计算机编程语言中,数据运算都是基石。一、操作符和操作数操作符:参与运算的符号,与我们现实的计算符号不同,在计算机编程中,运算符号不一定中有一个符号(如:=表示赋值;"“表示等于;”="表示全等于)操作数:参与运算的数据1.1 操作

2020-12-05 15:56:01 1282

原创 JavaScript:循环

文章目录前言一、循环是什么?二、实例1.while循环2.do-while循环3.for循环总结前言js中,循环的使用是非常频繁的,js中会有很多时候代码都需要重复运行,那么我们在写代码时不可能一遍一遍地去写,这个时候我们就必须用到循环一、循环是什么?循环就是重复的运行一段代码以达到用户的需求JS中的三种循环结构:while循环:先判断条件,再进行循环while(条件){ // 循环体 }do-while循环:首先循环一次,再判断条件,也就是说,使用do-while循环时,无论如

2020-11-29 20:58:07 153

原创 JavaScript数据类型详解

文章目录前言一、数据以及数据类型二、数据类型2.1 原始类型2.1.1 数字类型2.1.2 字符串2.1.3 布尔类型2.1.4 undefined类型2.1.5 null类型2.2引用类型2.2.1 对象 object2.2.2 函数 function总结前言JavaScript简称js,要想学好js,就绕不开数据,只有搞清楚数据以及数据类型,才能将他们运用清除。一、数据以及数据类型数据最直白的解释就是有用的信息,而数据类型就是将这些信息进行分类,让计算机能够快速准确的认识他们。二、数据类

2020-11-29 20:13:15 127 1

原创 菜鸟教程:定位的使用

文章目录前言一、了解定位二、偏移量1.了解偏移量2.读入数据总结前言定位在前端css中是一大重点,定位的出现是我们的前端布局变得非常方便快捷,它的作用就是控制元素在包含块中的精准位置,非常的简单粗暴。一、了解定位定位属性position:static:默认值,表示常规流定位relative:相对定位,不会导致元素脱离文档流,只是让元素在原来的位置进行偏移absolate:绝对定位,会让元素脱离文档流,不占据页面位置,且会使元素变为块盒fixed:固定定位,也会脱离文档流,但包含快为浏览器可

2020-11-22 22:05:25 663

原创 菜鸟教程:浮动

文章目录前言一、了解浮动1.1 浮动的运用场景1.2 浮动的基本特征二、使用步骤1.引入库2.读入数据总结前言想要学好浮动,那么盒子模型是一定要掌握的,浮动在页面布局时的使用率是非常高的,也可以说是我们前端css的一个重点了。一、了解浮动首先,我们要学习浮动就要知道浮动要在什么场景下来使用,它能解决哪些问题,又会给我们带来哪些问题。1.1 浮动的运用场景最开始,浮动是为了解决文字环绕的问题而产生的,而现在,浮动可以直接作用于页面布局,前面也说过,块盒在页面中是独占一行的,那么我们就要使用浮动来

2020-11-21 15:57:11 410

原创 菜鸟教程:盒子模型

前言模型是前端写页面的基础,也是最重要的基础,我们写出来的代码其实放到浏览器中就是一个一个盒子将元素包裹然后排列呈现出来的结果。一、盒子是什么?每个元素在页面中都会形成一个矩形区域,我们能将其称之为盒子。在浏览器中显示出来的界面就是这样一个一个盒子拼凑排列然后展示出来的。二、盒子类型盒子的类型分为两类,分类的依据是它的display属性1.行盒行盒的display属性是inline,在页面中它是无法独占一行的。最典型的行盒就是.2.块盒块盒的display属性是block,与行盒相反,它在

2020-11-15 23:59:58 620

原创 菜鸟教程,css小白入门

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码

2020-11-15 23:59:19 978

原创 菜鸟教程:HTML表单详解

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、表单元素form二、form元素的属性1.action2.method3.enctype4.注意事项三.input元素1.input元素是什么?2.type2.1 text2.2 password2.3 radio2.4 checkbox2.5 button2.6 submit3.其他属性3.1 name3.2 value3.3 placeholder3.4 disabled3.5 readonly4.textare元素5.

2020-11-08 21:02:21 1148 2

原创 菜鸟教程:零基础HTML入门

HTML入门文章目录一、HTML是什么?二、入门实例1.新建html文档2.html常用标签三、属性总结一、HTML是什么?HTML全称:Hyper Text Markup Language中文名:超文本标记语言HTML是由W3C组织定义的语言标准,是用于描述页面机构的语言。二、入门实例1.新建html文档如图:每一个html文件开头必须是这个标签,作用是告诉浏览器此文档为html文档。:根元素在所有的html文件中这个元素级别最高网页编码格式,一般为UTF-8中间内容就是这个h

2020-11-08 18:23:26 20886 2

空空如也

空空如也

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

TA关注的人

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