04 2020 档案
摘要：先使用U编码转字符，得到随机相同数量的数字、大写字母和小写字母，使随机验证码得到三者的概率相同 效果图和案例实现代码如下： GIF效果图如下所示： 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
阅读全文
摘要：在众多事件当中，需要注意的几点是， 1、blur和change的相同和区别： 两者都是在失去焦点时触发，他们的区别是blur是只要失去焦点就会触发，而change是在失去焦点的同时还要判断绑定元素的值和上一次值是否相同，相同则不触发，反之则触发； 2、click、mousedown、mouseup
阅读全文
摘要：一、数据类型的转换 为什么要转换？ 如果，用户给了一个数据，或者计算机给了一个数据，或者其他程序给了一个数据，不是我们需要的数据类型 需要转成当前程序所需的数据类型，再进行运算 转换方法有哪些 数据类型的转换方法 强制转换（显示转换，主动转换） 字符转数值 parseInt(要转换的数据或变量) 从
阅读全文
摘要：真正好看的效果都是自己掌握的情况下，自己慢慢调出来的，下面将介绍具体内容和使用方法： CSS3属性 文本阴影属性 text-shadow：x y 阴影距离 颜色 说明：水平、垂直阴影的位置允许负值 可进行多阴影设置(逗号分隔的方式) 盒子阴影 box-shadow 盒子阴影 h-shadow 必需的
阅读全文
摘要：本文重点：介绍css3动画的知识点以及案例(两个以上)，动画和transition过渡的区别 css3动画 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 gif动态图片比较浪费资源，我们可以使用动画使静态图片动起来。 关键帧的定义 不
阅读全文
摘要：本文重点：网格布局的优点是可以控制元素占据的网格数量，可以灵活的跨行和跨列，可以很方便实现一般布局难以实现的布局效果，控制元素占据网格数量的属性在本文项目属性（即添加在子元素上的属性） GRID布局 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布
阅读全文
摘要：在浏览器中所展示的宽度差不多，高度参差不齐，整体又很美观，呈现出瀑布流，这样的布局都属于多列布局。 css布局的局限性是无法使用懒加载，js的瀑布流布局可以实现懒加载,详情请参考，https://www.cnblogs.com/piaoyi1997/p/12954660.html css3-多列 多
阅读全文
摘要：一、怪异盒模型 怪异盒模型的属性是box-sizing，他有两个属性值： 1、content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 简而言之就是，一般的盒子都是属于这种，最显著的特点就是加上padding后，盒子
阅读全文
摘要：本文重点：两栏自适应布局是指，左侧固定宽，右边宽度自适应；三栏自适应是指左右两侧固定宽，中间宽度自适应。最方便的方法是触发BFC(块级格式化上下文)，后续方法请往下看： 1、两栏自适应布局 左侧固宽，右侧自适应，左侧使用浮动，右侧使用overflow:hidden触发BFC,使得右侧元素不受其他元素
阅读全文
摘要：上一篇文章已经具体介绍了css过渡的语法和用途，本文将介绍3d与过渡的结合的具体使用。 可以做出各种好看的3D动态效果 回顾一下，过渡的语法：简写：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型 案例效果图如下（实现代码在下方）： 3D 2d场景，在屏幕上水平
阅读全文
摘要：本文重点： 1、在2D变化使用过程中，有些需求需要两种或两种以上的变化同时使用， 值得注意的是尽量把位移变化放在最前面，把其他变化放在最后面，属性值中间用空格隔开； 因为其他变化放在前面会使位移变化出现很大的误差（切记） 正确写法如下：transform:translate(100px) rotat
阅读全文
摘要：渐变？：背景色在多个颜色之间平稳过渡 线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化 线性渐变如图所示： 标准模式的语法（不添加浏览器前缀）： background:linear-gradient(direction,color-stop1,color-stop2) 说明：directio
阅读全文
摘要：下面将介绍如何玩转各种表格和表单： 表格的作用：展示数据（尽量不做页面布局） 表格的属性：width、height、border、bordercolor cellspacing=“ ” 清除单元格边框的间距 cellpadding="" 内容距离边框之间的边距 align="" 水平对齐方式 val
阅读全文
