自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 Git的基本使用

目录一、Git是什么?二、Git的特性2.1Git的记录快照2.2 几乎所有操作都是本地执行三、Git中的三个区域3.1 工作区中文件的4种状态四、Git中的三种状态五、Git的全局配置六、Git基本命令使用6.1、git init​编辑 6.2、git add6.3、git commit6.4、git status 和 git status -s七、使用Github创建和维护远程仓库7.1、远程仓库的两种访问方式7.2、SSH key7.

2022-05-24 15:16:52 308 1

原创 npm和yarn的使用

目录一、什么是npm1.1安装npm工具1.2 npm镜像设置1.3 npm的使用1.4 npm常用命令1.5 Package.json 文件属性说明二、什么是Yarn2.1 Yarn的优点2.2 Yarn的安装2.3 Yarn的基本使用一、什么是npmnpm(全称Node Package Manager,即node包管理器)。是Node.js默认的、以JavaScript编写的软件包管理系统。npm来分享和使用代码已经成了前端的标配。官网:ht.

2022-05-18 11:05:39 3259 1

原创 HTTP简介

文章目录一、HTTP通信1.什么是通信2.通信协议3.HTTP协议4.交互模型二、HTTP请求消息1.什么是请求消息2.组成部分三、HTTP响应消息1.什么是响应消息2.组成四、HTTP请求方法1.什么是请求方法五、HTTP响应状态码1.什么是响应状态码2.组成3.五种类型总结一、HTTP通信1.什么是通信通信,就是信息的传递和交换。通信三要素:通信的主体、内容、方式2.通信协议通信协议,是指通信的双方.

2022-05-17 08:58:34 344 1

原创 Ajax基础

文章目录一、Ajax是什么?二、URL地址组成三、jQuery发起Ajax1.$.get2.$.post3.$.ajax四、XMLHttpRequest1.readyState属性2.查询字符串3.GET和POST4.XMLHttpRequest Level2新功能五、封装Ajax函数总结一、Ajax是什么?Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)...

2022-05-13 19:45:06 128

原创 改变this指向问题笔记

改变函数内部this指向一共有三种方法,分别为call方法,apply方法和bind方法。call()方法语法: 函数.call(参数1,其他参数....可以是多个或者没有 )作用: call可以调用函数,也可以改变函数内的this指向 call的主要作用可以实现继承apply()方法语法: fun.apply(thisArg, [argsArray])调用函数thisArg:在fun函数运行时指定的this值argsArray:传递的值,必须包含在数组里面返回...

2022-04-27 19:38:17 481 1

原创 for循环中var和let的区别

