自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(68)
  • 收藏
  • 关注

原创 微信小程序开发

小程序开发小程序第一步是先申请一个小程序账号(一个邮箱只能申请一个)。下载微信开发者工具,扫码登录。配置全局配置:在小程序根目录下的app.json文件对微信小程序进行全局配置,内容为一个JSON文件。配置项:Pages用于指定小程序由哪些页面组成,文件不需要写文件后缀小程序中新增/减少页面,都需要对pages数组进行修改"pages": [ "pages/index/index", "pages/logs/logs" ],Window用于设置小程序的状态栏、导航条、

2020-11-25 19:23:28 34

原创 vue

vue 特色mvvm(前端)m:model(数据)v:view(视图)vm:viewmodel 数据和视图的桥梁双向数据绑定m---->mv----->vm<----mv<-----vangular mvc(后端)m:model(数据)v:view(视图)c:controller(控制器)v—>c—>mm—>v优点:轻量级高效率上手快简单易学文档全面简洁vue指令1. v-model 双向数据绑定 ref(https:/

2020-10-22 16:42:25 18

原创 Bootstarp--排版

类作用.h1~h6任何标签用这个类就有了标题标签的样式<small>&.smll副标题标签和类.lead突出内容.text-left文本左对齐.text-right文本右对齐.text-center文本居中对齐.text-justify文本左右对齐.text-nowrap文本一行显示.text-lowercase大写变小写.text-uppercase小写变大写.text-capitali...

2020-10-18 19:30:32 12

原创 bs --- 栅格系统

什么是栅格系统栅格系统又名网格系统,是有容器+行+列组成容器最多容纳12列,多一列会在下一行显示,少一列,会把该列的位置空着名字类名作用容器.container响应式的布局容器

2020-10-18 19:20:03 45

原创 完整的轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all {

2020-10-15 10:41:55 29

原创 轮播图 --- 无缝连接的轮播图

<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } img

2020-10-11 19:59:08 61 1

原创 轮播图 --- 焦点图

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body, ul, ol, li, img { margin: 0; padding: 0; list-style: none; }

2020-10-11 19:42:25 17

原创 轮播图案例 --- 简单的轮播图

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: top }

2020-10-11 19:27:22 16

原创 Bootstarp入门

bootstarp简介:Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。bootstarp网址:中文网址:link.外文网址:link.菜鸟网络:link.bootstarp优点:移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持:所有的主流浏览器都支持 Bootstrap。容易上手:只要您具备 HTM

2020-10-06 10:23:43 44

原创 移动端两种布局方式

移动端布局方式less+rem+@mediarem+@media+less是我们移动端布局的第一种方案。移动端页面设计稿尺寸:– 安卓手机尺寸:320px 360px 375px 384px 400px 414px 500px 720px– 苹果手机尺寸:640px 750px通过less+rem+@media 技术完成页面在各个手机尺寸上的显示手机页面的准备工作:–UI设计师会先给移动端页面设计一个尺寸 如:苏宁的尺寸是 750px–前端开发人员再人为的把设计稿分为若干份 如:苏宁分为

2020-10-06 07:56:13 53 1

原创 rem布局

rem布局单位介绍px、em、rem区别介绍px像素(Pixel)是绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点IE无法调整那些使用px作为单位的字体大小;国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。EM特点em的值并不是固定的;em会继承父级元素的字体大小。注意:任意浏览器的默认字体高都是16px。我

2020-10-05 15:25:30 31

原创 less功能

less 变量css中的颜色和字号使用less 变量来存储less 变量的命名 @color:red;变量命名的规则:1)必须@符号开头2)名字不能是数字3)名字不能包含特殊字符 @a#! @~col4) 区分大小写@color:red; @n:100px; @font:font-szie:100px;less 嵌套css写法:#header { color: black;}#header .navigation { font-size: 12px;}#hea

2020-10-05 14:49:18 21

原创 流失布局 / 弹性盒子布局

流失布局先创建项目文件,在index.html 文件里面添加视口标签分析观察项目结构移动端项目一定要在不同尺寸的设备上面多跑跑,看看页面布局会不会发生变化。百分比布局,不是每一个元素的尺寸必须必须写成百分百。但是百分比布局,宽写百分比,高正常写。背景精灵图写法:先把精灵图放到ps中打开通过ctrl+alt+i 打开图像大小 约束比例选对勾把原图改小50% 假如原图大小是400400 改成200200在通过ps矩形选框工具量一下图形在 x y轴的距离 写到css里面在

2020-10-05 08:48:17 34

原创 H5 --- 媒体查询

媒体查询:媒体查询是css3新的语法:@media only screen and (min-width: ) { 属性:属性值; }@media only screen and (min-width: 100px) and (max-width: 640px) { 属性:属性值; }screen 用于电脑屏幕,平板电脑,智能手机等。only 唯一(忽略)and 并且(不常用)min-width 屏幕最小宽度值max-width 屏幕最大宽度值媒体查询的作用:

