HTML5
关注
分享
扫一扫
文章平均质量分 50
houyanhua1
这个作者很懒，什么都没留下…
展开
-
JavaScript CSS3,过渡(transition)(动画)结束事件,(webkitTransitionEnd)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-28 16:23:15 · 4070 阅读 · 0 评论 -
CSS3 文字阴影(text-shadow),凹凸文字特效
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color:原创 2018-03-21 16:02:12 · 2095 阅读 · 0 评论 -
HTML5 web存储,sessionStorage,基于JavaScript
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>原创 2018-03-25 22:24:57 · 471 阅读 · 0 评论 -
HTML5 CSS3,全屏,全屏伪类,JavaScript
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-25 21:36:38 · 1070 阅读 · 0 评论 -
HTML5 拖拽(draggable),JavaScript事件
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-25 20:50:31 · 2643 阅读 · 0 评论 -
CSS3 颜色透明度(rgba,hsla)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* rgba:支持透明度的颜色(背景色/字体颜原创 2018-03-21 14:50:15 · 1146 阅读 · 0 评论 -
CSS3 伪元素选择器(::first-letter ::first-line ::selection)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 伪元素选择器 */ /* 第一个字母/汉字 *原创 2018-03-21 11:58:41 · 887 阅读 · 0 评论 -
CSS3 伪元素(::before ::after)(用CSS模拟html标签元素)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 伪元素:用CSS模拟出html标签的效果 (:b原创 2018-03-21 11:10:34 · 3696 阅读 · 0 评论 -
CSS3 伪类(:target)(配合锚点使用)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul { position:fixed;原创 2018-03-21 10:49:28 · 2151 阅读 · 0 评论 -
CSS3 empty伪类(:empty)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 500px; h原创 2018-03-21 10:21:07 · 2959 阅读 · 0 评论 -
CSS3 结构伪类(:first-child)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <style> /* 伪类(原创 2018-03-21 10:01:47 · 483 阅读 · 0 评论 -
CSS3 属性选择器( [] )
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-21 08:53:37 · 305 阅读 · 0 评论 -
CSS3 盒子模型(box-sizing: border-box(内减模式))
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; h原创 2018-03-21 16:34:10 · 1992 阅读 · 0 评论 -
CSS3 浏览器私有化前缀
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 1000px;原创 2018-03-21 17:13:29 · 364 阅读 · 0 评论 -
CSS3 圆角边框(border-radius)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px;原创 2018-03-21 19:49:50 · 497 阅读 · 0 评论 -
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 21:56:21 · 59280 阅读 · 1 评论 -
移动web 视口(meta name="viewport" )
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- meta:vp(emmet语法) --> <!-- viewport 视口属性 只有在移动端浏览器上才有用原创 2018-03-27 12:37:28 · 1240 阅读 · 0 评论 -
CSS3 同时添加多张背景图片 (屏幕适配)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-22 12:16:41 · 9273 阅读 · 0 评论 -
CSS3 背景裁剪(background-clip)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 22:27:50 · 2246 阅读 · 0 评论 -
CSS3 背景原点(background-origin),背景从什么位置开始显示
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 22:17:36 · 1498 阅读 · 0 评论 -
CSS3 边框图片(border-image)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px;原创 2018-03-21 21:16:00 · 828 阅读 · 0 评论 -
CSS3 盒子阴影(box-shadow)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color:原创 2018-03-21 20:21:37 · 255 阅读 · 0 评论 -
HTML5 JavaScript,获取地理位置信息(navigator.geolocation)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>原创 2018-03-26 12:02:17 · 2029 阅读 · 0 评论 -
HTML5 应用程序缓存(manifest)
demo.html：<!DOCTYPE html><html manifest="demo.appcache" > <!-- manifest指定本地的缓存文件 --><head lang="en"> <meta charset="UTF-8"> <title>原创 2018-03-26 10:37:32 · 484 阅读 · 0 评论 -
HTML5 JavaScript, 网络连接/断开事件(online/offline)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>原创 2018-03-26 09:18:46 · 5199 阅读 · 0 评论 -
HTML5 web存储,localStorage,基于JavaScript
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>原创 2018-03-26 08:51:58 · 206 阅读 · 0 评论 -
HTML5 视频播放(video),JavaScript控制视频
API：http://www.w3school.com.cn/jsref/dom_obj_video.aspdemo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&a原创 2018-03-25 11:16:39 · 12592 阅读 · 0 评论 -
HTML5 JavaScript中新增的操作类名的方法
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px;原创 2018-03-20 19:23:11 · 999 阅读 · 0 评论 -
HTML5 JavaScript中获取元素，筛选选择器(querySelector)
querySelector: 只能筛选出符合条件的第一个元素querySelectorAll: 获取符合条件的所有元素,返回数组类型。demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</原创 2018-03-20 18:22:08 · 7646 阅读 · 0 评论 -
CSS3 利用伪元素(::before)获取标签自定义属性(data-XX)的值
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>原创 2018-03-23 09:50:24 · 11933 阅读 · 0 评论 -
CSS3 3D旋转(transform)，平移，放大/缩小，倾斜
参见：https://blog.youkuaiyun.com/houyanhua1/article/details/79659096demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...原创 2018-03-22 22:11:16 · 9858 阅读 · 0 评论 -
CSS3 旋转(transform)
参见：https://blog.youkuaiyun.com/houyanhua1/article/details/79660780demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&a原创 2018-03-22 20:07:28 · 874 阅读 · 0 评论 -
CSS3 属性过渡(transition)(属性渐变动画)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 200px;原创 2018-03-22 18:53:33 · 17827 阅读 · 0 评论 -
CSS3 用径向渐变(radial-gradient)模拟立体感的球体
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-22 17:47:15 · 2123 阅读 · 0 评论 -
CSS3 径向(圆形)渐变 (radial-gradient)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-22 17:32:24 · 5184 阅读 · 0 评论 -
CSS3 线性渐变色(linear-gradient)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 1000px;原创 2018-03-22 17:11:44 · 2017 阅读 · 0 评论 -
HTML CSS，emmet插件快捷键(让代码飞起来)
emmet快捷键(让html、css代码飞起来)：emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。一、html1、生成结构的快捷键： ！+ tab,可以生成html5的结构代码。2、生成id名和类名 标签名.类名#id名+tab 没有标签名.类名+tab ==>div3、生成同级元素： 标签名+标签名+标签名 “+”tab4、生成子类标签(^...原创 2018-03-12 09:29:33 · 4536 阅读 · 0 评论 -
HTML5 表单新标签
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <f原创 2018-03-10 15:23:04 · 222 阅读 · 0 评论 -
HTML5 布局，新标签
无标题文档.box{ width:900px; height:500px; border:1px solid red; margin:0 auto;}header{ height:100px; background:#ccc;}HTML5 ,hello 书法家 生活没有彩排，人生也没有彩排。总会有些时候，满心期待换来的是失望，或者是不体谅。环顾四周，似乎原创 2017-11-03 19:56:28 · 849 阅读 · 0 评论 -
HTML5 表单，新标签
无标题文档邮箱：网址：颜色：日期月份时间数字电话调整范围 爱吃： 苹果0 苹果1 苹果2 苹果3魂牵梦萦f热望魂牵梦萦凡尔赛 window.onload = function(){ setInterval(hello,100); //定时器，循环调用hello函数，每隔1秒调用一次。} var n=0;原创 2017-11-03 19:46:08 · 231 阅读 · 0 评论