今天在做题的时候,遇到了一个不太懂的问题,经过查阅资料,终于搞明白了这个问题,发出来当做个笔记。首先是var:for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }) };输出结果:let方法:for (let i = 0; i < 5; i++) { ...

2022-04-27 11:32:57 6346 7

原创 JS边框图片基础知识

当我们有很多的大小不一但是盒子的边框样式相同的盒子的时候,我们就能用到边框图片来完成盒子边框。原理:把四个角切出去(九宫格的由来),中间部分可以铺排、拉伸或者环绕。边框图片的语法border-image-source:用在边框的图片的路径border-image-slice:图片边框向内偏移(裁剪的尺寸,一定不加单位,上右下左顺序)border-image-width:图片边框的宽度(需要加单位),不会挤压文字(不是边框的宽度是边框图片的宽度)border-image-repeat

2022-04-14 19:13:57 1406 1

原创 jQuery滑动效果和动画应用

滑入滑出动画,常见有三个方法:slideDown() / slideUp() / slideToggle() ;语法规范如下:案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

2022-04-09 09:52:42 784

原创 jQuery排他思想(siblings)

1、了解siblings语法:siblings(selector)用法:$(".frist").siblings(“li”)说明:查找兄弟节点,不包括自身元素2、排他思想想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。例子:html:<body> <table> <tr> <th>项目</th&...

2022-04-07 09:39:47 3368 1

原创 JS贪吃蛇练习

效果图:完整代码如下:html:<!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

2022-03-15 10:02:27 104 2

原创 节流阀解决JS动画抖动问题

文章目录系列文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug ,今天我们就来解决这个bug。示例:可以看到当鼠标慢慢移动时,动画正常执行出现和退回,但当在动画执行过程中快速移动鼠标后,画面会出现抖动的bug。以下是效果图源代码:<!DOCTYPE html>&lt...

2022-03-10 15:29:11 956 1

原创 2021年度总结

文章目录系列文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言转眼之间,2021年就过去了,在过去的一年里,我学习了很多新的知识,今天就来做一个总结。za总结提示:这里对文章进行总结:例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...

2022-01-22 19:40:28 261

原创 JS之拖动模态框案例

效果图:话不多说,我们直接上代码:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; .

2022-01-10 16:04:57 161

原创 BOM之定时器

定时器(两种)window 对象给我们提供了 2 个非常好用的方法-定时器。 setTimeout() setInterval() setTimeout() 炸弹定时器开启定时器普通函数是按照代码顺序直接调用。简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。例如:定时器中的调用函数,事件处理函数,也是回调函数。以前我们讲的 element.onclick = function(){} 或者 element.addEv...

2022-01-10 15:46:48 178

原创 JavaScript DOM

目录1、什么是DOM2、DOM树3、获取元素的方法3.1根据ID获取3.2根据标签名获取3.3.H5新增获取元素方式3.4 获取特殊元素(body,html)4.事件基础4.1事件概述4.2事件三要素4.3执行事件的步骤1、什么是DOM文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。 W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接...

2021-12-31 10:00:21 272

原创 JavaScript函数及其作用

目录一、函数的作用二、函数的使用三、函数封装四、函数的返回值五、函数的两种声明方式总结一、函数的作用在 JS 里面,我们可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。简单来说就是:函数封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 二、函数的使用在JavaScript中,每个函数其实..

2021-12-22 15:50:31 1966 2

原创 JS冒泡排序

文章目录系列文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言算法是每一个程序员都绕不过去的坎,不管是前端还是后端,在写代码中都会用到算法,虽然对于前端来说算法暂时不用研究太深入,但基础还是要打好的,而基础算法我们就从排序算法开始学习吧,本文主要分享排序算法的入门:冒泡排序。一、冒泡排序描述冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的元素列,依次比较两个相邻的元...

2021-12-14 15:09:25 283 10

原创 纯CSS实现网页侧边栏滑出滑进并停留

当我们打开网页的时候,经常都能看到上图所示的那种导航栏,鼠标一放上去就会出现一个弹窗,非常的美观和实用,那么这种效果是如何做到的呢?接下来就让我们一起来实践一下。html代码部分:<body> <div class="subnav"> <ul> <li> <div>123</div> </li> ...

2021-12-06 19:50:42 2983 4

原创 移动web之响应式布局

1.响应式开发原理响应式开发原理:就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:尺寸划分 尺寸区间 超小屏幕(手机,小于 768px) 小于768的为超小屏幕(手机) 小屏幕(平板,大于等于 768px) 768~992之间的为小屏设备(平板) 中等屏幕(桌面显示器,大于等于 992px) 992~1200的中等屏幕(桌面显示器) 大屏幕(大桌面显示器,大于等于 1200px) 大于1200的宽.

2021-11-23 14:35:27 156 9

原创 CSS渐变-圆形年轮

文章目录一、径向渐变二、重复的径向渐变三、制作步骤四、详细代码总结最近用径向渐变做了一个圆形年轮,感觉挺有意思的,分享给大家看一下。一、径向渐变径向渐变(radial-gradient):指从一个中心点开始沿着四周产生渐变效果。语法: background:radial-gradient(起始方向,颜色1,颜色2,…); background:-webkit-radial-gradient(left,red,blue);(兼容性) bac...

2021-11-12 19:52:52 2221 8

原创 CSS3 3D转换

目录前言一、三维坐标系二、3D转换3D转换知识要点:1.3D 位移:translate3d(x, y, z)2.3D 旋转:rotate3d(x, y, z)3.透视:perspctive4.3D呈现 transfrom-style总结前言我们平时生活的环境是3D的,那么如何让3D的东西在2D上呈现呢?照片就是3D物体在2D平面呈现很好的一个例子。特点:1、近大远小2、物体后面遮挡不可见当我们在网页上构建3D效果的时候参考这些特点就能产生3D.

2021-11-04 15:48:57 305 8

原创 HTML5的新特性

目录前言一、语义化标签二、多媒体标签 1.视频标签-video 2.音频标签-audio三、新增表单属性总结前言HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。一、语义化标签 <header> 头部标签 <nav>...

2021-10-29 08:38:38 1272 8

原创 新增结构伪类选择器的使用

一、属性选择器的定义1.属性选择器,按照字面意思,都是根据标签中的属性来选择元素2.属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器3.属性选择器也可以选择出来自定义的属性注意:类选择器、属性选择器、伪类选择器,权重为 10二、属性选择器的选择符...

2021-10-25 10:48:19 193

原创 CSS元素的显示和隐藏

目录前言一、display二、visibility三、overflow总结前言在CSS中,隐藏和显示是我们经常会用到的方法,最常用的方法有三种:display、visibility、overflow。它们的主要目的是让一个元素在页面中消失,但并不是让它们被删除掉,比如网页中的小广告,关掉以后再次刷新页面又会重新出现。一、display要点:display元素隐藏后,不再占有原来的位置。用途:配合js做特效,比如下拉菜单,原先没有,鼠标经过显示下拉菜单,...

2021-10-15 10:35:57 718 2

原创 CSS定位position的层级关系问题

目录前言一、position是什么?二、position属性1.静态定位(static)2.绝对定位(absolute)3.相对定位(relative)4.固定定位(fixed)三、层级关系示例:​总结 前言CSS属性一共有x、y、z三条轴,但z轴只有使用了position属性时,z轴上的层级关系才体现出来,所以z-index这个属性只有定位元素才有。 一、position是什么?position 属性规定元素的定位类型。 二、positi

2021-10-11 09:28:36 1681 14

原创 CSS选择器,盒子模型及浮动

CSS 选择器,盒子模型及浮动文章目录CSS 选择器,盒子模型及浮动前言一、CSS选择器1.基础选择器2.复合选择器二、CSS盒模型1.组成2.圆角边框3.盒子阴影4.文字阴影三.浮动1.浮动特性2.清除浮动总结前言经过一段时间web前端的学习,我大致了解了CSS的作用,CSS是层叠样式表(Cascading Style Sheets)的简称。CSS也是一种标记语言。CSS主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示

2021-09-23 19:32:04 284 9

空空如也

空空如也

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

TA关注的人

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