这个看起来是一个很普通的四列布局,但要求是自适应宽度大小,而且两边的图片还要和边缘对齐,图片和图片之间还有有相同的间隙,这样光把空间平分成4份是不够的,还要在外层的两边扩展出一些空间来,这里就用的负边距了以下是代码片段:
当然,负边距的使用场景还有很多...
这个文字后面跟了图标,要求文字多的时候显示省略号而文字后面的图标要一直显示,代码如下:
3 padding-top取代占位图片
之前对于这种自适应宽度的图片列表,如果在没有加载完的时候,图片区域是没有高度的,所以我们会设置一张等比例的占位图片,用占位图片撑起图片区域,但这样又多了一个图片请求,幸好有padding-top来帮忙,代码如下:
这样做可以让图片区域即使在图片没有加载的情况下也能有高度,而且能自适应布局,感觉妥妥的。
这个是一个很古老的话题了,每个浏览器下面的文件上传控件都不一样且不能定义它的样式,我们为了它能好看一点可谓绞尽脑汁,估计透明法是使用最多的一种办法了,代码如下:
但这个方法有个弊端,因为在某些浏览器下文件上传控件是没有办法定义大小的,当设计师把按钮设计的比较大和长的时候,点模拟按钮有可能点不到透明的文件上传控件。所以我认为以下方法是一个比较有效的解决方案(放弃ie6):
点击label的时候会触发文件上传控件的事件,不管按钮多大都能触发。
之前在做一个活动时,要求在高级浏览器下面实现一些动画效果,使活动页面有更好的体验,当时使用了opacity属性让部分元素先隐藏,但由于ie9不支持动画,所有在ie9下面opacity的值不能等于0,想了很久都没有想到怎么写hack,于是在网上找了一下,找到一个媒体查询的hack,代码如下:
其实使用媒体查询能写出很多hack来,但是个人觉得做页面要尽量做到少使用hack。
这个也是老话题了,记得有次去某家公司面试还做不出来(没有JS根本不行),但这个在移动端使用flex布局就很容易实现了,以下是我们的一个浮层组件,无需JS,无论宽高怎么变都能保持浮层水平和垂直居中。
代码如下:
扫码下方二维码,
随时关注更多前端干货文章!
▼
微信:IMWebTech