- 博客(65)
- 收藏
- 关注
RSS订阅原创 node服务器
//1.引入expressconst { request, response } = require('express');const express = require('express')//2.创建应用对象const app = express();//3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装app.get('/server',(request,response)=>{ //设置响应头 //设置允许跨域
2021-11-17 10:38:32
511
原创 算术运算符
算术运算符介绍算术运算符介绍1、运算符也叫操作符2、通过运算符可以对一个或多个值进行运算，并获取运算结果例如:typeof就是运算符，可以获取一个值的类型它会将该值的类型以字符串的形式返回number、string、boolean、undefined、object算术运算符1、当对非Number类型的值进行运算时，会将这些值转换为Number，然后再运算2、任何值和NaN做运算都得NaN +a）+ 可以对两个值进行加法运算，并将结果返回b）如果对两个字符串进行
2021-09-15 14:22:49
148
原创 转换为Boolean
转换为Boolean介绍介绍使用 Boolean() 函数将其他的数据类型转换为Boolean数字 ------> 布尔除了0和NaN，其余都是true字符串 ------> 布尔除了空串，其余都是truenull和undefined ------> 布尔都会转换为false 对象 ------> 布尔转换为true...
2021-09-15 13:29:24
213
原创 其他进制的数字
其他进制的数字介绍介绍在JS中，如果需要表示16进制的数字，则需要以0x开头如果需要表示 8 进制的数字，则需要以 0 开头如果需要表示 2 进制的数字，则需要以0b开头，但不是所有的浏览器都支持示例：十六进制a = 0x10;a = 0xff;a = 0xcafe;八进制a = 070;二进制a = 0b10;...
2021-09-11 15:11:22
109
原创 强制类型转换
强制类型转换介绍将其他数据类型转换为String介绍1、指将一个数据类型强制转换为其他的数据类型2、类型转换主要指，将其他的数据类型，转换为String、Number、Boolean将其他数据类型转换为String方式一： 1、调用被转换数据类型的 toString()方法 2、该方法不会影响到原变量，它会将转换的结果返回 3、但是注意：null和undefined这两个值没有 toString()方法， 如果调用它们的方法，则会报错示例：var a = 12
2021-09-07 18:43:42
813
原创 Null（空值）和 Undefined（未定义）
Null 和 UndefinedNull（空值）Undefined（未定义）Null（空值）1、Null（空值）类型的值只有一个，就是null2、null这个值专门用来表示一个为空的对象3、使用typeof检查一个null值时，会返回objectUndefined（未定义）1、Undefined（未定义）类型的值只有一个，就是 undefined2、当声明一个变量，但是并不给变量赋值时，它的值就是 undefined3、使用 typeof 检查一个 undefined 时，也会返回 u
2021-08-31 17:23:44
1432
原创 Boolean（布尔值）
Boolean（布尔值）介绍介绍布尔值只有两个，主要用来做逻辑判断 true 表示真 false 表示假使用typeof检查一个布尔值时，会返回boolean示例：var bool = falseconsole.log(typeof bool) ---返回boolean
2021-08-31 17:00:25
455
原创 Number
Number介绍介绍1、在JS中所有的数值都是Number类型，包括整数和浮点数（小数）2、可以使用一个运算符typeof来检查一个变量的类型语法：typeof 变量检查字符串时，会返回string检查数值时，会返回number示例：var a = 123;var b = "123";console.log(typeof a);console.log(typeof b);3、JS中可以表示的数字的最大值与最小值最大值：Number.MAX_VALUE
2021-08-31 16:51:26
117
原创 数据类型—字符串介绍
字符串介绍数据类型-引介String字符串数据类型-引介1、数据类型指的就是字面量的类型2、在JS中一共有六种数据类型 String 字符串 Number 数值 Boolean 布尔值 Null 空值 Undefined 未定义 Object 对象`其中String、Number、Boolean、Null、Undefined属于基本数据类型 而Object属于引用数据类型`String字符串1、在JS中字符串需要使用引号引起
2021-08-30 19:59:14
643
原创 标识符介绍
标识符介绍标识符介绍注：标识符介绍1、标识符中可以含有字母、数字 、_ 、$2、标识符不能以数字开头3、标识符不能是ES中的关键字或保留字4、标识符一般都采用驼峰命名法（非强制要求） 即：首字母小写，每个单词的开头字母大写，其余字母小写 示例：helloWorld xxxYyyZzz<br>注：JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符...
2021-08-28 22:04:39
1162
原创 flex（弹性盒、伸缩盒）
flex（弹性盒、伸缩盒）介绍介绍是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
2021-08-26 22:02:01
94
原创 less用法
less简介less中的变量变量的语法简介less是一门CSS的预处理语言less是一个CSS的增强版，通过less可以编写更少的代码实现更强大的样式less中的变量在变量中可以存储一个任意的值并且我们可以在需要时，任意的修改变量中的值变量的语法@变量名@a:100px;@b:#bfa;@c:box6;`使用变量时，如果是直接使用则以 @变量名 的形式使用即可`.box1{ width: @a; color: @b}`作为类名，或者一部分值使用时必须以 @
2021-08-19 19:01:49
63
原创 scale（缩放）
scale（缩放）介绍transform-origin（变形的原点）介绍对元素进行缩放的函数scaleX() `水平方向缩放`scaleY() `垂直方向缩放`scale() `双方向的缩放`示例：transform: scaleX(2); `水平方向放大两倍`transform: scaleY(2); `垂直方向放大两倍`transform: scale(.2); `双方向缩小到原来的0.2倍`transform-origin（变形的原点）tra
2021-08-08 23:21:14
903
原创 rotate（旋转）
rotate（旋转）介绍注：介绍通过旋转可以使元素沿着 x、y 或 z 旋转指定的角度rotateX()rotateY()rotateZ()transform: rotateZ(45deg);transform: rotateZ(.5turn);transform: rotateX(45deg);transform: rotateX(.5turn);transform: rotateY(45deg);transform: rotateY(.5turn);transform
2021-08-04 20:39:00
2141
原创 transform（变形）
transform（变形）介绍translate（平移）注：介绍1、变形就是指通过CSS来改变元素的形状或位置2、变形不会影响到页面的布局3、变形不会导致脱离文档流4、transform用来设置元素的变形效果translate（平移）平移： translateX() 沿x轴方向平移 translateY() 沿y轴方向平移 translateZ() 沿z轴方向平移示例： translateX(100px) 沿x轴方向平移 translateY
2021-07-29 22:43:27
325
原创 animation（动画）
动画介绍@keyframes identifier（设置关键帧）设置动画animation-name（动画名字）animation-duration（动画执行时间）animation-delay（动画的延时）animation-timing-function（动画的时序函数）animation-iteration-count（动画的执行次数）animation-direction（动画的运行方向）animation-play-state（设置动画的执行状态）animation-fill-mode（动画的填充
2021-07-24 23:15:24
966
原创 form（表单）
form（表单）介绍form的属性action（表单要提交的服务器的地址）添加表单项1、文本框（type=“text”）注：2、密码框（type=“password”）注：3、提交按钮（type=“submit”）注：4、单选按钮（type=“radio”）注：5、多选框（type=“checkbox”）注：6、下拉列表（select）注：介绍1、在现实生活中表单用于提交数据2、在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器form的属性action（表单要提交的服务器的
2021-07-10 15:30:14
177
原创 table（表格）
table（表格）介绍合并单元格colspan（横向合并单元格）rowspan（纵向合并单元格）长表格表格的样式border-spacing（指定边框之间的距离）border-collapse（设置边框的合并）注介绍1、table（表格）可以表示一些格式化数据，例如课程表、人名单、成绩单……2、在table中使用tr表示表格中的一行，有几个tr就有几行3、tr中使用td表示一个单元格，有几个td就表示有几个单元格合并单元格colspan（横向合并单元格）示例：<table&
2021-07-09 04:09:29
10146
1
原创 radial-gradient（径向渐变）
radial-gradient（径向渐变）介绍总结语法介绍1、radial-gradient( )径向渐变（放射性效果）2、默认情况下，径向渐变的形状是根据元素的形状来计算的正方形- ->圆形长方形- ->椭圆形3、我们也可以手动指定径向渐变的大小可选值： circle 圆形 ellipse 椭圆示例：background-image:radial-gradient(100px 100px , red , yellow);background-ima
2021-07-08 17:02:07
4294
原创 linear-gradient(线性渐变)
线性渐变介绍linear-gradient（线性渐变）介绍a）通过渐变可以设置一些复杂的颜色，可以实现从一个颜色向其他颜色过度的效果b）渐变是图片！需要通过background-image来设置linear-gradient（线性渐变）linear-gradient（）注：1、linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域2、线性渐变的开头，我们可以指定一个渐变的方向示例：background-image:linear-gr
2021-07-08 01:53:16
1131
原创 解决图片闪烁问题（雪碧图）
解决图片闪烁问题（雪碧图）介绍雪碧图的使用步骤雪碧图的特点介绍将多个小图片统一保存到一个大图片中（雪碧图），然后通过调整background-position来显示相应的图片，这样图片就会同时加载到网页中，就可以有效避免出现闪烁的问题这个技术在网页中应用十分广泛，被称为CSS-Sprite（雪碧图）雪碧图的使用步骤1、先确定要使用的图标2、测量图标的大小3、根据测量结果创建一个元素4、将雪碧图设置为元素的背景图片5、设置一个偏移量以显示正确的图片雪碧图的特点一次
2021-07-07 18:22:42
317
原创 background（背景）
background（背景）background-color（背景颜色）background-image（背景图片）background-repeat（设置背景的重复方式）background-position（设置背景图片的位置）background-color（背景颜色）background-color设置背景颜色示例： background-color:#bfa;background-image（背景图片）background-image设置背景图片示例： backgrou
2021-07-07 00:21:05
295
原创 其他文本样式
其他文本样式text-decoration（设置文本修饰）white-space（设置网页如何处理空白）text-overflowtext-decoration（设置文本修饰）可选值： none 无 underline 下划线 line-through 删除线 overline 上划线white-space（设置网页如何处理空白）可选值： normal 正常 nowrap 不换行 pre
2021-07-06 18:40:09
48
原创 text-align(文本的水平对齐)和vertical-align(设置元素垂直对齐的方式)
文本的水平和垂直对齐text-align（文本的水平对齐）vertical-align（设置元素垂直对齐的方式）vertical-align设置图片对齐text-align（文本的水平对齐）可选值： left 左侧对齐 right 右侧对齐 center 居中对齐 justify 两端对齐vertical-align（设置元素垂直对齐的方式）可选值： baseline 默认值，基线对齐
2021-07-06 16:59:43
1279
原创 line-height（行高）
line-height（行高）line-height（行高）介绍字体框line-height（行高）介绍1、行高指的是文字占有的实际高度2、通过line-height来设置行高3、行高可以直接指定一个大小（px em）4、也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数5、行高会在字体框的上下平均分配6、可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中7、行高经常还用来设置文字的行间距
2021-07-06 00:34:26
4048
原创 iconfont（图标字体）
iconfont（图标字体）iconfont（图标字体）fontawesome 使用步骤通过伪元素来设置图标字体通过实体来显示图标字体iconfont 使用步骤a）使用Unicode引用方法b）使用font-class引用方法c）通过伪元素使用iconfont（图标字体）说明介绍：在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体引入这样我们就可以通过使用字
2021-07-05 20:44:14
1744
原创 font（字体）
font&background（字体与背景）字体相关样式font-face字体相关样式1、color 前景色，一般用来设置字体颜色2、font-size 字体的大小font-size相关单位： em 相当于当前元素的一个font-size rem 相当于根元素的一个font-size3、font-family 字体族（字体的格式）可选值： serif 衬线字体 （常用） sans-serif 非衬线字体 （
2021-07-05 16:17:33
2324
原创 元素的层级（z-index）
元素的层级（z-index）元素的层级（z-index）元素的层级（z-index）1、对于开启了定位的元素，可以通过z-index属性来指定元素的层级2、z-index需要一个整数作为参数，值越大元素的层级越高3、元素的层级越高越优先显示4、若元素的层级一样，则优先显示靠下的元素 `（后来者居上）`5、祖先元素的层级再高，也不会盖住后代元素 `（虎毒不食子）`...
2021-07-04 22:44:47
343
原创 绝对定位元素的布局
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-07-04 21:23:16
95
原创 position（定位）
position（定位）position（定位）介绍relative（相对定位）相对定位的特点偏移量（offset）position（定位）介绍通过position（定位）可以将元素摆放到页面的任意位置可选值： static 默认值，元素是静止的，没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky（少用） 开启元素的粘滞定位relative
2021-07-04 01:08:48
471
原创 clearfix(清除浮动)，同时解决高度塌陷和外边距重叠问题
clearfix(清除浮动），同时解决高度塌陷和外边距重叠问题clearfix介绍clearfix最终代码示例：clearfix介绍利用clearfix（清除浮动）可以解决垂直外边距重叠问题（也可解决高度塌陷问题）clearfix最终代码示例：.clearfix::before,.clearfix::after{ content''; display:block; clear:both;}注：.clearfix::before{ content
2021-07-03 19:48:32
154
原创 clear清楚浮动元素对当前元素所产生的影响
clearclear介绍clear作用可选值原理clear介绍若我们不希望某个元素因为其他元素浮动的影响而改变位置可以通过clear属性来清楚浮动元素对当前元素所产生的影响 clear作用清楚浮动元素对当前元素所产生的影响可选值 left 清除左侧浮动元素对当前元素的影响 right 清除右侧浮动元素对当前元素的影响 both 清除`两侧中最大影响的`那侧原理设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素影响
2021-07-03 14:05:11
158
原创 浮动带来的高度塌陷与BFC
高度塌陷与BFC（块级格式化环境）高度塌陷问题BFC（Block Formatting Context）块级格式化环境高度塌陷问题1、在浮动布局中，父元素的高度默认是被子元素撑开的。2、当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离,将会无法撑起父元素的高度，导致父元素的高度丢失，3、父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱因此高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理BFC（Block Formatting Context）
2021-07-03 13:49:31
55
原创 浮动的特点
浮动的特点浮动的特点元素浮动后脱离文档流的特点浮动的特点1、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，因此我们可以利用浮动来设置文字环绕图片的效果2、元素设置浮动后，将会脱离文档流。从文档流脱离后，元素的一些特点也会发生变化因此这里引出元素脱离文档流的特点：元素浮动后脱离文档流的特点对于块元素1、块元素不再独占一行2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开对于行内元素1、脱离文档流以后，特点和块元素一样总结：脱离文档流以后，不需要再区分块元素和
2021-07-02 23:25:49
367
原创 浮动（float）
浮动（float）浮动介绍（float）注：浮动的特点总结浮动介绍（float）a）通过浮动可以使一个元素向其父元素的左侧或右侧移动b）使用float属性来设置元素的浮动c）只在父元素的范围内浮动，不会飘浮出它的父元素可选值： none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动注：1、元素设置浮动后，水平布局的等式便不需要强制成立2、元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素下边的还在文
2021-07-02 23:06:20
384
原创 轮廓阴影和圆角
轮廓阴影和圆角轮廓（outline）阴影（box-shadow）圆角（border-radius）设置为圆形轮廓（outline）outline 用来设置元素的轮廓线，用法和border一样outline与border的不同点：轮廓不会影响到可见框的大小，也就不会影响到布局。阴影（box-shadow）a）box-shadow用来设置元素的阴影效果。b）阴影不会影响到页面布局示例：box-shadow:10px 10px 50px rgba(0,0,0,.3);第一个值：水平偏移
2021-07-02 19:10:37
159
原创 div盒子的大小
div盒子的大小前言box-sizing前言默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定box-sizingbox-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）可选值： content-box `默认值，宽度和高度用来设置内容区的大小` border-box `宽度和高度用来设置整个盒子可见框的大小` `widt和height指的是内容区、内边距和边框的总大小`...
2021-07-02 18:20:20
896
原创 浏览器的默认样式
浏览器的默认样式默认样式方法通配选择器方法引入reset.css文件引入normalize.css文件默认样式a）通常情况，浏览器都会为元素设置一些默认样式b）默认样式的存在会影响到页面的布局c）通常情况下编写网页时必须要去除浏览器的默认样式（PC端）方法通配选择器方法*{ margin:0; padding:0;}引入reset.css文件引入normalize.css文件...
2021-07-02 13:07:06
68
原创 行内元素的盒模型
行内元素的盒模型行内元素的盒模型displayvisibility行内元素的盒模型a）行内元素不支持设置宽度和高度b）行内元素可以设置padding，但是垂直方向padding不会影响页面的布局c）行内元素可以设置border，但是垂直方向的border不会影响页面的布局d）行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局displaydisplay用来设置元素显示的类型可选值： inline 将元素设置为行内元素 block 将
2021-07-02 00:48:22
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人