html5+css3
关注
分享
扫一扫
文章平均质量分 72
随便起的名字也被占用
卷心菜，即菜又卷，还是菜，继续卷。
展开
-
记录一个很狗的问题，浏览器自动翻译导致vue项目页面数据等出错
在开发vue项目中发现，上线项目莫名其妙页面功能不能使用，但是本地都是ok的，然后排查发现是由于谷歌浏览器自动翻译，导致把项目原有的标签dom替换了，会包裹font标签等，原创 2021-05-31 16:03:11 · 1645 阅读 · 1 评论 -
CSS文本超出2行就隐藏并且显示省略号,单行居中，两行居左
css的基础属性 :overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行,只能显示一行css3属性 :display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。...原创 2018-10-19 14:45:21 · 1845 阅读 · 0 评论 -
前端使用jspdf生成PDF通过ajax传输后台生成PDF文件
html需要引入 html2canvas.js 和jspdf.debug.js <script src="static/libs/jsPDF-master/dist/jspdf.min.js"></script><script src="static/libs/jsPDF-master/dist/html2canvas.js"></script&g...原创 2018-12-22 14:52:48 · 23533 阅读 · 2 评论 -
input radio,改装input单选框样式，单选框input修改默认样式
HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>..原创 2018-12-18 20:29:19 · 2671 阅读 · 0 评论 -
基于jq的pc或移动端的图片预览，放大、缩小，拖动，旋转等，基于viewerjs
js版 — viewer.js github github地址jq版 — jquery-viewer github地址一款基于jq的pc、移动端的图片预览，缩放插件，1、html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> ...原创 2019-01-08 17:31:20 · 4990 阅读 · 0 评论 -
img 标签 访问图片 返回403 forbidden问题，meta标签的说明
1.异常信息 2.解决方案<meta name="referrer" content="no-referrer" /><!--页面头部添加-->3.meta说明:<meta charset="utf-8"> <!-- 设置文档字符编码 --><meta http-equiv="x-ua-c原创 2019-01-08 18:16:08 · 7185 阅读 · 2 评论 -
HTML2image 网页保存图片并下载到本地，兼容ie浏览器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m原创 2019-01-15 14:46:40 · 3336 阅读 · 5 评论 -
css 多行文本溢出显示省略号(…)，显示3行多出的显示省略号
在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实...原创 2019-01-28 17:37:08 · 2131 阅读 · 0 评论 -
javascript字符串方法函数汇总
JS自带函数JS自带函数concat将两个或多个字符的文本组合起来，返回一个新的字符串。var a = "hello";var b = ",world";var c = a.concat(b);alert(c);//c = "hello,world"indexOf返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。var in...原创 2019-05-09 16:45:46 · 207 阅读 · 0 评论 -
javascript(js)小数精度丢失的解决方案，0.2+0.1≠0.3
原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况.javascript(js)的小数点加减乘除问题，是一个js的bug如0.3*1 = 0.2999999999，0.2+0.1=0.30000000000000004等，下面列出可以完美求出相应精度的四种js算法function accDiv(arg1, arg...原创 2018-09-15 17:55:14 · 2725 阅读 · 0 评论 -
js 原生 瀑布流布局，瀑布流布局
HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&am原创 2018-08-18 15:00:13 · 240 阅读 · 0 评论 -
-webkit-appearance 使用说明
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。大家都知道每个浏览...原创 2018-08-08 08:50:25 · 9897 阅读 · 2 评论 -
关于清除浮动的四种方法
浮动对页面的影响： 如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0， 下面的元素会自动补位，所以这个时候要进行浮动的清除。关于清除浮动的方式: 方式一:使用overflow属性来清除浮动.ovh{ overflow:hidden; }先找到浮动盒子的父元素，再在父元素中添加一个属性：over原创 2018-01-17 22:31:20 · 355 阅读 · 0 评论 -
jQuery如何获取选中单选按钮radio的值
<li>微信支付<span class="mui-pull-right"><input class="pay" type="radio" name="pay" value="2" /></span></li><li>支付宝支付<原创 2018-05-04 11:53:07 · 481 阅读 · 0 评论 -
html页面引入公共头部和尾部
如何在HTML不同的页面中，共用头部与尾部？一、asp语言和PHP语言首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码：<!– #include file=”head.asp” –> 调用共用底部...原创 2020-03-05 09:12:39 · 21647 阅读 · 2 评论 -
移动端APP rem加载时页面放大或压缩解决
写APP页面的时候遇见坑，布局使用rem，但是再页面渲染加载时出现变形，虽然时间非常短，但是肉眼可见，于是爬坑，1，在页面body加载前引入html font-size计算js(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientati...原创 2018-06-02 15:12:17 · 1835 阅读 · 1 评论 -
图片懒加载
CSS代码HTML代码JS代码完整代码CSS代码只是设置图片的一些样式：<style> *{margin: 0;padding: 0;} img{width: 50%;display: inline-block;border: 1px solid #ccc;float: left;}</style>1234HTML代码1.png是一个1*1px的透明图或者...原创 2018-07-02 16:44:24 · 347 阅读 · 0 评论 -
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式// 图片地址var img_url = '13643608813441.jpg'// 创建对象var img = new Image()// 改变图片的srcimg.src = img_url// 打印alert('width:'+img.width+',height:'+img.height);12...原创 2018-07-03 15:33:33 · 659 阅读 · 0 评论 -
手机端图片放大，双指放大，元素的双指缩放
在做webapp时候，遇到一个需要做双指放大的功能，需求是：一张带有坐标的图片上有固定的点，需要点击这些坐标上的点进入相应的商品，并且需要对这一块进行双指可以缩放，双击缩放；一开始是自己写监听touch事件进行处理，但是再缩放的时候，偶尔出现卡顿闪烁，用户体验不很好，后来采用插件pinch-zoom GitHub地址： https://github.com/manuelstofer/pin...原创 2018-07-11 15:52:53 · 6403 阅读 · 0 评论 -
图片上传前 压缩，base64图片压缩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2018-07-27 15:06:21 · 4130 阅读 · 0 评论 -
html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image
在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！需要引入html2canvas.js、canvas2image.js、base64.js 点击获取资源需要在header中引入html2canvas.js、canvas2image.js、base64.js 库文件html2image思路 需要获取原创 2018-01-31 11:50:43 · 26540 阅读 · 17 评论