![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Html5+CSS3
SunsCheung
Sharing is a virtue
展开
-
HTML5获取地理位置定位信息
演示:HTML5获取地理位置定位信息.demo{width:560px; margin:60px auto 10px auto}.geo{margin-top:20px}.demo p{line-height:32px; font-size:16px}.demo p span,#baidu_geo,#google_geo{font-weight:bold}转载 2015-10-08 17:32:48 · 4263 阅读 · 0 评论 -
使用HTML5实现刮刮卡效果
演示:使用HTML5实现刮刮卡效果.demo{width:320px; margin:10px auto 20px auto; min-height:300px;}.msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px} helloweba转载 2016-08-18 13:34:03 · 544 阅读 · 0 评论 -
HTML5之画布Canvas
HTML5最伟大之处在于引入了画布Canvas。Canvas元素是为了客户端点阵图形而设计的,它本身没有绘图能力,但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。本文将通过示例简单介绍canvas的绘图功能。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们在Canvas区域中绘制图形,并不是拿鼠标在Canvas中画转载 2016-08-18 13:45:43 · 329 阅读 · 0 评论 -
flexbox全兼容模板
<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title>flexbox全兼容模板</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale = 1.0,shri原创 2016-08-19 15:13:06 · 1150 阅读 · 0 评论 -
scrollWidth,clientWidth,offsetWidth的区别 通过一个demo测试这三个属性的差别。 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象
scrollWidth,clientWidth,offsetWidth的区别说明:scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。转载 2017-06-29 16:48:24 · 230 阅读 · 0 评论 -
base64转blob Ajax上传文件,服务器端接收不到
function convertBase64UrlToFileOrBlob(dataURI,type=0) { var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]),fileExt = mime.split('/')[1], n = bstr.length, u8arr原创 2017-08-08 15:28:34 · 4896 阅读 · 0 评论 -
一劳永逸的搞定 flex 布局
一劳永逸的搞定 flex 布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: center、v转载 2017-11-27 14:13:45 · 383 阅读 · 0 评论