2020-10-05 08:11:15 25

原创 移动页面布局

浏览器分为2种:一种是pc端浏览器(谷歌,火狐,IE,欧朋,其他)一种是m端浏览器移动端浏览器只需要做 -webkit-兼容就行.pc端页面需要兼容各个浏览器,移动端页面需要兼容各个手机尺寸什么是视口viewport : 视口,视口就是浏览器显示内容的区域。视口的分类:PC 端:视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。移动端分为三个视口:布局视口、视觉视口和理想视口。(理想视口是我们布局常用的视口)理想视口的设置<meta name="viewp

2020-10-05 08:10:34 11

原创 H5

H5html5是什么HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。一句话概括,html5是h

2020-10-05 08:09:23 10

原创 H5 --- 多列

多列属性描述column-count规定元素应该被分隔的列数。column-gap规定列之间的间隔。column-rule设置列边框与border写法一样。column-span规定元素应该横跨的列数。column-width规定列的宽度。columns规定设置 column-width 和 column-count 的简写属性。<!DOCTYPE html><html> <head> <

2020-10-04 15:02:20 18

原创 H5 --- 动画属性 / 3d属性

动画属性animationanimation-name:动画的名字animation-duration:动画完成一个周期所花费的时间(秒/毫秒)animation-timing-function:动画的速度曲线(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)animation-delay:动画何时开始animation-iteration-count:动画被播放的次数 number/infinite(无限循环)animation-directi

2020-10-04 14:53:00 32

原创 H5 --- 背景渐变 / 变形 / 过渡

背景渐变:分为2种:线性渐变 linear径向渐变 radial案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 800px; height: 200px; margin: 0 auto; /

2020-10-04 14:42:50 48

原创 H5 --- 盒子模型/字体

盒子模型原来的盒子,添加border,padding都可以让盒子本身变大,为了解决这个问题,css3推出了新的盒子模型box-sizing:content-box,border-boxcontent-box是默认值 计算方式 padding+border+widthborder-box 盒子大小始终是元素width盒子阴影(边框阴影):box-shadow:x y 模糊度(可选) 颜色 内阴影;box-shadow: 20px 20px 20px yellow,30px 30px 3

2020-10-04 14:30:07 33

原创 2020-10-04

新增选择器:选择器: 例子 描述element>element div>p 选择 <div>的 子元素<p> 。element+element div+p 选择在 <div> 元素之后的相邻的 <p> 元素。element~element div~p 选择在 <div> 元素之后的所有 <p> 元素。属性伪类:[attribute] [target]

2020-10-04 14:14:30 153

原创 H5 --- 音频/视频

audio 音频音频属性controls控制面板src 路径loop 循环次数 autoplay 自动播放muted 静音播放video 视频视频属性width 宽height 高poster 指定播放开始画面source 浏览器对视频的格式要求不一样,为了兼容浏览器,所以用到source标签source标签可以让浏览器自己选择可以播放的视频格式举例: <video width="800" height=""> //source指的是数据来源

2020-10-04 13:54:44 31

原创 H5表单

表单中新增的控件(type属性)email: 提交表单时检测值是否是一个电子邮件格式url: 提交表单时检测值是否是一个url格式date: 年-月-日格式的控件time: 时:分格式的控件datetime: 年-月-日 时:分 格式的控件(UTC时间)datetime-local: 年-月-日 时:分 格式的控件(本地时间)month: 年-月格式的控件week: 年-周数格式的控件number: 数字输入框<input type="number" name="" id="" v

2020-10-04 13:43:53 13

原创 2020-10-04

什么是jsonJSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率json本身是一个对象,主要作用是存储数据(json是存储和交换文本信息的语法,类似XML),json可以存储任何类型的数据

2020-10-04 13:05:45 7

原创 2020-10-03

show(秒数) 显示hide(秒数) 隐藏toggle() 切换显示/隐藏slideUp() 上隐藏slideDown() 下显示slideToggle() 上下切换fadeIn() 淡入fadeOut() 淡出fadeToggle() 切换淡入淡出fadeTo(秒数,透明度)animate() 自定义动画动画当中想要改变颜色(字体/背景),需要下载js/jquery.color.js这个插件stop() 停止 (只能停止当前的列队动画) true、falsedela

2020-10-04 12:55:11 9

原创 2020-10-03

绑定事件方法:bind(事件,函数) 元素绑定事件绑定事件方法的优点就是可以绑定多个事件,可以同时处理<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script

2020-10-03 18:25:20 2

原创 JQuery --- DOM

获取值的方法html()text()val() 既可以获取input里面的值/也可以设置值如果是下拉菜单 、单选、多选的情况下 val([’’])方法 还可以将他们设置成默认选中prop(‘checked’,true) 专属input默认选中方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head&

2020-10-03 18:08:09 3

原创 2020-10-03

