HTML5
关注
分享
扫一扫
文章平均质量分 80
qq_22317389
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
flex布局
<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"&原创 2018-04-22 16:09:35 · 163 阅读 · 0 评论 -
摇一摇
<!doctype html><html><head><meta charset="UTF-8"><title>Test</title><meta name="viewport" content="width=device-width, initial-scale=1.原创 2018-05-15 15:55:23 · 136 阅读 · 0 评论 -
本地文件操作--拖拽图片
<canvas id="canvas"></canvas><div id="holder" class="normal">Drop your bitmap here</div><script type="text/javascript">var holder = document.ge原创 2018-05-15 19:32:42 · 376 阅读 · 0 评论 -
本地数据加载 Ajax
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-15 19:35:37 · 363 阅读 · 0 评论 -
Geolocation操作
利用百度API<!doctype html><html><head><meta charset="UTF-8"><title>Test</title><meta name="viewport" content="width=device-width, initial-s原创 2018-05-15 19:49:41 · 199 阅读 · 0 评论 -
回到顶部，top图标的制作
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">*{ margin:0; padding:0; font-原创 2018-05-15 20:58:34 · 726 阅读 · 0 评论 -
响应式菜单--@media screen的应用
在不同分辨率的窗口下，菜单显示不同的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2018-05-17 13:20:11 · 406 阅读 · 0 评论 -
HTML+css+JS实现日历组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-17 13:23:04 · 20641 阅读 · 2 评论 -
HTML+CSS+JQuery实现轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-17 13:28:14 · 765 阅读 · 0 评论 -
弹出图层
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-17 13:32:09 · 352 阅读 · 0 评论 -
折叠区域
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-17 13:33:22 · 490 阅读 · 0 评论 -
Tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-17 13:34:33 · 210 阅读 · 0 评论 -
下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-17 13:36:20 · 135 阅读 · 0 评论 -
触摸操作，刮奖
<!doctype html><html><head><meta charset="UTF-8"><title>Test</title><meta name="viewport" content="width=device-width, initial-scale=1.原创 2018-05-15 15:35:57 · 267 阅读 · 0 评论 -
Canvas动画设计
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">html, body { height:100%; marg原创 2018-05-15 15:21:16 · 266 阅读 · 0 评论 -
滑块拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-15 14:44:44 · 822 阅读 · 0 评论 -
HTML5拖放
<!doctype html><html><head><meta charset="UTF-8"><title>DragDrop</title><style type="text/css">body { margin:60px; background:#fff原创 2018-04-22 16:10:32 · 160 阅读 · 0 评论 -
雪碧图 icon-font字体
<!doctype html><html><head><meta charset="UTF-8"><title>CSS Sprites</title><meta name="viewport" content="width=device-width, initial-s原创 2018-04-22 16:26:02 · 425 阅读 · 0 评论 -
图文混排
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"&原创 2018-04-22 17:35:57 · 961 阅读 · 0 评论 -
多列等高布局
主要利用padding-bottom将列高撑开，在将margin-bottom设为负值，其原高度不变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2018-04-22 19:32:51 · 301 阅读 · 0 评论 -
三列自适应布局（圣杯布局）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2018-04-24 13:33:05 · 488 阅读 · 0 评论 -
三列自适应布局（双飞翼布局）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2018-04-24 13:34:48 · 208 阅读 · 0 评论 -
两列自适应布局的两种办法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2018-04-24 13:38:30 · 229 阅读 · 0 评论 -
图标元素动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-04-24 19:00:52 · 605 阅读 · 0 评论 -
动画加载效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-04-24 20:27:31 · 257 阅读 · 1 评论 -
canvas粒子动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-04-25 10:57:42 · 683 阅读 · 0 评论 -
滚动监听
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">body { background:url(bg.jpg) n原创 2018-05-14 21:50:03 · 276 阅读 · 0 评论 -
滚动触发动画
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">body { background:url(bg.jpg) n原创 2018-05-15 13:31:26 · 560 阅读 · 0 评论 -
localStorge操作
主要是利用localStorge存贮的时间来判断有哪些文章是未读的，并在右上角显示未读的文章数量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de原创 2018-05-17 15:22:34 · 403 阅读 · 0 评论