自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(445)
  • 资源 (52)
  • 收藏
  • 关注

原创 js三角恋

1.课程目标:1.1:原型怎么写?1.2:prototype的特点是什么?1.3:对象的三角恋关系是怎么样的?

2020-11-11 10:19:46 1115 19

原创 js对象篇

1.创建对象的三种方式:<!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>

2020-11-07 23:08:12 1277 15

原创 BOM详解(整个BOM架构体系)

**BOM最详解: **课程目标:了解:1.BOM架构全局对象的使用.2.根据案例来讲解3:大总结。4;效果.1.什么是BOM?和浏览器进行交互的对象架构就是BOM.2.Navigator课程目标:了解怎么使用Navigator。形式:window.navigator.属性。代表获取浏览器的各种信息。作用; // Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器源代码:<!DOCTYPE html>&lt

2020-11-05 22:39:23 189 8

原创 js操作标签最详解(三种方式)

源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签的属性</title></head><body> <img src="images/1.j

2020-11-02 03:54:59 258 7

原创 js 深度解析DOM

1:DOM开篇<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>程序之美</title></head><body> <scrip

2020-11-01 09:11:34 232 5

原创 2种清除浮动方式(超详解)

清除浮动方式一:<!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 type="text/css">

2020-10-31 14:07:25 241 8

原创 float现象(是什么,脱标,排序,贴靠,字围,高度问题)

float特点:1:浮动的元素能让行内元素设置宽高.2:记住,浮动的元素能使用内外边距.3:浮动中不区分行内/块级/行内块级元素的.都可以设置宽高.4:浮动元素是一种水平排版的东西.5:浮动跟行内块级元素很像.6:float只能水平排版.缺点:1:浮动中没有居中对齐,没有.只有左对齐 右对齐.2:但是不能使用margin: 0 auto;使用这样无效.什么是水平排版?行内元素/行内块级元素什么是垂直排版?块级元素

2020-10-31 09:37:23 2271 13

原创 line-height最详解

line-height注意点:行高和盒子高不是同一个概念行高指的是每行内容的高度盒子高指的是元素的高度怎么办?第一步:先把行高设置成20px第二步;再设置自身padding的top与bottom为20px就行了.这样就和行高80px一样。还原字体与字号:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>54-清空默认边

2020-10-31 02:52:46 174 1

原创 css3盒子模型最详解

