placehold.it - 图片占位符小工具推荐

在做页面的时候,经常需要临时找个图片顶上或者测试~ 随便找张图可能大小尺寸并不符合自己的要求,放在页面上也丑丑的。。 因此本周推荐一个非常好用的图片占位符小工具~ 一言不合先看图~ 上门三张图片用来占位的话,不仅标有尺寸很清晰,而且可以调整背景色和文字颜色。即使 Demo 页面一样也可以美美哒~ 四不四很神奇~ 我猜你一定已经打开调试器看图片 url 的,好啦其实只需要在 placehold.it 的 URL 后面加上图片尺寸和颜色的参数,就可以快速生成美观的占位图啦。 像这样: <img »

Webpack + gulp + babel-loader 配置踩坑

最近新启了一个项目,由于之前没有从零新建过项目,在项目的配置上花了很长时间。简单记录下配置中遇到的最大的坑:webpack + gulp + babel-loader 的问题。 先说一下配置的需求,整个项目工作流主要用 gulp 管理。引入 webpack 只用来打包压缩 js。 很早以前就听过 Webpack 2 有 Tree Shaking 的功能,配合 ES6 的 »

H5页面 - 小米 Max 微信群聊

开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品。 页面的主体是群聊对话,同时在对话中包含了很多交互:图片、视频、动画、翻译等。如果用户是用微信打开的链接,还会获取用户名和头像,作为页面里的“我”来聊天,效果有点逼真~ 页面里有“彩蛋”,还能求红包喔~ 不啰嗦,先看页面效果。页面地址(手机浏览效果更好)。微信里访问这个链接 »

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候,css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜,搜,搜,半天才搜到合适的解决方法。然后下次遇到,呃,又忘了~ 后来仔细回忆了一下,其实CSS实现竖直居中是有几种不同的应用场景的,需要分别使用不同的解决方法。这也是为啥每次都觉得,诶上次那个解决方法好像不行呢?(原来并不是我智商的问题)好了废话不多说,记录下遇到的不同场景及解决方法,希望能对自己或者别人有所帮助。 inline 或者 inline-* 的元素竖直居中 可以借助 padding, line-height, »