选择器方法find() 匹配当前元素的后代 == $(‘div p’)后代选择器children() 匹配当前元素的子元素 == $(‘div>p’)子选择器next() 匹配当前元素的下一个同级元素== $(‘div+p’)下一个同级选择器nextAll() 匹配当前元素的下的所有同级元素 == $(‘div~p’)prev() 匹配当前元素的前一个同级元素==prevAll() 匹配当前元素的前的同级元素==siblings() 匹配当前元素的所有同级元素first() 选中

2020-10-03 17:45:03 2

原创 JQuery选择器

基础选择器id #class .标签 div* 通配符群组 #box,pcss() 一个值的时候是找这个元素的值,两个值的时候是设置样式 举例 找元素的值: alert($('p').css('color')) 举例 设置元素的样式: $('#txt').css('color','red');size() 返回的元素个数 举例: alert($('p').size())<!DOCTYPE html><html> <hea

2020-10-03 17:38:19 26

原创 JQuery认识

JQuery什么是jQuery它通过封装原生的 JavaScript 函数得到一整套定义好的方法。jQuery的作用1.像 CSS 那样访问和操作 DOM2.修改 CSS 控制页面外观3.简化 JavaScript 代码操作4.事件处理更加容易5.各种动画效果使用方便6.让 Ajax 技术更加完美7.基于 jQuery 大量插件8.自行扩展功能插件Query的优点以更少的代码、实现更多的功能jQuery的引入方式本地引入(外链接)<script src="../js/

2020-10-03 17:28:27 703

原创 2020-10-03

什么是函数?a:通过关键字 function定义声明的语句就是函数function sun(){ }b:函数是一个代码块的集合函数的命名?a:参考变量命名函数的调用有几种?a:普通调用function sun(){ } sun()b:事件中调用<p onclick="sun()"></p>c:表达式中调用(输出方法中调用)function sun(){ var n=1; return n; } alert(sun()) cons

2020-10-03 17:10:52 8

原创 2020-10-03

事件的传播机制?事件分为2种传播机制(事件流):1. 冒泡 (IE提出的事件流是冒泡)2. 捕获 (谷歌和火狐提出的事件流是捕获)什么是冒泡事件?1:冒泡事件是由微软公司提出的,从触发底部事件一直延续到最外层,这个现象就是冒泡!2:只有嵌套关系的标签和都是一样的事件才可能产生冒泡!<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title

2020-10-03 15:46:25 30

原创 正则表达式

正则创建方式var reg=new RegExp('要匹配的元素','修饰符')var reg=//;alert(typeof reg) Object<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/

2020-10-03 15:31:09 6

原创 事件

什么是事件?人与机的交互就是事件。事件类型ui事件onscroll 滚动条事件onload 页面加载触发unload 页面关闭触发onselect 选中文本时触发onresize 改变浏览器窗口触发onabort 图像加载被中断触发error 错误信息时触发onchange 当改变一个元素的值且失去焦点时<!DOCTYPE html><html> <head> <meta charset=

2020-10-03 15:18:11 20

原创 2020-09-29

创建一个元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 300px; height: 300px; background-color: aquamarine; } </style> <script src="comm

2020-10-03 15:03:20 26

原创 2020-09-29

创建元素创建元素的三种方式document.write();对象.innerHTMLdocument.createElement()document.write( )<body> <input type="button" id="btn" value="按钮"> <p>真帅</p> <script type="text/javascript"> // 根据id属性获取指定信息并注册点击事件 mFun$("btn").

2020-09-29 14:46:53 159

原创 2020-09-29

节点标签:element 页面中所有标签(标签 == 元素 == dom对象)根元素:HTML标签文档:document节点:node 页面中所有内容(标签/属性/文本(文字/换行)/空格/回车)节点类型: nodeType 1-- 标签 2-- 属性 3-- 文本节点名称: nodeName 标签 – 大写标签名 属性 – 小写属性名 文本 – #text节点值: nodevalue 标签 – null 属性 – 属性值 文本 — 文本内容<!DOCTYPE html&gt

2020-09-29 14:30:29 22

原创 2020-09-29

tab切换案例<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; }

2020-09-29 08:42:13 20

原创 2020-09-28

innerText、innerHTML、textContentinnerText:可以设置内容,但是不解析标签,不显示效果(谷歌、火狐、IE8都支持)innerHTML:可以设置内容,解析标签,可以显示效果textContent:可以设置内容(谷歌、火狐支持,IE8不支持)<body> <input type="button" value="按钮" id="btn"> <div>真好看</div> <script src="common.j

2020-09-29 08:40:03 26

原创 2020-09-28

验证密码长度<body> <input type="password" value="" id="te"> <script src="js/com.js"></script> <script> // 根据id属性获取指定元素注册失去焦点事件 mFun$("te").onblur = function(){ //如果这个密码的长度大于等于6 并且 小于等于18 if(this.value.length >= 6 &a

2020-09-28 16:59:30 16

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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