开局一张图 上图所示，多行文本的展开收起是一个很常见的交互效果。 实现这一类布局和交互难点主要一下几点： 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换

大家好，这里是CSS魔法使——alphardex。 切图仔，是大多数前端用来自嘲的称呼。相信很多人平时写页面的时候，大部分时间是在切图和排图，如此往复。这里并不是要否定切图本身，而是在质疑：一直切图到底对自己的功力增长有何好处？想想UI丢给你一套好看的界面，你却只需一个img标…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

前言 总括： 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那某一种方法，本文具体的介绍了三栏布局的四种方法，并介绍了它的使用场景。 原文地址：CSS三…

Flex布局 display: flex; 将对象作为弹性伸缩盒展示，用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素 注意兼容问题： webkit内核浏览器应使用前缀-webkit IE浏览器，可以很好的兼容IE11+版本，对于…

10 个独特的 CSS 背景视觉效果

本文是2016年的最后一篇文章，主要是将一些CSS细节问题整理一下。 background-position取值为百分比的计算方式 margin相邻折叠问题 position的absolute和relative定位top、left、right、bottom问题 覆盖样式问题 1…