
前端页面的坑
勤奋笨笨鸟
我就是为了记录我自己的问题,不喜勿喷
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
关于处理blob 文件下载兼容的问题
此方案是度娘查询到的,忘了是哪个网址了if( window.navigator &&window.navigator.msSavaOrOpenBlob ) {navigator.msSavaBlob(new Blob([req.data],name));}else {let url = window.URL.createObjectURL(new Blob([re...原创 2020-01-07 10:49:05 · 3411 阅读 · 0 评论 -
当div设置为绝对定位时,这个div的位置情况
众所周知,当一个DIV 或者其他元素的定位设置为绝对定位时,这个div就脱离了文档流。但是此时的位置情况呢?1.div设置定位方式为绝对定位,但是top缺省的情况下,这个div的位置还在原文档流的位置,相当于原地浮起。比如说,它前面有同级元素。那它此时的定位为这个同级元素下面。即默认的文档流中的位置。2.div设置定位方式为绝对定位,但是top设置的情况下,这个div的位置则是相对于父元素的定位。...原创 2018-04-23 16:45:47 · 1173 阅读 · 0 评论 -
关于布局中垂直居中,踩过的坑(解决了,但是还是稀里糊涂的)
昨天拿了一个页面练手,刚写了三行,碰见一垂直居中问题。没有问题的代码截图如下:html:css:html,body,div,ul,li,span,img,input{ padding: 0; margin: 0; font-size: 72px; box-sizing:border-box;}div{ display: inline-block;}#wrapper{ ...原创 2018-04-19 18:58:40 · 386 阅读 · 0 评论 -
修改input聚焦时 的黄色框问题,input的placeholder 样式(关于用到的双冒号和单冒号的问题)
最近看设计稿要实现,遇到的问题:1.input聚焦时,出现黄色的边框:input样式中添加:outline: none;2.input中placeholder的样式,突然发现没有思路了,百度了一下,找到对应的资源,链接放上,供大家参考:http://www.jb51.net/html5/171764.html作者讲的很详细。关于用到的双冒号和单冒号的问题,也找到一篇文章,写的也很详细,供参考:ht...转载 2018-04-19 09:27:26 · 909 阅读 · 0 评论 -
浏览器设置模拟器宽度为720px,但是实际上的和布局宽度为980px
今天在写html布局是,出现这样一种现象,如图所示:模拟器设置宽度为720px,背景图片宽度为720px,但是显示时在盒布局模型可以看出来,宽度变成了980px;最终解决方案:在html页面中添加:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scal...原创 2018-04-18 18:09:59 · 4094 阅读 · 0 评论 -
图片超过标签宽度,如何实现你想要的核心部分显示
如图:我要实现5张宽度为180的图片在720宽度的屏幕上的均匀显示。每张图片的宽度占屏幕宽度的20%.此时需要将图片宽度多余的部分进行代码裁剪。裁剪方案(此方法只适用于背景图):在背景图的裁剪中,有一个属性可以实现background-position.设置background-position:center center ;意思是图片的中心为此标签的背景中心。备注:设置为:background-...原创 2018-04-20 16:42:58 · 353 阅读 · 0 评论 -
swipper使用于动态创建的滑动li标签时,出现无法滑动的问题(静态填充好的不会出现此问题)
在进行开发是,应为效果图要实现每个页面显示2.5个滑动项的滑动效果。鉴于swipper的滑动效果写的不错,就采用了swipper的方案。在静态页面中使用时,没有发现问题。添加数据的时候,竟然出问题了。。。滑动不了。。。数据生成正确啊。。。。各种搜索,各种查询。终于找到可能的原因。swipper扫描数据项比数据加载早。如何解决,swipper实际上已经给出了解决方案。...原创 2018-05-10 10:58:41 · 366 阅读 · 0 评论 -
如何实现固定高度的ul中,li元素的底部对齐
今天在做项目中(移动端页面 效果图为宽度720px 设置html font-size:72px),突然间被一个小问题困扰了一下下,不知道大家有没有遇到过:ul高度100px li中的背景图片宽高均为12px.li的位置距离ul的下部高度26px.此时要实现图片效果,我采用的办法是利用line-height.设置ul的样式为:{ position: absolute; z-inde...原创 2018-04-26 10:13:43 · 3430 阅读 · 0 评论 -
关于移动端采用angular实现搜索时的软键盘绑定
今天在实现后台已经封装号的模糊查询接口的搜索效果时,我想要实现的效果是,搜索input在软键盘输入完成点击“搜索”,发送http请求。此要求就需要实现软键盘键值的监听与获取。在网上搜索结果(http://www.jb51.net/article/119743.htm)后自己试验成功。先贴出自己的代码,供参考。html:<header id ="mheader" ng-controller =...转载 2018-05-18 19:00:50 · 770 阅读 · 0 评论 -
关于angular1.6.4以上版本的jsonp跨域问题的解决方案
在使用angular.js请求跨域文件时出现了跨域问题,百度了很多文件的解释都相对模糊,最后在搜索视频文件时,看到了开课吧石川老师的视频上的讲解,解决了此项问题。关于低版本的写法和高版本的写法,都有讲解。大家可以去搜索看一下。这里的记载是我重新整理的,附上本人的代码块供参考。HTML:跨域请求数据部分的js:data.js数据:讲解部分复制粘贴石川老师的文件(原谅我的懒):v1.5.* $htt...原创 2018-05-07 16:40:43 · 635 阅读 · 0 评论 -
关于做反向代理问题
在前端跨域时,出现跨域访问接口是经常的事,我在做angular访问时,现在试验过的跨域方法有两种:jsonp和nginx反向代理。其中的jsonp 比较简便一点:data.js但是在处理post请求时,这种方法显然不太合适。此时nginx跨域方案算的上是一种比较优质的方案。1.anginx.conf配置文件在http 下面的server中,添加代理项:前端代码中的请求也需要修改:HTML:<...原创 2018-05-14 16:15:37 · 1071 阅读 · 0 评论 -
关于实现移动端界面两个标题在屏幕的二分之一的固定位置显示,且有分割线
效果图:思路:1.本效果图的布局相对简单,唯一需要特别注意的就是中间20px 的分割线。我想了两种方案(border-radius和before after两种方案),测试结果只有这一种方案可行。此方案是将频道回放和相关推荐的宽度均设置为屏幕一般的宽度-中间的间隔50px-中间分割线宽度的宽度2px。然后分别用before 、 after给两部分添加border 宽度为1px。此时要注意befor...原创 2018-05-25 10:00:06 · 612 阅读 · 0 评论 -
$.param()的含义
$.param()的含义:序列化对象,返回字符串var params = {a:300,b:300};var str = $.param(params);console.log(str);输出结果为:a=1900&b=1900原创 2018-05-08 17:35:38 · 10422 阅读 · 0 评论 -
谷歌浏览器跨域解决
转载:https://jingyan.baidu.com/article/148a1921c9dbf24d71c3b11f.htmlChrome浏览器如何开启Ajax跨域访问调试?听语音|浏览:1153|更新:2017-10-06 09:38|标签:CHROME 浏览器 1234567分步阅读由于浏览器安全性限制,Ajax是不能跨域访问的,而我们在日常开发工作中,经常会出现本地开发环境需要访问其他...转载 2018-05-08 19:51:05 · 5993 阅读 · 0 评论 -
同一个页面出现两个module(ng-app = "medule名称") 时,第二个加载不上
//解决同一个页面出现两个module(ng-app = "medule名称") 时使用 //默认状态下,一个页面智能自动加载第一个module ,如果要加载两个或者多个module,则除 //第一个medule之外,其他都要手动添加,手动头添加的方法就是下面这一句话 angular.bootstrap(document.getElementById("hot"), ['mhotVide...原创 2018-05-15 16:37:22 · 319 阅读 · 0 评论 -
关于动态创建(ng-repeat)的li添加ng-click,不起效的解决方案
在项目中遇到一种情况:<div id="hot" class="swiper-container hot" ng-app ="mhotVideo" ng-controller = "hotVideosctrl" ng-click="detail()"> <ul class="swiper-wrapper"><li c原创 2018-05-15 17:20:37 · 2042 阅读 · 0 评论 -
关于margin的那些疑惑
在页面布局中,margin用到的次数很多,场景也很对,但是你真的理解它,知道怎么运用他吗?我有很多疑惑,最终在这里找到答案。原文地址深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分:margin--基础知识...转载 2018-05-29 10:02:00 · 1070 阅读 · 0 评论 -
关于美团选餐界面效果的实现思路
美团外卖有一个效果,实际感觉挺不错的,针对此效果,总结并实现了两个思路。页面布局情况:htmlcss <div id="left"> <ul> <li id="left_0">分类一</li> <li id="left_1">分类二</li> <li id原创 2018-06-12 11:22:19 · 3010 阅读 · 2 评论 -
关于angular 为动态获取元素中,需要获得事件的选项添加class的说明
在JQ中如果要为某一项添加CLASS的话,直接使用addClass 就可以实现。那么angular要实现此项效果,就需要用ng-class。关于ng-class的使用说明,在W3C 中有说明,此处不再赘述。此处只针对我使用的部分进行说明。ng-class 可以采用key-value 的形式实现class的添加。形如:ng-class = '{key:value}'其中key为需要添加的class ...原创 2018-06-06 16:14:57 · 3979 阅读 · 0 评论 -
让人又爱又恨的float
页面布局时,出现一行两个不同宽度的div在一行上。如下图:通俗的做法的是什么呢?方法千千万,我独爱float。好吧,又爱又恨的float我用了。横向的效果出来了,完美吗? html: <div id="videoMsg"> <div id="videoTitle">战神</div> ...原创 2018-05-31 11:38:25 · 208 阅读 · 0 评论 -
setTimeout 居然支持三个参数!!!
最经再看ES6 promise的时候,发现书本的例子中setTimeout 居然有三个参数,瞬间全蒙。难道阮一峰大侠也犯错了?进过资料查询,是自己孤陋寡闻了。setTimeout 居然支持三个参数,或者三个以上的参数。setTimeout的第三个以后的参数是作为第一个function 的参数传进去的。...原创 2018-07-02 10:41:27 · 1169 阅读 · 0 评论 -
关于十进制转化为十六进制的那些事
今天在研究ES6的时候,看到unicode 编码的时候,突然间转到死胡同,原来手到擒来的进制转化问题,突然间晕了,为此专门又看了看计算方法。十进制:23383 十六进制:5B57整数部分:十进制转化为16进制,算法十进制数除以16得到的余数放最低位,得到的商除以16的余数放倒数第二位,紧接着再用此时的到的商除以16得余数放第三位。以此类推。小数部分的计算:比如0.9032转化成16进制小数,0...原创 2018-06-27 14:45:16 · 2433 阅读 · 0 评论 -
RegExp方法解析(ES5)
转载博客园的文章,原文请看这里RegExp 正则表达式(regular expression)的缩写语法:显式构造函数 var rg= new RegExp(pattern, attributes)隐式构造函数 var rg= /pattern/attributespattern: 字符串attribute: i, g (i不区分大小写的匹配, g全局匹配,即查询所有匹配项而不是在匹配到第一个后就...转载 2018-06-27 15:05:54 · 603 阅读 · 0 评论 -
画布设置(style设置宽度,高度 和直接写canvas的宽度,高度)的不同影响
今天在进行画布学习的时候,出现了下面的问题:代码写的是画的圆形。结果却是椭圆形。经过讨教和资料查询,发现为题出现在上面的画布定义上面。修改代码后,问题消失。在进行跨步宽度和高度定义的时候,需要搞清楚两个概念:1.画布的宽和高(ps新建画布的宽和高);2.画布所在画板的宽和高(例如ps打开后的窗口);默认的画板、画布的宽和高是都是300*150的。但在画布上设置style属性的话,相当于把画板的宽和...原创 2018-07-10 17:15:37 · 4245 阅读 · 1 评论 -
字体图标
字体图标(iconfont) 后缀名svg1.字体图标可以做透明、旋转等图片可以做的事情;2.本质是文字,可以很随意改变颜色、产生阴影、透明效果;3.本身体积小,携带的信息没有削减;4.几乎支持所有浏览器;5.移动设备必备;使用流程:1.ui设计字体图标效果图(svg)工具:2.前端人员上传生成兼容性字体文件包;3.前端人员下载兼容性...原创 2018-08-07 21:36:44 · 4707 阅读 · 0 评论 -
子元素宽度100%的继承情况
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子元素宽度100%的继承情况</title> <style> /*父元素是默认的情况下*/原创 2018-08-07 22:40:10 · 1515 阅读 · 0 评论 -
旋转轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转轮播图</title> <style> body{ perspective原创 2018-08-12 16:43:38 · 465 阅读 · 0 评论 -
哪些CSS属性会被子元素所继承
转载自:哪些CSS属性会被子元素所继承 文本color(颜色,a元素除外) direction(方向) font(字体) font-family(字体系列) font-size(字体大小) font-style(用于设置斜体) font-variant(用于设置小型大写字母) font-weight(用于设置粗体) letter-spacing(字母间距) line-h...转载 2018-08-03 15:08:53 · 2451 阅读 · 0 评论 -
此部分实现效果
<div class="hot w"> <div class="hot_l"> <h3>热门公开课</h3> <ul> <li> <img src=&原创 2018-08-20 21:46:08 · 150 阅读 · 0 评论 -
仿照网站的在输入内容时会有智能记忆及推荐选项显示
纠结了我一天的效果终于实现了。仿照网站的在输入内容时会有智能记忆及推荐选项显示。修复了好多没有考虑到的bug。代码如下: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉框提示</title&原创 2018-09-15 17:20:29 · 420 阅读 · 0 评论 -
纯js实现数组去重
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数组去重</title> <script> 思路: 1.遍历数组中的元素; 2.将数组中原创 2018-09-06 19:56:24 · 199 阅读 · 0 评论 -
纯JS 判断字符串中是否出现了数字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>判断字符串中是否出现了数字</title> <script> var str = "!原创 2018-09-06 22:28:21 · 6648 阅读 · 0 评论 -
关于实现点击一行,下一行变色问题
今天在做如题目说的效果(如下代码)时,发现在时间注册函数中判断循环值出现问题。所有的节点的点击事件后都是第一行高亮。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>原创 2018-09-13 19:20:07 · 368 阅读 · 0 评论 -
vue-cli 安装
安装vue-cli 的方法1.安装nodejs2.确认nodejs版本在4.4.5以上;3.输入命令 npm install -g vue-cli 检查安装:输入命令vue4. 进入放项目的路径5.输入命令 vue list 查看可使用打包工具6.创建webpack打包工具项目 sell7.输入命令 vue init webpack sell8.输入项目名称 sell9....原创 2018-09-19 00:13:23 · 152 阅读 · 0 评论 -
角色处理界面操作
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>水果选择</title> <style> select { width: 300px; height: 300px;原创 2018-09-14 20:46:54 · 564 阅读 · 0 评论 -
仿照淘宝的商品放大镜效果
1.鼠标经过small,显示遮盖层和大图;离开时隐藏;2.鼠标在盒子中移动时,遮盖层和鼠标一起移动;3.遮盖层移动时,大图移动;须注意点:1.处理小图时:鼠标在遮盖层的中间,所以遮盖层的左上角的坐标应该在鼠标在盒子中的位置,减去一半的遮盖层宽度、高度;代码为: 鼠标在盒子中的位置 var left = e.clientX+...原创 2018-09-26 19:01:10 · 273 阅读 · 0 评论 -
瀑布流
实现思路:关键点:利用浮动元素变为行内块元素,能自动换行的特点。自动获取每一个子项 的div的高度。 本例中图片编号001-019 所以在代码中进行了随机处理;注意点:如果不是在事件中定义,需要在window.onload中定义,如果不定义,应为获取高度时,图片还没有加载完成,所以获取的数值会报错;1.设置子项的宽度的和不超过父元素;2.设置图...原创 2018-10-11 19:54:21 · 233 阅读 · 0 评论 -
模拟滚动条
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>模拟导航条</title> <style> #box{ position: relative; width: 3原创 2018-09-27 20:07:34 · 121 阅读 · 0 评论 -
CSS3混合模式的一次实践
相关介绍链接:CSS3中的mix-blend-mode和background-blend-modecss mix-blend-mode 混合模式<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document<原创 2018-10-26 09:56:13 · 140 阅读 · 0 评论 -
递归解决求最大公约数问题
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script&原创 2018-10-24 20:33:09 · 522 阅读 · 0 评论