H5与C3
文章平均质量分 94
HTML5和css3的新增特性
前端61
比昨天更努力,让明天更美好
展开
-
HTML5中表单新增的type属性和其他属性
一、表单新增的type属性1.文本:输入框内容为文本格式用户名:<input type="text" name="userName">2.密码:输入框内容为密码格式用户名:<input type="password" name="password">3.邮箱:提交时会提示验证邮箱:<input type="email" name="email">...原创 2019-12-05 14:59:34 · 3767 阅读 · 0 评论 -
HTML5 获取DOM元素 操作类样式 以及自定义属性
一、获取DOM元素1.获取满足条件的第一个元素document.querySelector(选择器)2.获取满足条件的所有元素document.querySelectorAll(选择器)<ul> <li id="apple" data-name="apple">苹果</li> <li>橘子</li> <li c...原创 2019-12-05 15:01:38 · 1579 阅读 · 0 评论 -
HTML5 中网络监听接口和全屏接口的使用
一、网络监听接口1.ononline:网络连通时触发 window.addEventListener('online', function () { alert('网络连通了') })2.onoffline:网络断开时触发 window.addEventListener('offline', function () { alert('网络断开了') })二...原创 2019-12-06 15:43:05 · 670 阅读 · 0 评论 -
HTML5中FileReader 的使用
FileReader:读取文件内容1.readAsText():读取文本文件(可以使用txt打开的文件)返回文本字符串,默认编码为UTF-82.readAsBinaryString():读取任意类型的文件,返回二进制字符串。这个方法不是用来读取文件展示给用户看的,而是存储文件。例如:读取文件的内容,获取二进制数据传递给后台,后台接收了数据之后再将数据存储3.readAsDateU...原创 2019-12-06 16:46:02 · 707 阅读 · 0 评论 -
HTML5 拖拽
学习拖拽主要就是学习拖拽事件一、应用于被拖拽元素的事件ondrag 应用于拖拽元素,整个拖拽过程都会调用ondragstart 应用于拖拽元素,当拖拽开始时调用ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用ondragend 应用于拖拽元素,当拖拽结束时调用二、应用于目标元素的事件ondragenter 应用于目标元素,当拖拽元素进入时调用ondrago...原创 2019-12-06 16:47:47 · 146 阅读 · 0 评论 -
HTML5 音频 视频的使用以及自定义播放器
一、音频audio:音频src:播放的音频文件的路径controls:音频播放器的控制面板autoplay:自动播放loop:循环 <audio src="../mp3/xxx" controls autoplay loop></audio>二、视频video:视频src:播放的视频文件的路径controls:视频播放器的控制面板auto...原创 2019-12-25 17:20:12 · 1204 阅读 · 0 评论 -
HTML5 sessionStorage localStorage缓存和应用缓存
一、sessionStorage的使用1.存储数据到本地,存储的容量5mb左右2.这个数据的本质是存储在当前页面的内存中3.它的生命周期为关闭当前页面,关闭页面数据会自动清除api:setItem(key,value):存储数据,以键值对方式存储getItem(key):获取数据,通过指定名称的key获取对应的value值removeItme(key):删除数据,通过指定名称...原创 2019-12-07 15:49:43 · 298 阅读 · 0 评论 -
css3新增选择器盘点
css3新增选择器盘点属性选择器伪类选择器伪元素选择器原创 2019-07-07 16:07:15 · 202 阅读 · 0 评论 -
css3边框图片
1、功能:将图片规定为包围 div 元素的边框定义和用法: border-image 属性是一个简写属性,用于设置以下属性border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat属性说明:border-image-source: 用在边框的图片的路...原创 2020-01-03 14:22:16 · 193 阅读 · 0 评论 -
css3 渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变一、线性渐变:linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果1.语法:2.参数说明:第一个参数表示线性渐变的方向,to left:设置渐变为从右到左。相当于: 270deg;to righ...原创 2020-01-02 09:46:57 · 214 阅读 · 0 评论 -
css3 设置背景样式
1.设置背景颜色background-color:red;2.设置背景图片background-image:url(“xxxx”);注:如果图片大于容器,那么默认就从容器左上角开始放置如果图片小于容器,那么图片默认平铺3.设置背景平铺background-repeat:no-repeat;参数说明:repeat:图片平铺(默认)round:会将图片进行缩放之...原创 2020-01-02 09:47:55 · 340 阅读 · 0 评论 -
css3 过渡
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点,必须规定两项内容:1.规定希望把效果添加到哪个 CSS 属性上,2.规定效果的时长1.语法:transition: property duration timing-function delay;2.参数说明:tra...原创 2020-01-02 09:48:44 · 121 阅读 · 0 评论 -
css3 transform(2D转换/3D转换)
一、2D转换通过 CSS3 transform转换,我们能够对元素进行移动、缩放、旋转、斜切等操作1. 2D移动:translate()。使用translate()函数,你可以把元素从原来的位置移动。移动参照元素左上角原点语法:translate(tx) | translate(tx,ty)tx是一个代表X轴(横坐标)移动的向量长度,当其值为正值时,元素向X轴右方向移动,反之其...原创 2020-01-02 09:50:14 · 689 阅读 · 0 评论 -
css制作一个自动旋转的立方体
1.透视/景深效果左手法则:大拇指指向当前坐标轴的下方向,手指环绕的方向就是正方向perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代,而不是其元素本身。当perspective:none/0;时,相当于没有设perspective(length)。比如你要建立一个小立方体,长宽高都是200px。如果你的perspective < 200px ,...原创 2020-01-02 09:51:11 · 638 阅读 · 0 评论 -
css3动画(animation)
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果.1.必要元素:通过@keyframes指定动画序列;自动补间动画,确定两个点,系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧通过百分比将动画序列分割成多个节点;在各节点中分别定义各属性通过animation将动画应用于相应元素;2.animation...原创 2020-01-03 11:40:56 · 157 阅读 · 0 评论 -
css制作自动旋转的钟表
1、钟表制作过程制作最外层圆环绘制时间刻度(定位+transform)绘制内表盘(作用:放置钟表最中间,遮挡住时间刻度,只留下部分-达到时间刻度的效果)绘制表针(时、分、秒)绘制最内层圆环(表针遮挡层)分别给时针、分针、秒针添加动画2、具体代码<!DOCTYPE html><html lang="en"><head> &...原创 2020-01-03 11:43:57 · 449 阅读 · 0 评论 -
css3 实现星空动画 -- 星星闪烁 - 流星划过 - 月亮上升
代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...原创 2019-05-22 14:44:04 · 4847 阅读 · 3 评论 -
web字体和字体图标
开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好,甚至IE低版本浏览器也能支持。1.字体格式不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。TureTpe(.ttf)格式.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏...原创 2020-01-04 15:59:14 · 195 阅读 · 0 评论 -
css3 多列布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文...原创 2020-01-02 09:54:59 · 253 阅读 · 0 评论