@ CSS
【收藏】这么多WEB组件(CSS),攒一个网站够了吧?

简言

总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?

CSS组件

【基础】这15种CSS居中的方式,你都用过哪几种?

简言

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。

css居中

【图片版】学习CSS网格布局

简言

CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式,从本质上都是Hack的方式,并且遗漏了一些重要的功能(比如:垂直居中)。Flexbox的出现部分解决了上述问题,但Flex布局是为了解决简单的一维布局,适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的,适用页面的整体布局。在实际工作中,Grid和Flexbox不但不矛盾,而且还能很好的结合使用。做为WEB程序员,我们在页面布局问题上都付出过努力,也将不断探索新的方案。而Grid是第一个专门为布局问题而生的CSS模块,我们有理由对Grid充满期待。

利用CSS和JS实现文件选择框的美化(input,file)

引言

在做文件上传时,都会用到文件选择框 <input type=file>。而文件选择框的样式真的是太丑了,而且不同的浏览器差异还很大。出于安全的考虑,不能直接的应用样式在文件框上。如果不做处理,文件输入框和设计页面实在是格格不入。我们只能通过变通的CSS方式并结合JS来实现美化,本文收录了一个效果以备使用。

效果

$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。