html
向着光芒的女孩
平时坚持瑜伽和阅读,是个内心温柔但充满力量的web前端程序媛
展开
-
【html5】视频video标签自动循环播放设置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>榜样&原创 2021-06-06 12:25:54 · 6641 阅读 · 7 评论 -
【js】如何使document.write重新加载body的onload事件
使用场景:后端接口放回一个转义的html字符串,让其在前端渲染,折腾了好久,先把\r \t \n 转义字符串转义再转义双引号str=str.replace(/\\r|\\t|\\n|/g,"");str=str.replace(/\\"/g,"'");返回的html想触发body的onload事件,使用document.write后新的body的onload事件不生效,后来发现需要先document.open() -> document.write() -> document.clo原创 2020-11-09 16:51:24 · 1196 阅读 · 0 评论 -
【CSS】html发生意外换行时可能需要这样设置
word-break : break-all;通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。原创 2019-07-24 15:31:38 · 214 阅读 · 1 评论 -
【CSS】flex布局平分三等分中间间距相等且两端对齐
思路:通过display:flex,再将子元素设置flex:1,再包一层,通过设置padding来设置中间间距,可以达到想要多效果padding-right(第1个盒子):padding-left(第2个盒子):padding-right(第2个盒子):padding-left(第3个盒子)=2:1:1:2完整代码如下:<!doctype html><html>...原创 2019-05-29 22:54:55 · 34602 阅读 · 7 评论 -
【跨域】nuxt.js axios 前端跨域接口调不通
在调试后端接口遇到这样的跨域报错提示:Access to XMLHttpRequest at ‘http://192.168.xxx.xxx:xxx/xxxx’ from origin ‘http://localhost:8010’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contain...原创 2019-06-06 14:33:51 · 3954 阅读 · 0 评论 -
【兼容性】element-ui 火狐浏览器select搜索条件无匹配时界面不友好
element-ui 版本: 2.9.11.搜索没数据时火狐浏览器:2.搜索没数据时谷歌浏览器:原因:主要是因为火狐浏览器和谷歌浏览器默认的overflow:scroll显示的滚动条的高度不一样可以如下方式优化CSS:/*修复火狐浏览器 显示问题*/ .el-scrollbar.is-empty .el-select-dropdown__wrap { height:0 }...原创 2019-05-31 15:36:23 · 1727 阅读 · 0 评论 -
【工具总结】前端常用辅助工具
1.马克鳗http://www.getmarkman.com/#/download-modal设计稿标注,测量2.CSS精灵https://www.toptal.com/developers/css/sprite-generator能根据图片生成一张图,svg格式的也可以,并将定位代码也贴出来3.pickpickhttp://ngwin.com/picpick/features有量角器,很喜欢4.富原创 2017-09-25 14:50:37 · 911 阅读 · 0 评论 -
【技术】CSS设置链接鼠标(失效)不能点样式
css关键代码: <style type="text/css"> .add-link{ color: #358753; } .link-notallowd{ opacity: .6; cursor: not-allowed; } .link-notallowd:hover{ cursor: not-allowed; t...原创 2019-05-13 17:03:48 · 1020 阅读 · 0 评论 -
【CSS】实现按钮hover时背景色从左慢慢移动到右边
按钮鼠标移动上去时,新背景色从左到右滑过去,思路:1.正常情况下:通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大,且在按钮的下面,刚开始宽度为02.鼠标移动过去:button的真正的背景色设置为透明,然后给最下面一层的颜色是以前的背景色,z-index:-2,width:100%按钮下面一层,z-index:1,背景色为新背景色,width:100%,再设置个过...原创 2019-05-10 14:34:36 · 11395 阅读 · 2 评论 -
【技术】textarea不同浏览器行高不一样
1.谷歌浏览器:rowsheight121236测试版本:2.火狐浏览器火狐:rowsheight142261测试版本:明显可以看到,火狐的行高比较大,所以尽量不要去通过设置rows的值去设置高度与其他元素对齐代码在线测试: http://next.plnkr.co/edit/N2YHdJyJbCbV5Vv...原创 2019-05-06 15:30:59 · 903 阅读 · 0 评论 -
【技术】html中为什么两个按钮默认有间距
按钮之间默认有空隙,输入框和按钮间有间隙,是因为行内元素在源代码中如果通过回车换行会自动产生一个空格。原创 2019-04-30 17:57:09 · 7227 阅读 · 0 评论 -
【js】window.jQuery || document.write(“<script src=‘javascript/jquery-1.7.1.min.js‘>“什么意思?
<script type="text/javascript"> window.jQuery || document.write("<script src='javascript/jquery-1.7.1.min.js'>" + "<" + "/script>"); </script>也有这样的:<script type="text/javascript" src="//aja原创 2017-04-17 11:04:08 · 7582 阅读 · 0 评论 -
【html】html注释中if IE 6等语句的含义
经常会看到某些网站的框架中会用到<!--[if IE7]><![endif]-->等语句,今天特意查阅了下它们的区别:<!--[if IE]>所有的IE可识别<![end if]--><!--[if !IE]>除IE外都能识别<![end if]--><!--[if lt IE6]>IE6以下版本可识别<![endif]--><!--[if lte IE6]>IE6以及IE6以下版本可识别<!原创 2017-04-17 09:53:06 · 1602 阅读 · 0 评论