- 博客(61)
- 收藏
- 关注
RSS订阅原创 27.CSS-3D模块
文章目录3D模块1.什么是2D和3D?2.如何让某个元素呈3D展现的练习:做一个正方体 3D模块 1.什么是2D和3D? 2D就是一个平面,只有宽度和高度,没有厚度; 3D就是一个立体,有宽度和高度,还有厚度. 默认情况下,所有元素都是呈2D展现的 2.如何让某个元素呈3D展现的 和透视一样,想看到某个元素的3D效果,只需要给他的父元素添加一个transform-style属性,然后设置为preserve-3d即可 <style> *{ margin: 0; pa
2021-07-29 14:07:56
346
原创 26.CSS-动画模块
文章目录动画模块1.过渡和动画之间的异同2.动画的三要素3.属性 动画模块 1.过渡和动画之间的异同 不同点: 过渡必须人为触发才会执行动画; 动画不需要人为触发就可以执行动画. 相同点: 过渡和动画都是用来给元素添加动画的; 过渡和动画都是系统新增的一些属性; 过渡和动画都需要满足三要素才会有动画效果. 2.动画的三要素 告诉系统需要执行哪个动画 告诉系统我们需要自己创建一个自己指定名称的动画 告诉系统动画需要持续的时间 div{ width: 100px; height:
2021-07-28 15:48:40
317
原创 12.JavaScript-函数预解析
文章目录函数预解析1.什么是预解析?2.预解析规则3.注意点练习 函数预解析 1.什么是预解析? 浏览器在执行JS代码的时候会分成两部分操作:预解析以及逐行执行代码. 也就是说浏览器不会直接执行代码,而是加工处理之后在执行. 这个加工处理的过程,我们就称之为预解析. 2.预解析规则 将变量声明和函数声明提升到当前作用域的最前面. 将剩余代码按照书写顺序依次放在后面. 3.注意点 通过let定义的变量不会被提升(不会被预解析) 练习 // 1.下列程序的执行结果是什么? var a =
2021-07-27 10:10:59
245
原创 11.JavaScript-函数(下)
文章目录函数(下)6.函数形参默认值7.函数作为参数和返回值8.匿名函数9.箭头函数10.递归函数11.函数中变量作用域 函数(下) 6.函数形参默认值 格式: function getSum(a = 默认值,b = 默认值){} 注意点: 在ES6之前可以通过逻辑运算符来给形参指定默认值; 在逻辑或运算中,如果参与运算的不是布尔类型,返回值有一个特点 格式:条件A || 条件B 如果条件A成立,那么就返回条件A; 如果条件A不成立,无论条件B成不成立,都会返回条件B. function getSum(a,
2021-07-26 17:05:37
177
原创 10.JavaScript-函数(上)
文章目录函数(上)1.什么是函数?不使用函数的弊端使用函数的好处2.函数格式函数定义步骤3.注意点4.函数arguments5.函数扩展运算符 函数(上) 1.什么是函数? 函数就是用于封装代码的,函数是一段可以随时被反复执行的代码块. 不使用函数的弊端 冗余代码太多 需求变更,需要修改很多代码 使用函数的好处 冗余代码变少了 需求变更,需要修改的代码变少了 2.函数格式 function 函数名称(形参列表){ 被封装的代码; } 函数定义步骤 1.书写函数的固定格式 function 函数名称(
2021-07-26 15:48:39
174
原创 9.JavaScript-数组
文章目录数组什么是数组?定义数组使用数组注意点数组的遍历什么是数组的遍历?数组的解构赋值数组的操作 数组 什么是数组? 数组就是专门用于存放一组数据的。 注意点： 和Number/String/Boolean/Null/undefined不同(基本数据类型),数组(Array)不是基本数据类型,是引用数据类型(对象类型)。 定义数组 格式： //通过构造函数创建数组 let 变量名称=new Array(size);//创建一个指定大小数组 let 变量名称=new Array();//创建一个空数组 le
2021-07-26 10:05:43
423
2
原创 8.JavaScript-变量作用域
变量作用域 1.在JavaScript中定义变量有两种方式 ES6之前: var 变量名称; ES6开始: let 变量名称; 2.两种定义变量方式的区别 如果通过var定义变量,可以重复定义同名的变量,并且不会报错,后定义的会覆盖先定义的; 如果通过var定义变量,可以先使用后定义(预解析); 如果通过let定义变量,不可以重复定义同名变量; 如果通过let定义变量,不可以先使用再定义,因为浏览器不会对let定义的变量进行预解析. 通过var定义的变量是不区分全局变量和局部变量,通过let定义的变量是区
2021-07-22 11:27:37
226
1
原创 7.JavaScript-流程控制
文章目录流程控制ifSwitchwhile循环do-while循环for循环三大跳转 流程控制 if JavaScript中if选择结构和C语言中一模一样 if(条件表达式1) { 语句块1 }else if(条件表达式2){ 语句块2 }else if(条件表达式3){ 语句块3 }else{ 语句块4 } Switch JavaScript中Switch选择结构和C语言几乎一样 switch(条件表达式){ case 表达式: 语句1; br
2021-07-21 14:50:55
303
2
原创 6.JavaScript-运算符注意点
运算符注意点 1.和C语言不同的是JavaScript中整数除以整数结果是小数； var res4 = 10 / 3; console.log(res4); // 3.3333 2.任何值和NaN做运算都得NaN； var result = 2 + NaN; console.log(result); //NaN 3.非Number类型的值进行运算时，会将这些值转换为Number然后再运算； var result = true + 1; // + - * / % console.log
2021-07-21 14:43:08
188
原创 5.JavaScript-数据类型
文章目录数据的分类静态数据动态数据数据类型如何检测数据类型？数据类型转换转换为字符串类型转换为Number类型转换为布尔类型 数据的分类 静态数据 静态数据是指一些永久性的数据,一般以文件的形式存储在硬盘上,比如文档、图片、视频等。 动态数据 动态数据是在程序运行过程中，动态产生的临时数据，一般存储在内存中，内存的存储空间一般都比较小。 计算机关闭之后，动态产生的临时数据就会被清除。 当运行某个程序时，整个程序就会被加载到内存中，在程序运行过程中，会产生各种各样的临时数据，这些临时数据都是存储在内存中的。
2021-07-21 14:25:54
223
1
原创 4.JavaScript-关键字、保留字和标识符
文章目录关键字什么是关键字?保留字什么是保留字?标识符什么是标识符?标识符的命名规则标识符的命名规范 关键字 什么是关键字? 被JavaScript语言赋予了特殊含义的单词. 关键字在开发工具中会显示特殊的颜色. 关键字不能作为变量名、函数名等. 关键字严格区分大小写,在JavaScript中所有的关键字都是小写的. 保留字 什么是保留字? JavaScript预留的关键字,虽然还不是关键字,但是以后的升级版本中有可能作为关键字. 标识符 什么是标识符? JavaScript标识符的概念和C语言一样
2021-07-20 16:14:23
279
2
转载 3.JavaScript-常量和变量
文章目录基本语法常量1.什么是常量?2.JavaScript中常量的分类变量1.什么是变量?2.如何定义变量?3.如何使用变量？4.注意点 基本语法 常量 1.什么是常量? 常量表示一些固定不变的数据. 2.JavaScript中常量的分类 (1) 整型常量 整型常量就是整数,在JavaScript中编写一个整数就是整型常量. 1/666/999 (2) 实型常量 实型常量就是小数,在JavaScript中编写一个小数就是整型常量. 3.14/6.66 (3) 字符串常量 字符串常量就是用单引号或者双引号括
2021-07-20 15:45:47
451
原创 2.JavaScript-常见的输出方式
文章目录常见的输出方式1.通过弹窗的方式来输出2.通过网页的内容区域的方式来输出3.通过开发者工具控制台的形式来输出 常见的输出方式 1.通过弹窗的方式来输出 格式： alert(需要输出的内容)； confirm(需要输出的内容)； prompt（需要输出的内容）； alert(123); alert('abc'); alert("快乐"); 注意点： 如果需要输出的内容不是数字，就必须通过单引号或者双引号括起来。 alert和confirm的区别就是在弹窗中，confirm比alert多一个取消按
2021-07-20 14:31:10
274
原创 25.CSS-盒子阴影和文字阴影
文章目录盒子阴影1.如何给盒子添加阴影？2.注意点文字阴影1.如何给文字添加参数？2.注意点 盒子阴影 1.如何给盒子添加阴影？ box-shadow：水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影； 2.注意点 盒子的阴影分为内外阴影，默认情况下就是外阴影。 快速添加阴影只需要编写三个参数即可，box-shadow：水平偏移 垂直偏移 模糊度；默认情况下阴影的颜色和盒子内容的颜色一致。 文字阴影 1.如何给文字添加参数？ text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色； 2.
2021-07-20 11:17:23
180
原创 24.CSS-2D转换
文章目录2D转换transform属性注意点transform-origin属性注意点perspective属性注意点 2D转换 transform属性 作用：能够对元素进行移动、旋转、缩放和倾斜的属性。 格式： transform：translate()； 从当前位置移动元素，第一个参数是水平方向，第二个参数是垂直方向。 transform：rotate()； 旋转元素，需要说明角度。例如：transform：rotate(45deg)； 默认是以Z轴旋转，也可以写成transform: rotateZ(
2021-07-20 10:29:11
208
2
原创 1.JavaScript-介绍
文章目录什么是JavaScript？JavaScript的作用JavaScript的组成JavaScript的书写格式 User Interface 用户界面，我们所看到的浏览器 Browser engine 浏览器引擎，用来查询和操作渲染引擎 Rendering engine 用来显示请求的内容，负责解析HTML、CSS，并把解析的内容显示出来 Networking 网络，负责发送网络请求 JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的
2021-07-19 16:57:06
239
1
转载 23.CSS-过渡模块
文章目录过渡模块1.过渡三要素2.注意点3.其他属性4.连写格式手风琴效果 过渡模块 1.过渡三要素 必须要有属性发生变化； 必须告诉系统哪个属性需要执行过渡效果； 必须告诉系统过渡效果持续时长。 2.注意点 当多个属性需要同时执行过渡效果时用逗号隔开即可。 例如： /*告诉系统哪个属性需要过渡效果和效果持续的时间*/ transition-property: width,background-color; transition-duration: 5s,5s; 3.其他属性 transition-
2021-07-19 15:08:02
210
转载 22.CSS-a标签的伪类选择器
文章目录a标签的伪类选择器1.什么是a标签的伪类选择器？2.格式3.注意点 a标签的伪类选择器 通过观察发现a标签存在一定的状态。 默认状态，从未被访问过； 被访问过的状态； 鼠标长按的状态； 鼠标悬停在a标签上的状态。 1.什么是a标签的伪类选择器？ 作用：专门用来修改a标签不同状态的样式的。 2.格式 :link 修改从未被访问过的状态下的样式； :visited 修改被访问过状态下的样式； :active 修改鼠标长按的状态下的样式； :hover 修改鼠标悬停在a标签上的状态下的样式。 3.注意
2021-07-19 10:50:48
929
原创 21.CSS-网页的布局方式
文章目录网页的布局方式1.什么是网页的布局方式？2.网页的布局方式（1）标准流排版方式（2）浮动流排版方式（3）定位流排版方式 网页的布局方式 1.什么是网页的布局方式？ 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。 2.网页的布局方式 （1）标准流排版方式 浏览器默认的排版方式就是标准流排版方式，也称文档流、普通流。 在CSS中将元素分为三类，块级元素、行内元素和行内块级元素。 在标准流中有两种排版，一种是垂直排版，一种是水平排版。 垂直排版，如果是块级元素； 水平排版，如果元素是行内
2021-07-18 22:33:14
273
原创 20.CSS-定位（下）
文章目录3.固定定位什么是固定定位？注意点应用场景4.静态定位z-index属性 3.固定定位 什么是固定定位？ 固定定位和背景关联方式相类似。 背景定位可以让背景图片不随着滚动条的滚动而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动。 注意点 1.固定定位的元素是脱离标准流的，不会占用标准流的空间； 2.固定定位和绝对定位一样，不区分行内/块级/行内块级元素。 3.IE6不支持固定定位。 应用场景 导航条的穿透效果 广告 底部返回顶部按钮 4.静态定位 默认元素就是静态定位。 z-index属
2021-07-18 22:32:17
179
原创 19.CSS-定位（上）
文章目录定位定位流的分类1.相对定位什么是相对定位？注意点应用场景2.绝对定位什么是绝对定位？注意点3.固定定位4.静态定位 定位 定位流的分类 1.相对定位 什么是相对定位？ 相对定位就是相对于自己以前在标准流中的位置来移动 注意点 相对定位是不脱离标准流的，会继续在标准流中占据一份空间； 需要配合其他的属性一起使用，相对于自己以前在标准流中的位置来移动； position: relative; top: 20px; right: ; bottom: ; left: 20px; 在相对定位中同一个
2021-07-18 22:29:47
175
1
原创 3.vue-数据传递（绑定）
1.MVVM设计模式 在MVVM设计模式中由3个部分组成。 M：Model 数据模型（保存数据，处理数据业务逻辑） V：View 视图（展示数据，与用户交互） VM：View Model 数据模型和视图的桥梁 例如： M是中国人，V是美国人，VM教师翻译 MVVM设计模式最大的特点就是支持数据的双向传递 数据可以从M——>VM——>V 也可以从V——>VM——>M 2.Vue中MVVM的划分 Vue其实是基于MVVM设计模式的 被控制的区域：View Vue实例对象：View Mo
2021-07-18 11:59:15
268
原创 2.vue-基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-Vue基本模板</title> <!--1.下载导入Vue.js--> <script src="vue.js"></script> </head> <body> <div id="app">
2021-07-18 11:15:09
126
原创 1.vue-介绍
文章目录1.什么是vue2.框架和库的区别3.为什么要学习框架4.选择先学习Vue框架的原因5.使用Vue的优点5.1 Vue的核心概念一5.2 Vue的核心概念二 1.什么是vue Vue.js是一套构建用户界面的“框架”，不仅易于上手，还可以与其他第三方库整合（Swiper、IScroll…） 2.框架和库的区别 框架：是一套完整的解决方案；对项目的“侵入性”较大，项目如果需要更换框架，则需要重构整个项目。 库（插件）：提供某一个功能，对项目的“侵入性”较小，如果某个库无法完成某些需求，可以很容易切换到
2021-07-18 10:49:23
377
原创 简易网易注册页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网易注册界面</title> <style> /*1.清空默认边距*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,
2021-07-17 16:55:50
533
原创 17.CSS-浮动
文章目录浮动1.浮动流排版方式2.浮动元素的脱标（1）什么是浮动元素的脱标？（2）浮动元素脱标了之后会有什么影响？3.浮动元素的排序规则4.浮动元素的贴靠现象5.浮动元素的字围现象6.浮动元素的高度问题7.清除浮动的方式 浮动 1.浮动流排版方式 浮动流是一种半脱离标准流的排版方式； 浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐； 注意点： 浮动流中没有居中对齐，也就是没有center这个值； 在浮动流中是不可以使用margin：0 auto；的。 特点： 在浮动流中是不区分块
2021-07-16 17:16:04
223
原创 16.CSS-行高和字号
文章目录行高1.什么是行高3.注意点字号注意点 行高 1.什么是行高 在CSS中所有的行都有自己的行高， 3.注意点 行高和盒子的高不是同一个概念，行高是指这一行内容的高度，盒子的高是指这个标签的高。 规律： 1.文字在行高中默认是垂直居中的； 2.在企业开发中我们经常将盒子的高度和行高设置成一样，那么就可以保证一行文字在合资的高度中是垂直居中的，简而言之就是：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可。 该方法只适用于一行文字，遇到多行文字的情况时，只能使用padding。
2021-07-16 17:13:57
432
原创 CSS-overflow:hidden；
overflow:hidden;的作用 1.将超出标签范围的内容裁剪掉 2.清除浮动 给第一个盒子设置overflow: hidden;属性 .box1{ background-color: red; /*margin-bottom: 10px;*/ overflow: hidden; } 3.让里面的盒子设置margin-top之后外面的盒子不被顶下来 如果两个盒子嵌套，当里面的盒子设置了 margin-top: 20px; 外面的盒子也会被顶下来。 那么如
2021-07-16 17:13:14
394
原创 18.CSS-伪元素选择器
文章目录伪元素选择器1.什么是伪元素选择器？2.格式 伪元素选择器 1.什么是伪元素选择器？ 伪元素选择器的作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。 2.格式 标签名称::before{ 属性名称：值； } 含义：给指定标签的内容前面添加一个子元素。 标签名称::after{ 属性名称：值； } 含义：给指定标签的内容后面添加一个子元素。 例如： div::before{ display: block; content: "爱你";
2021-07-16 16:35:57
193
原创 15.CSS-盒子模型
文章目录CSS盒子模型盒子模型宽度和高度1.内容的宽度和高度2.元素的宽度和高度3.元素空间的宽度和高度盒子box-sizing属性1.取值2.注意点text-align:center和margin:0 auto;的区别 CSS盒子模型 在HTML中，所有的标签都可以设置宽度/高度、内边距、边框、外边距，HTML中所有的标签都是盒子。 宽度/高度（蓝色）：指定可以存放内容的区域。 内边距（绿色） 边框（黄色） 外边距（橘色） 盒子模型宽度和高度 1.内容的宽度和高度 内容的宽度和高度就是通过标签的widt
2021-07-15 11:26:52
295
原创 14.CSS-边框属性、内边距属性和外边距属性
文章目录边框属性1.什么是边框？2.边框属性的格式2.1连写（同时设置四条边的边框）2.2连写（分别设置四条边的边框）2.1和2.2注意点2.3连写（分别设置四条边的边框）2.3注意点2.4非连写（方向+要素） 边框属性 1.什么是边框？ 边框就是环绕在标签宽度和高度周围的线条 2.边框属性的格式 border的属性： border-width border-style border-color border-style的取值 none 定义无边框。 dotted 定义点状边框。在大多数浏览器中呈现为实线。
2021-07-14 17:16:49
1726
原创 13.CSS-精灵图
文章目录CSS精灵图1.什么是CSS精灵图？2.CSS精灵图的作用3.如何使用CSS精灵图的作用 CSS精灵图 1.什么是CSS精灵图？ CSS精灵图是一种图像合成技术。 2.CSS精灵图的作用 可以减少请求的次数，降低服务器处理压力。 3.如何使用CSS精灵图的作用 CSS的精灵图需要配合背景图片和背景定位来使用。 配合画图工具来测量像素。 例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
2021-07-14 15:49:01
176
原创 12.CSS-背景设置
文章目录背景颜色背景图片背景平铺属性背景定位关联方式背景属性缩写背景图片和插入图片的区别 背景颜色 如何设置标签的背景颜色？ 在CSS中有一个background-color:属性，就是专门用来设置标签的背景颜色的。 取值： 具体单词 rgb rgba 十六进制 背景图片 如何设置背景图片？ 在CSS中有一个background-image: url("");属性，就是专门用于设置背景图片的。 注意点： 1.图片地址必须放在url("")中，图片地址可以是本地的地址，也可以是网络的地址； 2.如果图片的大小
2021-07-14 15:01:08
263
转载 简易百度首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>32-百度首页</title> <style> body{ font-size: 14px; color: #666666; font-family: "宋体"; } di
2021-07-14 10:13:16
247
原创 11.CSS-元素显示模式
文章目录CSS元素显示模式1.什么是块级元素和行内元素？2.块级元素和行内元素的区别？3.元素显示模式转换 在HTML中HTML将所有的标签分为两类，分别是容器级和文本级。 在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素。 CSS元素显示模式 1.什么是块级元素和行内元素？ 块级元素会独占一行，行内元素不会独占一行 容器级的标签：div，h，ul，ol，dl，li，dt，dd…； 文本级的标签：span，p，b，u，i，s，strong，em，ins，del… 块级元素（所有的容器级标签+
2021-07-14 09:28:44
144
原创 15.HTML基础——div和span标签
文章目录div标签作用span标签作用div标签和span标签区别 div标签 作用 一般用于配合css完成网页的基本布局。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>29-div和span标签</title> <style> .header{ width: 980
2021-07-13 16:43:07
377
原创 10.CSS-三大特性
文章目录CSS三大特性继承性作用注意点应用场景层叠性作用注意点优先级作用优先级判断的三种方式!important权重问题 CSS三大特性 继承性 作用 给父元素设置一些属性，子元素也可以使用，我们称之为继承性。 注意点 1.并不是所有的属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承； 2.在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承； 3.CSS继承性中的特殊性： a标签的文字颜色和下划线是不能继承的 h标签的文字大小是不能继承的 应用场景 一般用于
2021-07-13 16:14:00
146
原创 9.CSS-属性选择器
文章目录属性选择器作用格式属性的取值是以什么开头的属性的取值是以什么结尾的属性的取值是否包含某个特定的值 属性选择器 作用 根据指定的属性名称找到对应的标签，然后设置属性。 格式 [attribute] 作用：根据指定的属性名称找到对应的标签，然后设置属性。 例如： p[id]{ color: red; } 含义：先找到所有的p标签，在p标签中找到有id属性的，然后设置属性。 [attribute=value] 作用：找到有指定属性，并且属性的取值等于value的
2021-07-13 11:24:46
175
原创 8.CSS-序选择器
文章目录序选择器同级别的第几个:first-child:last-childnth-child(n):nth-last-child(n):only-child同类型的第几个:first-of-type:last-of-typenth-of-type(n):nth-last-of-type(n):only-of-type 序选择器 CSS3中新增的选择器中最具代表性的就是序选择器。 同级别的第几个 :first-child 选中同级别中的第一个标签。 注意点：不区分类型 :last-child 选中同级别中的
2021-07-13 10:37:12
375
原创 7.CSS-交集选择器、并集选择器、兄弟选择器
文章目录*交集选择器作用格式注意点并集选择器作用格式注意点相邻兄弟选择器作用格式注意点通用兄弟选择器作用格式注意点 *交集选择器 作用 给所有选择器选中的标签中，相交的那部分设置属性。 格式 选择器1 选择器2{ 属性：值； } 注意点 1.选择器和选择器之间没有任何连接符号； 2.选择器可以使用标签名称/id名称/class名称； 3.仅了解。 并集选择器 作用 给所有选择器选中的标签设置属性。 格式 选择器1，选择器2{ 属性：值； } 注意点 1.并集选择器必须使用，来连接； 2.选择器可以使用
2021-07-13 09:25:32
2077
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人