H5页面 - 小米 Max 微信群聊

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

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

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