小青龙8085-优快云博客

原创类360极速浏览器官网html

打算考考研了，所以把之前没写的博客都补一下。赶紧去钻进考研的学习中。效果图动画部分代码动画部分采用替换标签中类的方法，有两个类，init（动画初始化）、done（动画开始）。当显示该页面时就开始该页面的动画，并且初始化上一个页面的动画。 var animationElement={ ".box1":[ ".font1", ".phone1", ...

2020-04-13 23:15:13 457

原创网页版音频播放器，歌词随音乐而动

制作不易，多多支持，谢谢！！我的博客里面还有关于视频播放器的，感兴趣的小伙伴可以来看看。这个是效果图这是利用audio做的一个歌词随音乐而动的html页面。这个简单的音频播放器是用ajax请求本地服务器的lrc文件，lrc文件就是歌词文件。歌词滚动的基本思想把歌词放在盒子里面，通过audio的timeupdata事件监听音乐的播放，并获取当前播放的时间current...

2020-03-08 15:15:05 1975

原创 position之static

position ：static静态定位/常规定位/自然定位作用：使元素定位于常规流/自然流中特点：忽视top、bottom、left、right、z-index，是这些关键字作用失效如果两个元素都设置了外边距，最终的外边距取决于外边距大的在具有固定width和height值时的元素，如果把左右边距设置成auto，则左右边距会自动扩大占满剩余宽度，实现这...

2020-01-18 11:59:02 16671

传播段：就是传输数据的时间，这个由设备性能和总线长度决定，计算方法是，通常总线延时可按5.5ns/米计算，单个节点收发延迟可按75ns，假如总线长12吗，那么PTS = 2*（12*5.5+75）= 141ns（这里乘2是因为传输或者接收完成会有个ACK应答），然后拿着这个时间除以TQ，就是该段有多少个TQ。每种厂家芯片对这几个的叫法可能不一样，这里用的是S32k144的芯片，叫法是RJW（同步段）、PROPSEG（传播段）、PSEG1（相位缓存段）、PSEG2（相位缓存段2）

2024-07-24 10:04:19 996

原创 canvas之手势锁屏

这个是效果图首先是创建canvasLock这个对象，并且设置width（画布的宽）、height（画布的高）、chooseType（每行1圆得数量）、pwd（解锁手势，用数字表示的字符串）属性 window.canvasLock=function(obj){ this.width=obj.width; this.height=obj.height; this...

2020-03-27 20:02:03 829

原创 HTML5表单验证

HTML5表单验证表单验证的两种方式： form表单提交到后台（学习这个）无刷新页面的ajax提交（之前做过） HTML5约束验证API willValidate属性 willValidate: 指定 input 是否需要验证 willValidate属性该属性获取一个布尔值，表示表单元素是否需要验证。如果表单元素设置了required特性或patter...

2020-03-23 14:49:38 1109

原创网页版视频播放器

原创、不易，望多多支持，谢谢！！！目录主要功能图片展示1、视频进度条2、播放暂停按钮和全屏3、时间4、音量5、倍速6、键盘控制本来想上传一个gif的，但一直上传失败。所以就只能上传一些截图了。主要功能：可以拖动小船改变视频进度，直接点击进度条视频可以直接跳到该位置。可以通过键盘和鼠标来调音量，也可以调倍速，快进快退。图片展示...

2020-03-04 17:56:39 1534

原创关于AJAX

什么是Ajaxajax是什么？作用是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript...

2020-02-20 18:06:01 139

原创过渡式轮播图

效果图：（制作不易，多谢支持）寒假里因为新型肺炎的事情不敢出门，虽然整天呆在家里，但我感觉也并不是那么无聊，可能我真的比较宅吧，话说回来这么长时间什么也不干也不太好，所以就利用这宝贵的时间学点知识。其实在还没放假的时候就已经做好了好好学习的打算，到今天也差不多坚持了快一个月了，虽然上午基本上是用睡觉度过的，但感觉通过这些天的学习还是收获了许多。今天这个案例是做轮播图，其实早就想做这个...

2020-02-10 20:58:51 1505

原创 CSS3之动画狗

这个会动的哦，今天花了一下午的时间做的。效果：html代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"/> <title></title> <link rel="stylesheet" href="3.css">...

2020-01-30 21:27:57 388

原创 transform之筛子

效果：代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style> body{ perspective: 800px;/*视角距离*/ perspective-...

2020-01-29 21:39:11 230

原创 animation案例

效果：这是一个动画代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"/> <title></title> <style type="text/css"> div:nth-child(1){ width: ...

2020-01-29 20:41:05 320

原创 transform案例示意图

效果：当点击每个蓝色方块的时候后都会有相应的效果。代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"/> <title></title> <style type="text/css"> *, *:after, *...

2020-01-28 22:13:01 403

原创 text-overflow

text-overflow定义和用法text-overflow 属性规定当文本溢出包含元素时发生的事情。语法text-overflow: clip|ellipsis|string;值描述 clip 修剪文本，直接减去多余的文本。 ellipsis 显示省略符号来代表被修剪的文本。 string 使用给定的字符串来代表被修剪的文本。注...

2020-01-26 16:26:08 661

原创 border-image

border-image语法border-image: source slice width outset repeat|initial|inherit;值描述 border-image-source 用于指定要用于绘制边框的图像的位置 border-image-slice 图像边界向内偏移 border-image-width 图像边界的宽度 ...

2020-01-25 17:17:54 324

原创 h5新增的结构标签

结构标签（块状元素）-----有意义的div标签描述 article 标记定义一篇文章 header 标记定义一个页面或一个区域的头部 nav 标记定义导航栏链接 section 标记定义一个区域 aside 标记定义内容部分的侧边栏 hgroup 标记定义一个区块中相关内容 figure 标记定义一组媒体内容 ...

2020-01-21 16:31:59 526 1

原创侧边栏导航跟随案例

效果图：代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; ...

2020-01-18 21:14:29 446

原创 position之sticky，让某些元素在滚动一定距离之后固定在某个位置

position：sticky作用：relative+fixed的结合，制造出吸附效果。再向上滚动页面的时候，有时我们想让某些元素在滚动一定距离之后固定在某个位置，这个时候就可以用这种定位方式。效果：滚动前：滚动后：代码：<!DOCTYPE html><html> <head> <meta charset="...

2020-01-18 18:38:10 2808

原创 position之fixed

position：fixed作用：固定在浏览器的某个位置运用这个定位方式，可以是元素固定到浏览器的某个位置效果：代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style ty...

2020-01-18 18:18:11 332

原创 position之absolute

position：absolute作用：使元素脱离常规流特点：脱离常规流用百分比设置元素宽和高的时候要注意是按照谁的百分比设置的------最近定位祖先元素如果没有最近定位祖先元素，会默认body是 z-index可以控制堆叠顺序案例一（1，4）html <body> <div class="box">A...

2020-01-18 18:08:31 356

原创 div的height、width设置为百分比之后如何让里面的元素垂直水平居中

效果展示：方法很简单，将父盒子display：table，将里面的内容display：table-cell，还有就是要把body，html宽高也设置为100%，要不然盒子的高度会出现问题。<body> <div class="box"><span>box</span></div></body>*{...

2020-01-18 17:20:40 1018

原创 position之relative

position：relative作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素特点：可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有任何元素都可以设置为relative，...

2020-01-18 13:00:07 6654

原创 float案例

效果图：代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; ...

2020-01-17 18:23:04 482

原创清除浮动的五种方法

我们在使用float的时候可能会遇见这种问题那条黑线其实是红、黄、蓝这三个div的父级容器的边框，粉色为这个父级元素下面的一个div解决这个问题的五种方法：1、浮动元素后使用一个空元素 <div class="clear"></div>.clear{ clear:both;}2、给浮动元素的容器添加overfloat ：hidden...

2020-01-17 16:37:42 257

原创 float之文字围绕图片

效果图：在这个案例中，只是给图片加了个float：left，文字就围绕图片了。这是因为，图片虽然脱离了文档流，但仍在文本流当中，所以图片不会覆盖掉文字。并且浮动的图片只会使其之后的元素产生影响所以对图片上一段的文字并不会产生影响（图片上面那一段文字围绕图片）。下面是代码：<!DOCTYPE html><html> <head> ...

2020-01-17 15:57:52 917

原创盒子模型案例

效果图代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> *{ margin: 0 auto; font-family...

2020-01-15 19:40:51 791

原创 vertical-align垂直居中

2020-01-14 23:18:32 307

原创 letter-spacing与word-spacing区别

效果：区别：代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> p{ text-decoration: u...

2020-01-14 22:42:58 219

原创表单

效果图代码<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> <h2 align="center">注册信息</h2> ...

2020-01-13 21:42:21 113

原创寒假学习之课程表格案例

以下是效果展示下面是代码，运用了表格嵌套，colspan，rowspan，border，bgcolor，cellspan等属性。<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> </head>...

2020-01-13 17:33:15 170

原创 webpack安装及其与node.js, npm的关系

webpack是一个模块打包工具，安装前需要有node.js环境，而node.js自带了软件包管理工具npmwebpack作用：1将sass/less 等预编译的css语言转换成浏览器识别的css文件2能够将多个预编译文件打包成一个文件3 打包image/styles/assets/scrips/等前端常用的文件4 搭建开发环境开启服务器5 监视文件改动，热部署。6 将单文件组件...

2019-12-03 20:33:11 316

原创 vue（作用于插槽--父组件替换插槽的标签，但是内容由子组件提供）

效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src=...

2019-12-03 19:33:34 430

原创 vue（插槽slot的使用）

<template>里面的代码<template id="cpn"> <div> <h2>插槽的使用</h2> <slot name="left">左侧</slot> <slot name="middle">中间</slot> <slot name="right...

2019-12-03 19:02:12 922

原创 vue（子组件访问父组件，$root,$parent）

$root:访问根组件$parent：访问父组件运行结果实例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </st...

2019-12-03 12:08:24 601

原创 vue（访问子组件的方法或属性，$children,$refs）

$children:访问子组件。访问子组件的方法：this.$children[0].ontap()；访问子组件的属性：this.$children[0].name$refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>，使用this.$refs.aaa.name运...

2019-12-03 11:36:05 3295

转载 H5,200行代码实现粒子漩涡特效

演示图实例代码<!doctype html><html><head><meta charset="utf-8"><title>H5,200行代码实现粒子漩涡特效</title><style>html,body{ margin:0px; width:100%; height:100%...

2019-12-02 21:00:02 1327 1

原创樱花特效

2019-12-02 20:56:47 3376 1

原创 vue（子组件和父组件的双向邦定）

本案例先将父组件的data传到子组件，然后子组件通过input的数据双向绑定（当修改输入框内容时，子组件的数据也同步修改），然后再把子组件输入的值传给父组件（ const qpp=vue（{.....}））的data，同时第一个数据是第二个的100倍，第二个数据是第一个的一百分之一。运行结果示例代码<!DOCTYPE html><html>...

2019-12-02 20:34:19 131

原创 vue（子组件向父组件传递数据）

父子组件通信运行结果示例代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> &lt...

2019-12-02 13:12:01 111

原创 vue（父子组件的通信--父组件向子组件通信，及props的驼峰标识）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src="./vue.js"...

2019-12-01 22:27:01 329

空空如也

源文件为什么能引用没导入的头文件里面的自定义的数据类型(语言-c语言)

bms一些缩写问题，ieo、epo、feo分别是什么意思