- 博客(30)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 验证码生成及验证码校验
<!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关注的人