阿威|合格的前端工程师|产品经理|用户体验爱好者

当网站内容不足一屏时footer如何紧贴底部

"网页底部固定的几种方式"

“很多时候，产品经理说我觉得这个网站不好看，不管内容的多少我都要他的底部在最下面，就是当网站内容不足一屏时footer紧贴底部，然后内容超过一屏是自然也是footer位于最下面。那么问题来了？这到底应该怎么玩” js计算，我首先想到的就是判断网页的高度，也是最常用的，但是每次进入页面还是进行一次计算，估计性能也好不到哪里去，要是应用在移动端，配置低一点的安卓机器反应可想而知 #...

by ZWW on June 5, 2016

[欧冠之后]iphone开关的一种实现方式

"移动开发常见的开关方式"

“欧冠之后第一遍文章，哈哈. ” 欧冠结束了，我真希望是马竞夺冠，他们干掉了拜仁巴萨，他们理应配得上欧洲之巅。可是这就是足球，这就是生活。哪里来如果呢？喜欢马竞，因为他代表了我们普通人的一种信仰，我可能没钱，没地位，技术没你好，但是我们敢于全场狂奔，我们用自己拼命努力来达到自己想要的成就。看完比赛久久不能释怀，写写文章略表敬佩。 ####iphone开关怎么玩？做项目的时候...

by ZWW on May 5, 2016

滑动导航

"滑动导航"

最近写文章老是有点问题。今天来个史上最短文章。直接上demo ##关于作者 var ihubo = { nickName : "TZ", site : "http://www.zhangweiwei.cn" }

by ZWW on April 5, 2016

radio之间的故事

"radio标签"

打开博客看一看，文章更新实在是太少了。哈哈，不过很多时候还是用来写写demo挺方便的。github真是个不错的平台。对了，昨晚欧冠。托雷斯进球了，然后又被罚下。人生赢家真是大起大落。其实我一直相信马竞是可以击败巴萨的，每次都少打一人。让我看的很不过瘾啊，马竞加油哦。咦，我怎么扯这些了，呵呵不说了，今天做项目用到一个radio选择登陆方式，比如携程登陆还是微信登陆。然后出现相应的注...

by ZWW on March 16, 2016

css实现的中间标题两端横线效果

"常见的模块分类样式"

2016第一篇文章，就写它吧。在不少的页面效果中，特别是新闻标题或者提纲有这样的应用，那就是中间是标题内容，两端是装饰用的横杠，当然这个装饰非常的简单。实现此效果的方式也很多： 1，定位 2，一像素重复x轴背景图 3，浮动前面的两种实现度非常简单，但是扩展性不高，让我我很不爽。所以我想到了最后的方式，也是扩展性能比较高的一种实现方案。首先放一个通用的结构： ...

by ZWW on February 16, 2016

inline元素的空白解决方案

"常见img textarea等行内元素标签中"

现代浏览器中，img元素默认情况下底部会有空白，那么这个空白到底是从哪里来的？有什么比较好的方法可以去掉这个空白？其实不光是img元素，所有的行内元素都会造成这样的影响。下面demo是项目中经常遇见的问题 demo 要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。 vertical-align 的默认值是...

by ZWW on December 23, 2015

初识mix-blend-mode

"just for fun"

12月你好 2015已经接近尾声了，时间就是走的这么快，毕业出来这半年居然跑了大半个中国，想想也是累了。昨天晚上玩球又输了300个大洋，每次总是告诉自己胜败乃兵家常事，很正常，越是每次这样安慰自己，越是收不了手，赌博这玩意就像赌王说的那样：不怕你技术高，不怕你没钱，就怕你不赌。不赌是赢！钱是王八，输了咱再挣。哈哈哈玩玩mix-blend-mode，在cssconf上听人介绍这玩意，当...

by ZWW on December 6, 2015

你为什么喜欢看球

"九十分钟诠释了人生的成王败寇"

恒大成功拿下亚冠，横扫亚洲。这应该是数亿中国球迷最爽的事情之一。昨天看直播，真的很揪心，阿赫利踢的也不差，少打一人的情况下险些将比分扳平，一旦扳平，冠军将改名换姓。可惜足球就像生活，永远没有如果，成皇败寇，处处分明。不记得准确时间，也不知从何开始，闲下来的时候总会看看球赛，让平静的心也掀起一丝激情。朋友说，九十分钟的球赛，那么无聊有什么好看的？想想也是，九十分钟干点啥不好，看个球？不...

by ZWW on November 22, 2015

愿我能

"他有故事他有愁"

昨天给松哥吹了很久很久的电话，我说我换工作了，他一下就急说你刚毕业不好好干换什么工作，再苦咬咬牙也要坚持。我们从初中认识，虽人隔两地不常见面，准确的说是六七年没见面了，但时常电话联系一下，互诉生活。交情不在长久，有些人认识很久还是形同陌路，有些人不常联系只需一个电话便能燃起青春激情，忆当年各种青葱岁月。他一再劝我不要动不动就换工作，换来换去不好，然后blabla一大堆说要脚踏实地的工作，...

