2016年9月
-
移动端小总结
一、常用META 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch......
-
用less编写PC端上CSS3的小技巧
在说到这个小技巧前，我们首先了解less与css的区别： CSS: （Cascading Style Sheet）级联样式表,目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网 页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本 展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 LESS: LESS将CSS赋予了动态语言的特性，如变量、继承、运算和函数。LES......
-
负margin小结
关于负margin 对负边距使用恰当的话，其实它是具有非常强大的属性的，以下是几条关于负margin需要注意的地方： 负边距是绝对标准的css，并不是一种hack的方法 当没有使用浮动时，负边距不会破坏页面的文档流 浮动会影响负边距的使用，因此使用负边距的时候要小心 使用负边距，做了几个小demo 1.两个设置了固定高宽的div，分别是A,B 2.A设置margin-left为负值,如图A元素向左移了10像素 3.A设置margin-top为负值,如图A元素向上移了10像素,其父元素也向上移了10px 4.A设置margin-bottom为负值时，A并不会像你想的那样往下......
-
CSS3的3D转换
在做新版本的3d轮播插件的时候，使用到CSS3中的3D转换属性，对各种3D属性做了一些深入一点的了解。 transform-style 官方解释：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 我的理解是它是用在一个3D空间的父元素上，其所有子元素处于同一个3d空间坐标内，如果子元素之间有相互交错的层级关系时我都会给父元素加上这个属性，让它们处于同一坐标系中。（以下讨论均基于这个前提） 来一张空间坐标系示意图： 3D转换的层级关系 因为轮播中会有slide叠加的情况，正常情况是后面的层级低于前面的，在这个时候我们的z-index属性将会失去作用......
-
slide轮播 v1.0
重写slide插件，一个艰巨的任务，就这样在展开了。 目前只实现了简单的左右切换和渐隐渐现的切换效果，戳http://test.nie.163.com/test_html/test/test/slide/demo.html 而且功能还在测试中，后续会继续完善。 这里简单说一下前后循环的实现效果，就是当切换到最后一张时，如何继续自然地切换到第一张。 参考目前优秀的swiper插件，发现它实现得挺聪明的。它是在第一张和最后一张分别插入临近的tab页，然后再进行下一张切换的时候，快速切换到相邻的tab页，然后再完美实现过渡效果。 下面画个图展示一下具体步骤： 同理，上一个切换也是......
-
关于position:sticky的使用
前段时间做的一个项目中有要求导航随页面滚动然后固定在窗口的某个位置（下面简称粘性布局），所以本文主要介绍 position:sticky 实现的粘性布局；链接在此； 为了实现这种粘性布局我们一般都是通过js监听window的scroll事件，当需要固定的元素滚动到窗口顶部时，把元素的position属性设置为fixed，否则，取消fixed，简单的js代码如下： $(window).scroll(function () { var top = $(window).scrollTop(); if (top >= nav_top) { ......
-
safari几个小bug及番外
1、input 输入框的内容在 Safari 浏览器下光标的显示问题 输入内容后，光标靠上，未居中。在其他浏览器正常。 一般样式是这样写的： width：434px; height:54px; line-height:54px; text-align: center; 解决方案 把高度居中用padding设置 width:434px; height:24px; line-height: 24px; padding:15px 0; text-align: center; 2、一个按钮（a标签）在 safari 浏览器下不显示为“小手” 页面git》》 <a class......
-
关于魅族机子自带浏览器下视频弹层无法关闭问题
20170720更新 最近发现下文提到的解决方案有点问题估计是魅族系统有更新了。而且下文的demo地址已经无法访问。 新的解决方案如下（其实是按照下文的方案二来改的）： 定位加transform来实现居中 .m-video-con{ position: absolute; top: 0; //这里是关键，设置50%时就关闭不了了 transform:translateY(100%); -webkit-transform:translateY(100%); } 新的测试地址：http://test.nie.163.com/lj/video.html 之前做移动端......
-
input的placeholder字体大小无法修改？
今天碰到一个令人头疼的问题，一个输入框的placeholder显示的字体大小无法修改，很是奇怪，折腾半个小时，get到了一项自己未发现的新技能，下面慢慢道来。 先上图： 如图，一个普通的input输入框，然后设置了placeholder属性，然后需求是想修改placeholder显示内容的字体大小。我们看到上面其实已经设置了16px，按常理，placeholder的内容字体大小是继承其input大小的，所以习惯性去修改那个16px，结果失败。前往测试地址》》 第一反应，就是当前的设置被覆盖了，所以无论如何修改也无效。因为是非自己页面，在线debug通过chrome的开发者工具找了......
-
如何实现异步代码用同步方式写(Web端)？
前端写JavaScript的时候，经常需要使用两个异步回调的方法：$.ajax和setTimeout，这两个都是需要异步方式执行回调($.ajax可以设置为同步，但会卡住浏览器，不推荐这么使用)，当有好多个$.ajax的时候，就会出现好多个回调，写起来很麻烦，甚至会出现传说中的回调金字塔，就像叠罗汉那样，Javascript有办法像Java、C#后台语言那样用同步方式写代码么？很抱歉，原生是不支持的(ES6、7会支持Promise同步调用，但需要非常高级的浏览器才支持，即使Node也不完全支持) 一般怎么写？ var start = new Date(); //......
-
Bug汇总
又有一段时间没整理了，在这汇总下最近遇到的bug和解决方法 1、去除inline-block元素间间距的两种方法 <div class="abc"> <a href="">a</a> <a href="">b</a> </div> /*方法一*/ .abc{ display: inline-table; //chrome word-spacing: -6px; } a{ word-spacing: 0; ......
-
ES6学习笔记——参数
在 ES5 中，在函数中我们需要各种操作去处理 默认参数、不定参数 和 重命名参数 等需求，在 ES6 中我们可以使用更简洁的语法完成这些需求。 默认参数 function addTwoNumbers(x, y) { x = x || 0; y = y || 0; return x + y; } ES6 中，函数的参数可以支持设置默认值： function addTwoNumbers(x=0, y=0) { return x + y; } addTwoNumbers(2, 4); // 6 addTwoNumbers(2); // 2 addTwo......
