你好，我是 lynda 一个喜爱设计的前端工程师
这是我的 Twitter，欢迎订阅

简单实现回到顶部的效果

实现一个简单的回到顶部的效果实质是在一个图片（或文字）添加click事件， 点击图片回到页面的开始。如果它可以逐渐出现，逐渐消失，动态的显示就更好了，那么现在开始！ HTML代码 有了上面的html后，当我们点击有箭头的这个图片时，就会自动跳转到页面的顶部。 CSS…

用CSS设计响应式导航菜单

我们这次的目标是做一个响应式导航菜单，不使用javascript，只使用CSS就可以做到。就像这样： 初试效果 pc 响应式效果 pc HTML代码 我们要利用label元素的”for”属性，对应一个checkbox的id 上面的代码表示：当我们点击 就等于input…

说说Collapsing Margins

经常遇到Collapsing Margins，也就是margin折叠的情况，可总是不知道哪里出现了问题。 那就让我们来探讨下这个 margin 折叠 到底是什么鬼？它们是如何影响页面上的元素的？我们该如何拿下它？ margin折叠是什么？ 在W3C规范是这样定义margin…

2048源代码解读（5）

2048源码解读系列最后一篇，我们来解读最重要的 GameManager 部分。 GameManager函数有如下结构： 函数输入了size, InputManager, Actuator, StorageManager这四个参数，这都是之前我们解读过的， 参数传入后，size…

2048源代码解读（4）

已经阅读完localstoragemanager.js和keyboardinputmanager.js，这次阅读 html_actuator.js。 HTMLActuator函数有如下结构： 在函数的最开始获取了tile-container，score-container…

2048源代码解读（3）

前面一篇已经介绍了inputmannager.js那一部分的代码，接着想了解游戏中的状态数据是怎么存储和调用的，所以来阅读localstorage_manager.js。 localstoragemanager.js包括两个部分：window.fakeStorage…

2048源代码解读（2）

上文介绍了2048源码的宏观情况，下面打算仔细的看看源代码，我自己很感兴趣于键盘控制这一部分，所以决定先阅读input_mannager.js这一部分。 仔细查看了input_mannager.js的源代码发现好多的prototype。那先来看看prototype…

2048源代码解读（1）

源于参加百度ife训练营，我需要设计一个2048的小游戏，就像这样的： 2048游戏截图 有趣的是2048的作者将源码开放，最终在github里得到了项目的源代码，此时萌发了阅读源码的想法，说做就做，下面就是我的笔记了！ 分析204…

开发一个前端项目的正确预备式

开发一个前端项目，我们需要做些准备，为了快速开始，我们一般会选择一个html标准模板。 html5标准模板 上面提供的html5标准模板包含了3个内容：设置 doctype，设置页面编码，引入css包括具有初始化css…

如何用sketch制作一个水滴图标

如何用sketch制作一个水滴图标呢？效果图如下： 效果图 step1 添加Artboard 单击inset选项，选择Artboard 在iPad screens下选择landscape 效果图 step2 创建背景 点击键，拖动鼠标，创建一个长方形，命名为background…