随笔分类 -  h5c3

data-*自定义属性
摘要：HTML5增加了一项新功能是：自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以使用data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可以通过脚本进行定义和数据存取。在项目实践中非常有用。 例如： <div id="div1" class="div1 阅读全文
posted @ 2020-09-28 19:46 MIKE-CHOW 阅读(631) 评论(0) 推荐(0)
获取地理位置
摘要：在HTML规范中，新增了获取用户地理位置的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS（location base service）定位方式：IP、基站、GPS、北斗隐私HTML5规范提供了一套保护用户隐私的机制，必须先得到用户明确的许可，才能获取用户的位置信息。在获取地 阅读全文
posted @ 2020-09-10 13:23 MIKE-CHOW 阅读(385) 评论(0) 推荐(0)
读取文件
摘要：h5中新增了读取文件的方法，网页可以读取文件的内容了1-当文件域标签选中文件后，获取选中文本文件，读取文件内容 <input type="file"> <script> var input = document.querySelector('input') input.onchange=functi 阅读全文
posted @ 2020-09-10 12:35 MIKE-CHOW 阅读(174) 评论(0) 推荐(0)
localStorage和sessionStorage
摘要：本地存储cookie：1- 容量小 4kb左右2- 操作不方便，因为那蹩脚的API3- cookie中的数据会通过请求头 自动 发送给服务器4-服务器设置cookie是通过响应头，响应报文发送给浏览器头，浏览器会解析响应报文，根据报文自行设置cookieh5中新增的两个本地存储容器容量：大约5M 只 阅读全文
posted @ 2020-09-10 11:31 MIKE-CHOW 阅读(164) 评论(0) 推荐(0)
拖拽
摘要：h5中新增了拖拽事件，原则上所有的元素都可以被拖拽，默认情况下，只有图片和连接可以被拖拽如果需要被拖拽，需要给元素设置一个属性draggable = ‘true’被拖拽元素事件:ondragstart 拖拽开始ondrag 拖拽中ondragend 拖拽结束目标元素事件1.ondragover 当被 阅读全文
posted @ 2020-09-09 17:59 MIKE-CHOW 阅读(390) 评论(0) 推荐(0)
伸缩布局
摘要：之前常用的布局方式：每种布局方式都有自己的布局特点，不同的布局方式相互独立，互不干扰1-标准流　块级——独占一行　行内——没有宽高，由内容撑开，独占一行　行内块——有宽高，不独占一行　从上到下，从左到右2-浮动　左浮动　右浮动　清除浮动3-定位　参照： 绝对定位：有定位的父元素 相对定位：相对于自身 阅读全文
posted @ 2020-09-08 17:49 MIKE-CHOW 阅读(187) 评论(0) 推荐(0)
动画
摘要：动画和过渡的区别1.过渡必须触发，需要两个状态的改变2.动画可以一直运行下去，不需要出发。实现效果和过渡差不多在css3中，动画和js的函数使用比较类似：先定义 --> 再调用 --> 一次定义多次调用定义： @keyframes 动画名称 { from{} to{} 或者 0%{} 10%{} 1 阅读全文
posted @ 2020-09-07 17:24 MIKE-CHOW 阅读(112) 评论(0) 推荐(0)
3D变换
摘要：rotateX() 沿X轴旋转rotateY() 沿Y轴旋转rotateZ() 沿Z轴旋转translateX() 沿X轴位移translateY() 沿Y轴位移translateZ() 沿Z轴位移透视：可以呈现出近大远小的效果perspective:数值显示效果：1.透视需要设置给变换元素的父盒子 阅读全文
posted @ 2020-09-06 23:19 MIKE-CHOW 阅读(193) 评论(0) 推荐(0)
2D变换
摘要：transform缩放：scale(水平缩放比例，垂直缩放比例);只有一个值，等比例缩放大于1，放大小于1，缩小平移：translate(水平移动距离，垂直移动距离);只有一个值 水平位移正值 右下移动可以使用百分比，百分比是相对于自身的注意，在c3中，所有的百分比都是相对于自己的translate 阅读全文
posted @ 2020-09-06 13:32 MIKE-CHOW 阅读(165) 评论(0) 推荐(0)
过渡
摘要：transition过渡是由一种状态渐渐过渡到另一种状态，从而实现动画效果 div { width: 200px; height: 100px; margin: 100px auto; border: 1px solid black; background-color: lime; transiti 阅读全文
posted @ 2020-09-06 13:08 MIKE-CHOW 阅读(310) 评论(0) 推荐(0)
渐变
摘要：渐变由一种颜色渐变为其他颜色渐变属于背景线性渐变：background:linear-gradient(方向,起始颜色,终止颜色)方向:to left right bottom top显示效果控制渐变的范围 显示效果方向可以是一个角度显示效果 径向渐变background:radial-gradie 阅读全文
posted @ 2020-09-06 11:14 MIKE-CHOW 阅读(235) 评论(0) 推荐(0)
背景原点和背景裁剪
摘要：背景原点background-origin作用：用于指定背景图片从那个盒子开始平铺padding-box 默认content-boxborder-box 以下是content-box的效果 以下是padding-box的效果 以下是border-box的效果 背景裁剪，background-clip 阅读全文
posted @ 2020-09-05 10:44 MIKE-CHOW 阅读(155) 评论(0) 推荐(0)
CSS hsla() 函数
摘要：定义与用法 hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。 HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩 阅读全文
posted @ 2020-09-04 23:11 MIKE-CHOW 阅读(238) 评论(0) 推荐(0)
阴影
摘要：文字阴影text-shadow：水平位移 垂直位移 模糊程度 阴影颜色 显示效果： 一个文本可以设着多个阴影，每个阴影按正常格式书写，多个阴影之间用逗号隔开 显示效果： 盒子阴影box-shadow:水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 内阴影(inset)box-shadow:水平位移 阅读全文
posted @ 2020-09-04 22:50 MIKE-CHOW 阅读(172) 评论(0) 推荐(0)
浏览器私有前缀解决兼容问题
摘要：如果css3的属性有兼容问题，加私有前缀:谷歌 -webkit-苹果 -webkit-火狐 -moz-IE -ms-欧朋 -o- 最终效果： 阅读全文
posted @ 2020-09-04 22:30 MIKE-CHOW 阅读(144) 评论(0) 推荐(0)
c3
摘要：CSS3CSS3是CSS2的“进化”版本，在CSS2的基础上，增强或新增了许多特性，弥补了CSS2的许多不足之处，使得web开发变得更加高效便捷CSS3现状1.浏览器支持程度较好，需要添加私有前缀2.移动端支持优于PC端如何对待1.遵循渐进增强原则：让低版本浏览器获得基础的功能，高版本浏览器具有更好 阅读全文
posted @ 2020-09-04 14:57 MIKE-CHOW 阅读(255) 评论(0) 推荐(0)
h5
摘要：h5概念：html5狭隘的理解：html5是在html4的升级版本，多一些标签html5广义的概念：html5代表着互联网技术的一个发展阶段，是一套前端技术的统称，包含HTML5、CSS3、H5提供的各种新的APIh5语法规范：1.单标签可以省略关闭符号2.双标签可以省略结束标签3.骨架可以全部省略 阅读全文
posted @ 2020-09-04 12:43 MIKE-CHOW 阅读(236) 评论(0) 推荐(0)