- 博客(30)
- 资源 (2)
- 收藏
- 关注
原创 验证码生成及验证码校验
<!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"> <title>Do.
2021-10-23 13:30:31
253
原创 表单案例(关于定时器和表单跳转)
第一个:<!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"> <title
2021-10-16 22:01:49
134
原创 函数function
函数:function test(参数){函数的执行语句;}高内聚,低耦合->模块的单一责任制解耦合例如:test();去调用才会实现function test(){console.log('wuuwdnh');}test();函数命名命名规则:和变量规则一样,小驼峰命名法,第一个单词字母小写,其余的单词第一个字母大写。var test=function test1(){//有没有test1都可以...
2021-09-12 17:39:31
639
原创 隐式类型转换
隐式类型转换:var a='123';a++;console.log(a);结果为124var a='5' *2;console.log(a);结果为10,如果有*、%、/、- 要把string转换为数字类型乘、取余、减、除var q='1'>2console.log(q);结果为false 要转换为number类型var q='w'>'w...
2021-09-12 17:37:49
128
原创 数组与显示类型转换
数组:arrayvar arr=[1,2,3,4,5,6,7];console.log(arr[5]); 打印第五个arr[3]=null;给数组赋值console.log(arr);console.log(arr.length);数组长度for(var=0;i<arr.length;i++){数组循环// console.log(arr[i]);}object对象:var person={...
2021-09-12 17:35:35
475
原创 逻辑运算:与或非 循环
逻辑运算:&& 或 || 与 !非什么是假:undefined,null ,NaN,false,0,“”(空字符串),其余都是真var a=1 && 2;console.log(a); 输出结果为2或:遇到真就往后走,遇到假或走到最后就返回当前的值1 && 1 返回1 真0 && 1 返回0 假1 && 0 返回0 假0 &&...
2021-09-12 17:33:12
344
原创 变量与数据类型
变量:是一个容器去存储数据,后续使用var->variblevar a; 变量申明 a=3; 变量赋值var a=3; 变量声明并赋值两部分:声明+赋值var x-1,y=3; 结束是分号,中间逗号隔开。命名规范;必须由字母和下划线开头、$也可以开头,必须由英文字母、数字、下划线组成,不能出现空格或者制表符。不能使用javascript关键字和保留字命名,大小写敏感。语义化、结构化。一般用驼峰。小驼峰运算>赋值JS的值:...
2021-09-12 17:29:02
193
原创 js的历史和介绍
5大浏览器 内核IE tridentchrome webkit bliksafari webkitfirefox geckoopera presto浏览器历史:和js的诞生蒂姆 博纳斯 李 超文本分享咨询的人world wide web 移植到c libwww/nexus允许别人浏览他人自己编写的网站1993年美国伊利诺大学NCSA组织(马克 安德森)MOSIAC浏览器 显示图片图形化浏览...
2021-09-12 17:23:55
73
原创 弹性盒模型与三栏布局
弹性盒模型:多用于移动端布局,弹性盒中float、clear不生效父元素上的属性:开启弹性盒模型 display:flex; 子元素默认水平排列设置弹性盒方向 flex-direction: ;row:默认值 子元素水平排列column:子元素垂直排列row-reverse:子元素水平方向倒序排列colum-reverse:子元素垂直方向上倒序排列设置子元素在主轴的对齐方式 :默认,x轴是主轴,y是侧轴当flex-direction:column; y轴为主轴,x..
2021-09-12 17:21:35
489
原创 过渡的介绍
过渡:作用使元素从一个样式变到另外一个样式,过度必须有触发事件:hover属性:(1)过渡的css属性 必选transition-prooerty:属性1,属性2,……;以下属性可以过渡:取值为颜色,取值为数值,阴影,背景渐变,转换transform简写all过渡的持续时间 必选transition-duration:; 单位s ms 1s=1000ms过渡的速度变化类型 可选transition-timing-function:;ease 默认值 先加...
2021-09-12 17:18:56
173
原创 子元素在父元素里面水平居中的方法
子元素在父元素里面水平居中的方法:第一个用绝对定位和转换<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.box{width: 300px;height: 300px;background-color: red;position: relative;}.box1{width
2021-09-12 17:16:48
80
原创 转换,旋转,倾斜,缩放
转换: 作用使元素在位置或者形状发生一定的改变属性:transform:;属性值:位移 单位pxtransform:translate(x,y);当只取一个值,表示水平方向当取两个值,表示水平和垂直方向transform:translateX();transform:translateY();取正值,右下走 取负值,左下走代码:<!DOCTYPE html><html><head><meta charset="u...
2021-09-12 17:12:31
106
原创 浏览器兼容问题
解决浏览器兼容性问题:解决浏览器c33新特性的支持(不兼容就加前缀)浏览器 内核 厂前前缀谷歌 blink内核 -webkit-火狐 gecko内核 -moz-苹果 wekit内核 -webkit-IE trident -ms-欧朋 blik内核 -o-例如:-webkit-border-radiu: 39px;解决IE...
2021-09-05 08:37:45
76
原创 盒阴影和背景渐变
盒阴影:box-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 阴影尺寸 颜色 必选(正负值) 必选(正负) 可选(正值) 可选(正负) 可选 位置(可选) outset(外阴影)|inset(内阴影)例如:<!DOCTYPE html><html><head><meta charset="utf-8"><title>...
2021-09-05 08:36:47
265
原创 子元素在父元素水平垂直居中
子元素在父元素中水平垂直居中:margin去实现:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.items{width: 300px;height: 300px;background-color: red;overflow: hidden;}.title{width:
2021-09-05 08:35:22
83
原创 display
display:取值block 块级元素 inline 行内元素 Inline-block行内块,即在同一行显示,可以设置宽高(input,ing,button,video就是行内块元素) 行内块会识别代码之间的空白 none 不显示会隐藏自己,隐藏后原位置不保留。 fixed 弹性盒模型 table转换为表格 table-cell 单元格 横着排列display:none; visibility:hidden; opacity:0; overflow:hidden;的区别d...
2021-09-05 08:34:17
73
原创 元素定位和堆叠顺序
元素定位:position属性值:(1)static 默认值 没有定位 静态定位relative 相对定位:相对于自己原位置定位,定位后原位置保留配合left,right,top,bottom移动。 absolute 绝对定位:相当于已经定位(relative,absolute,fixed推荐relative定位)的父元素定位,如果父元素没有定位,逐级往上找,最后相对于body定位。定位后原位置不保留,应用于:形成独立的一层。 fixed 固定定位(相对于浏览器窗口定位,定位后原...
2021-09-05 08:33:05
539
原创 伪类选择器
伪类选择器:这四个是有顺序的:link 点击之前只适用于a:visited点击之后只适用于a:hover鼠标悬停 适用于所有元素:active鼠标放下 适用于所有元素<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.box{width: 300px;height: 300p...
2021-09-05 08:31:56
118
原创 怪异盒模型和关于内容居中的问题
组成部分:content+padding+border+margin实际宽度:width+margin (width包含了padding和border)盒模型之间相互转换:box-sizing:content-box; 默认值标准盒模型box-sizing:border-box; 怪异盒模型居中元素:元素内容水平居中:text-align:center; 块级元素水平居中:margin:0 auto; 一行文字垂直居中:行高等于高 l...
2021-09-05 08:30:51
170
原创 标准盒模型
标准盒模型:组成部分:content+padding+border+margin内容 内边距 边框 外边距玻璃杯 泡沫 快递盒 快递盒之间距离content 内容区域width;;元素的宽度height: ;元素的高度min-width:;最小宽度 max-width: ; min-height:;max=height:;border边框border-style:solid(实线)|das...
2021-09-05 08:27:56
72
原创 关系选择器
关系选择器:后代选择器 空格选择器1 选择器2{}选中所有的后代(包含儿子)子代选择器 >选择器1>选择器2{}选中所有直接子代(只有儿子)相邻兄弟选择器 +选择器1+选择器2{}通用兄弟选择器 ~选择器1~选择器2{}例子:<!DOCTYPE html><html><head><meta charset="utf-8"><title><...
2021-09-05 08:26:34
75
原创 列表与表格属性与容器溢出
列表的属性:设置项目符号:list-style-type:none; 设置项目符号为图片:list-style-image:url(“”); 设置项目符号的位置:list-style-position:outstyle|inside; 简写:list-style:none;表格属性:设置元素宽高:wodth:; height:; 元素内容对齐方式 text-align: left|center|right; 表格内容的垂直对齐方式 vertical-align;middle|top.
2021-09-05 08:24:14
44
原创 文本属性与颜色取值,背景图片
font-size:设置文本的大小h1{font-size:40px;}font-weight 设置文本的粗细font-style设置文本样式 normal:标准样式默认值 italic:斜体样式font-family 直接包含样式,属性之间逗号分开颜色取值:(1)关键字:red blue十六进制;包含0-9 a-f不区分大小写例如#000000(黑色) #ffffff(白色)rgb(255,255,255)白色 rgb(255,0,0)红色 rgba()a表示透...
2021-08-21 10:52:09
146
原创 @import和link的区别和选择器
css的作用:实现了内容与表现的分离,提高了代码的可重用性与可维护性。@import和link的区别:加载顺序不同,@import先加载HTML文件,在加载css文件,link是同时加载HTML和css文件 加载内容不同,@import只能引入css文件,link可以引入其他内容<link rel=”icon”href=”图标的路径”/> 兼容性不同:@import有兼容性(只支持IE5以上的),link没有兼容性 @import会增加页面的http请求 Js操作DOM时..
2021-08-21 10:35:29
160
原创 语义化标签与HTML5新增的布局标签
语义化标签:有利于搜索引擎优化,有利于屏幕阅读者读取,有利于开发者的维护和开发空格:$nbsp; 小于号:<大于号:><div>没有语义的一个容器块级元素</div><span>没有语义的一个容器行内元素</span>HTML5新增的布局标签:双标记块级元素header头部 nav 导航 footer页脚 aside 侧边栏 article 文章、帖子、博客、独立的一块section章节...
2021-08-21 08:35:31
291
原创 列表与表格,表单
有序列表ol的属性:type设置项目符号,默认值为1可取值a A 罗马数字start:设置从第几个开始取值为数字reversed倒序 reversed=”reversed”表格的标签:<table></table>表格<tr></tr>行 <td></td> 列、单元格 <th></th>特殊的单元格,默认水平居中且加粗,和td一个位置。 <caption><...
2021-08-21 08:22:24
93
原创 图片与超链接
图片的属性:src:路径,alt:图片不能正常显示给的提示,title:鼠标悬停给予提示,除了br其他标签都有的属性。width:宽度,height:高度。一般设置一个属性宽或高,等比例缩放。块级元素:独占一行,行内元素在同一行显示。块级元素:默认宽度为100%,行内元素默认宽度由内容提升。超链接:用图片去打开一个网页,新窗口。<a href=”http://www.baidu.com”target=”_blank”><img src=”images/img4...
2021-08-21 08:17:42
159
原创 定位的例子
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 310px; height: 190px; border: 1px sol...
2021-08-03 18:01:57
110
原创 Css外观属性
color:文本颜色 color属性用于定义文本的颜色,其取值方式有如下3种:1.预定义的颜色值,如red,green,blue等。2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常见的定义颜色的方式。3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。...
2021-07-18 18:35:50
865
原创 伪类选择器
链接伪类选择器:/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover { color: #FF00FF;}/* 已选择的链接 */a:active { color: #0000FF;}代码即实现:<!DOCTYPE html><html><head><style&g
2021-07-17 16:50:41
148
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人