box-sizing<html lang="en"><head> <meta charset="UTF-8"> <title>51-盒子box-sizing属性</title> <style> .content{ width: 300px; height: 300px; background-color: red;

2020-10-31 01:19:45 216 3

原创 CSS盒子模型最详解

1:什么是盒子模型?最重要的一点就是水平方向外边距是会叠加的哈内容+内边距+边框+外边距==盒子模型;注意一下:外边距是没有背景颜色的哈.设置不了的哈.举例子:结论1.在HTML中所有的标签都可以设置宽度/高度 == 指定可以存放内容的区域内边距 == 填充物边框 == 手机盒子自己外边距 == 盒子和盒子之间的间隙代码:<!DOCTYPE html><html lang="en"><head> <meta charset

2020-10-31 00:55:00 108 3

原创 CSS border详解+padding详解+margin详解

border篇:<!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 type="text/css">

2020-10-30 10:43:19 52 1

原创 重学---css背景与精灵图

background-color:<!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 type="text/css"> *{

2020-10-30 09:50:33 54 4

原创 css显示模式

来来来,实现一个简单的布局.(div容器级与span文本级)的区别<!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 type="te

2020-10-30 03:18:53 86 1

原创 css三大特性继承性 层叠性 优先级 !important 权重

继承性:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>24-CSS三大特性之继承性</title> <style> div{ color: red; text-decoration: none; font-size: 3

2020-10-30 01:18:54 90 1

原创 css3选择器高级部分

序选择器;<!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 type="text/css"> *{padding: 0px

2020-10-30 00:51:42 51

原创 五千字长文-css3选择器基础最详解(讲述其核心特点)(下次更新的是选择器高级)

标签选择器:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08-标签选择器</title> <style> p{ color: red; } h1{ color: blue; } <

2020-10-29 14:58:58 154 10

原创 js拖动(一个完整的案例呈现)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-29 09:09:42 64 1

原创 touch的深入理解

<!doctype html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta charset="utf-8"> <title></title> <style type="text/

2020-10-29 05:14:44 62 1

原创 touch实现js拖拽

<!DOCTYPE html><html lang="en" style="font-size: 30px"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="

2020-10-29 05:03:19 75

原创 JS函数(号称最全最详解包括es6)

第一绝:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> //什么是函数? /* 1.什么是函数? 函数是专门用于封装代码的, 函数是一段可以随时被反复执行的代码块

2020-10-29 00:05:01 73

原创 JS数组(最全的数组最详解包括es6)

数组第一:问题?什么是数组?数组就是用来存储一组数据的东西。注意:数组不是基本数据类型,他是引用数据类型。简称对象类型。问题?为什么呢?因为他的元素代表类一个一个对象啊。问题?怎么创建一个数组?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body&g

2020-10-28 23:24:45 216 2

原创 史上最全html,搞定OF COURSE.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <img src="./.jpg" width="100" height="100" title="贵哥牛逼" alt="李文"></body></html>

2020-10-28 22:55:14 80

原创 居中的几种方式

第一种:<!doctype html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta charset="utf-8"> <title></title> <style type=

2020-10-28 04:00:55 60

原创 响应式布局(媒体查询)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-28 03:52:30 63

原创 input的类型汇总

<!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> 文本类型:<input type="text

2020-10-28 02:51:11 56

原创 localStorage与sessionStorage的增删改查

<!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 type="text/jav

2020-10-28 00:26:34 56

原创 js拖拽

/*js拖拽逻辑:第一:为什么要定位?因为往左往上left top要定位的哈第二:为什么点击down包括着移动move与抬起up.因为代表这三个是不独立的.第三:为什么down是div.move与up是document.因为鼠标移动是在document移动,点击是在div上点击.其实一句话,鼠标移动div跟着移动而已.*/核心代码:代表着鼠标到可视区-div到可视区===div到可视区.代表了***移动后的***的鼠标到可视区的----div到鼠标的距离.这里面可能有点难理解,我举

2020-10-28 00:12:50 68 2

原创 jsDOM逐步实现原生事件机制(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-19 22:56:26 84 4

原创 js的图片渐渐入渐渐出的效果(html逻辑 css逻辑 js逻辑))

<!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 type="text/css"> *{padding: 0px;margi

2020-10-19 03:45:07 99 4

原创 js逐步实现原生模态登录框(css逻辑 js逻辑)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https:/

2020-10-18 23:42:21 134 4

原创 js逐步教你实现DOM系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-17 10:29:57 95 2

原创 js逐步教你实现原生汇率计算器系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-17 07:49:04 437 9

原创 JS逐步教你做(自己版本)的视频播放器(html逻辑 css逻辑 js逻辑)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://stackpath.bootstrapcdn.

2020-10-17 02:11:39 134 3

原创 js逐步教你实现原生电影院系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-15 00:03:48 1393 22

原创 js逐步教你实现原生古诗匹配系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-13 00:06:41 90 1

原创 h5逐步实现 <<canvas系统>>(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-12 00:58:48 189 8

原创 js逐步实现原生flex系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;marg

2020-10-11 23:36:05 119 6

原创 js逐步实现原生控制系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-10 00:46:39 138 7

原创 js逐步教实现表单系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> :root {

2020-10-09 00:57:39 115 2

原创 js逐步教实现音乐系统(html逻辑 css逻辑 js逻辑)

<!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 type="text/css"> *{padding: 0px;margi

2020-10-08 04:03:00 474 1

29 - Countdown Timer.rar

29 - Countdown Timer.rar

2020-05-02

27 - Click and Drag.rar

27 - Click and Drag.rar

2020-05-02

26 - Stripe Follow Along Nav.rar

26 - Stripe Follow Along Nav.rar

2020-05-02

25 - Event Capture, Propagation, Bubbling and Once.rar

25 - Event Capture, Propagation, Bubbling and Once.rar

2020-05-01

24 - Sticky Nav.rar

24 - Sticky Nav.rar

2020-05-01

21 - Geolocation.rar

21 - Geolocation.rar

2020-05-01

20 - Speech Detection.rar

20 - Speech Detection.rar

2020-05-01

18 - Day18 - Reduce、Map混合使用计算时分秒.rar

18 - Day18 - Reduce、Map混合使用计算时分秒.rar

2020-05-01

17 - 数组排序.rar

17 - 数组排序.rar

2020-05-01

16 - 移动鼠标让字体呈现彩虹效果.rar

16 - 移动鼠标让字体呈现彩虹效果.rar

2020-05-01

15 - LocalStorage.rar

15 - LocalStorage.rar

2020-05-01

13 - 图片随屏幕滚动而滑入滑出的效果.rar

13 - 图片随屏幕滚动而滑入滑出的效果.rar

2020-05-01

12 - 键盘输入序列的验证指南.rar

12 - 键盘输入序列的验证指南.rar

2020-05-01

14 - JavaScript 引用和值拷贝.rar

14 - JavaScript 引用和值拷贝.rar

2020-05-01

10 - JS 实现 Checkbox 中按住 Shift 的多选功能.rar

10 - JS 实现 Checkbox 中按住 Shift 的多选功能.rar

2020-05-01

09 - Console 调试各种姿势指南.rar

09 - Console 调试各种姿势指南.rar

2020-05-01

08 - HTML5 Canvas 实现彩虹画笔绘画板.rar

08 - HTML5 Canvas 实现彩虹画笔绘画板.rar

2020-05-01

06 - Fetch、filter、正则表达式实现快速古诗匹配.rar

06 - Fetch、filter、正则表达式实现快速古诗匹配.rar

2020-05-01

05 - Flex Panel Gallery.rar

05 - Flex Panel Gallery.rar

2020-05-01

04 - Array Cardio Day 1.rar

04 - Array Cardio Day 1.rar

2020-05-01

03 - CSS Variables.rar

03 - CSS Variables.rar

2020-05-01

02 - JS and CSS Clock.rar

02 - JS and CSS Clock.rar

2020-05-01

01 - JavaScript Drum Kit.rar

01 - JavaScript Drum Kit.rar

2020-05-01

CSS3(加个关注就行).rar

CSS3(加个关注就行).rar

2020-05-01

CSS3脚本.rar

CSS3脚本.rar

2020-05-01

选项卡(加个关注就行).rar

选项卡(加个关注就行).rar

2020-05-01

表单脚本(加个关注就行).rar

表单脚本(加个关注就行).rar

2020-05-01

滚动条(加个关注就行).rar

滚动条(加个关注就行).rar

2020-05-01

瀑布流(加个关注就行).rar

瀑布流(加个关注就行).rar

2020-05-01

播放器(加个关注就行).rar

播放器(加个关注就行).rar

2020-05-01

弹出层(加个关注就行).rar

弹出层(加个关注就行).rar

2020-05-01

倒计时(加个关注就行哈).rar

倒计时(加个关注就行哈).rar

2020-05-01

进度条(加个关注就行哈哈哈哈).rar

进度条(加个关注就行哈哈哈哈).rar

2020-05-01

BaiduNetdisk_6.8.2.21.exe

BaiduNetdisk_6.8.2.21.exe

2020-04-30

在线客服(可以的话,加个关注).rar

在线客服(可以的话,加个关注).rar

2020-04-30

文字特效(可以的话,加个关注).rar

文字特效(可以的话,加个关注).rar

2020-04-30

手风琴(可以的话,加个关注).rar

手风琴(可以的话,加个关注).rar

2020-04-30

时间轴(可以的话,加个关注).rar

时间轴(可以的话,加个关注).rar

2020-04-30

日历代码(可以的话,加个关注).rar

日历代码(可以的话,加个关注).rar

2020-04-30

前端面试题(可以的话,加个关注).rar

前端面试题(可以的话,加个关注).rar

2020-04-30

空空如也

空空如也

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

TA关注的人 TA的粉丝

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