by ZWW on November 11, 2015

css3 3d动画学习心得

"本文来自繁星ued"

引言本文阐述了自己学习css3做3d动画的心得：并非用了rotateX、rotateY做旋转效果就一定是3d，实现一个3d效果需要理清一些概念，然后多个属性共同配合。动画demo 效果： 5张图片围成个三角形，鼠标移上去，5个图片就会旋转。代码： <style> * { padding: 0; margin: ...

by ZWW on November 6, 2015

word-break和word-wrap的基友关系

"细说强制换行"

“英文单词中换行的差异” word-break和word-wrap都是表示单词换行，这其中藏有什么奥秘呢，其实对于中文来说对没有什么卵用，区别不明显，这样才对，因为本身就两个css属性就是针对英文单词呀，写过css的都知道单词太长制定大小的容器放不下时要写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，实现的效果都是强制...

by ZWW on November 4, 2015

好看的水纹导航

"下划线的升级版导航"

今天闲来没事浏览国外网站，看见一种导航挺有意思的，出于好奇，自己也写着玩了一下，其实也就是玩一玩三角吧，用before和after伪类话2个三角，因为三角是实心的，所以要用一个三角覆盖另一个三角，留出1px的边框的斜线，思路大概就是这样。直接上成果demo “怎么画三角？” 以前在csdn上写过一遍文章，就是专门玩转各种三角的： http://blog.csdn.net/...

by ZWW on November 4, 2015

曾经火爆的瀑布流布局

"到达浏览器底部时像瀑布一样加载滚动"

“什么是瀑布流” 这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。布局的两种思路： 1，传统多列浮动 2，css3的columns属性 #container { -webkit-column-count: 5； /*-...

by ZWW on October 25, 2015

button向外扩散动画效果

"鼠标hover的时候边框向外缩放动画"

“after伪元素实现动画效果” 实现类似向外放光的效果，主要实现原理就是after伪元素结合hover时候让button产生动画。很多这种jquery插件，实现各种各样的扩散效果，原理类似。说一下css的一种实现方式把！定义一个样式a标签或者button标签 <a class="button">Fake Button</a> 为这个链接写上基本的...

by ZWW on October 24, 2015

css中的各种框

"视觉格式化模型Visual formatting model"

“块元素块级元素傻傻分不清” 在我理解来看视觉格式化模型就是浏览器或者浏览器代理对dom结构进行解析过程中所生成的demo树结构。英文是这样叫：Visual formatting model 然后说说css中的各种框： Containing block（包含块）一个元素，它的框的尺寸和位置会相对于一个特定的矩形框边缘来计算而得到，这个特定的矩形框称之为该元素的包含块，写过cs...

by ZWW on October 19, 2015

左右上下移动幻灯片

"原生js写的简单幻灯片效果"

“最近项目用到幻灯片，简单写了一个记录一下” 实现了幻灯片的自动切换，和hover切换的效果，根据图片的数量自动生成下标。发现最重要的还是运动轨迹函数把。一个通用的方法：获取元素的样式： function getStyle(obj, name) { if (obj.currentStyle) { return obj.c...

by ZWW on October 18, 2015

css选择器玩五星好评

"多种选择器多种方法玩玩5星评价显示"

“别瞧不起页面仔，你真的能玩转页面？” css其强大的选择器，看的时候觉得so easy，真真玩起来的时候如果不得心应手，会让我浑身不爽。写一下五星评价的样式，主要是复习一下选择器以及各种方法实现的优缺点。 demo地址 1，E~F选择+左右浮动+webkit-appearance+pointer-events注意伪input写上name *注意：给input加上name...

by ZWW on October 14, 2015

javascript数组去重

"3种方法玩玩去掉数组重复的元素"

“简单逻辑练练js ” 写js我一直很头痛，看来出来混，迟早要还,大学时虽学计算机，什么算法逻辑毛线都不会，c语言还挂了好几次科呢，保持学习的心态，慢慢前行吧，不闲扯了。这是看月夜带刀的博客而引发的数组去重，发现他js好厉害。最先想到的办法很可能就是用2个for循环来做比较然后去除掉重复的元素，代码如下所示： Array.prototype.distinct...

by ZWW on October 13, 2015

flex布局总结

"常见flex的语法及用处"

“关于flex的文章 ” 开始前复习一下最新看苏宁和京东用到的侧边栏导航的实现方式： position:fixed top left +margin-left position:fixed top right+margin-right 实现侧边栏不随屏幕大小而滚动。新浪是这样的： .W_gotop { position: fi...

by ZWW on October 11, 2015

再次回味background

"每个css属性都是一段故事，需要我们认真体会发现"

“周末闲下来玩玩background. ” 首先background是一个符合属性，从原来的css2属性有： background-color background-image background-position background-attachment background-repeat 然后随着CSS3这个强大的东西到来之后，又新增了几个属性： backgr...