H5/CSS3
h5
zuo_zuo_blog
这个作者很懒,什么都没留下…
展开
-
H5中Video引入问题
引入视频代码块<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。</video>h5中嵌入视频自动播放...原创 2019-12-13 10:20:04 · 465 阅读 · 0 评论 -
H5 导航栏Tab切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .tabs{ width: 400px; text-align: center; margin: 30px aut...原创 2019-03-28 18:08:41 · 5367 阅读 · 0 评论 -
H5自定义属性
1.H5中自定义属性不能随意命名,必须以data开头2.获取标签的原属性var box=document.querySelector('.box'); //box.index=100; console.log(box.className); console.log(box.title);3.获取标签的自定义属性(自定义属性需要通过dataset[]方式获取)console.l...原创 2019-03-28 16:33:35 · 348 阅读 · 0 评论 -
H5中操作类名的API
1.APIa) box.classList.add(‘类名’):添加类名b) box.classList.remove(‘类名’):删除类名c) box.classList.contains(‘类名’):是否包含该类名d) box.claaList.toggle(‘类名’):切换2.获取元素a) 只会选择符合条件的第一个元素var box1=document.querySelecto...原创 2019-03-28 09:06:03 · 446 阅读 · 0 评论 -
解决音频视频兼容性问题
audio支三种音频格式:Ogg Vorbis,MP3,Wav <video src="js/1.mp3" controls="controls" autoplay="autoplay"></video> <!-- 多浏览器支持的方案--> <video controls="controls" a...原创 2019-03-27 20:41:57 · 1005 阅读 · 0 评论 -
H5浏览器兼容性问题解决方法
Ie8以下的版本不适用H5,解决办法-引入html5shiv.js文件下载地址:/UserFiles/file/20150118/20150118153337_288.zip原创 2019-03-27 19:41:58 · 2154 阅读 · 0 评论 -
H5中oninout、 oninvalid事件(自定义正则验证表单)
代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100...原创 2019-03-27 19:38:20 · 2997 阅读 · 0 评论 -
h5表单(属性)
代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100...原创 2019-03-27 19:34:05 · 314 阅读 · 0 评论 -
简单表单(H5元素)output keygen )
代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 1000...原创 2019-03-27 19:31:54 · 380 阅读 · 0 评论 -
H5 设计简单表单
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100%; ...原创 2019-03-27 19:28:19 · 2878 阅读 · 0 评论 -
H5属性选择器
之前学过的选择器div{}.box 类名选择器#box id选择器div p 后代选择器div.box 交集选择器div,p,span 并集选择器div>p 子代*:通配符div+p:选中div后面的第一个pdiv~p:选中div后面的所有p属性选择器,[]通过属性来选择语法格式:语法:[title]:选中页面的E元素,并且E需要带有title属性...原创 2019-03-28 20:58:58 · 333 阅读 · 0 评论 -
input file上传文件样式美化
1.通过label标签的for属性绑定控件idlabel标签的for属性与表单进行绑定包含显示绑定和隐式绑定显示绑定:上传文件隐式绑定:在 标签中放入控件隐式地连接起来上传2.通过onclick点击按钮事件进行input操作原理:通过点击button按钮触发点击事件获取input中idCSS3中multiple可以选择多个文件1代码片<!DOCTYPE html...原创 2019-03-31 20:41:10 · 5739 阅读 · 0 评论 -
CSS3凹凸文字效果
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: #ccccc...原创 2019-03-29 19:29:10 · 899 阅读 · 0 评论 -
浏览器兼容问题(浏览器私有化前缀)
渐变色代码:background:linear-gradient(left,red,blue)运行发现所有浏览器都不兼容(需要添加前缀)谷歌内核:background: -webkit-linear-gradient(left,red,blue);IE内核:background: -ms-linear-gradient(left,red,blue);火狐内核:background: -m...原创 2019-03-29 20:20:30 · 154 阅读 · 0 评论 -
css3装饰渐变地球
box{ width:300px; height:300px; /*background-color: blue;*/ border-radius: 50%; margin: 100px auto; background-image: radial...原创 2019-03-30 20:28:44 · 151 阅读 · 0 评论 -
CSS3边框美化
1.边框圆角border-radius单个写法:border-top-left-radius:水平半径 垂直半径;border-top-left-radius: 60px 120px;border-top-right-radius: 60px 120px;border-bottom-right-radius: 60px 120px;border-bottom-left-radius:...原创 2019-03-30 21:25:19 · 1401 阅读 · 0 评论 -
CSS3背景设置
1.背景尺寸添加背景图片background: url(“1.jpg”) no-repeat;a)控制背景图片大小具体数值控制background-size:500px 500px ;b)百分比控制:background-size:100% 50%;c) Cover会保证完全覆盖盒子,但不能保证完全显示,会超出background-size:cover;(全屏背景自适应比较好实用)...原创 2019-03-30 22:58:52 · 586 阅读 · 0 评论 -
CSS3中渐变效果
1.线性渐变a)从左到右渐变div:nth-child(1){background-image: -webkit-linear-gradient(left,red,black);}b)不指定方向默认是从上到下div:nth-child(2){background-image: linear-gradient(yellow,green);}c)按照指定角度div:nth-chil...原创 2019-03-30 23:13:18 · 224 阅读 · 0 评论 -
CSS3实现扑克牌动画
代码片<style> body{ background-color: #eeeeee; } .box{ width:300px; height:440px; margin: 100px auto; position...原创 2019-03-31 11:02:34 · 1590 阅读 · 1 评论 -
CSS3动画小案例
1气泡效果原理:a)首先设置多背景图片background: url(“2.jpg”) no-repeat left top,url(“2.jpg”) no-repeat right bottom;b) 然后添加变换之后效果.box:hover{background-position: left bottom,right top;}c)最后设置过渡 transition: a...原创 2019-03-31 11:16:32 · 3226 阅读 · 0 评论 -
CSS3中Li标签结构伪类选择器
代码: li:first-child{ background-color: pink; } li:nth-child(10){ background-color: pink; } li:last-child{ background-color:...原创 2019-03-29 14:55:17 · 1538 阅读 · 0 评论