前端开发
前端开发博客专注于前端开发,分享前端开发技术、前端开发教程、前端开发工具和前端开发资源等
CSS3自定义webkit滚动条样式

使用谷歌Chrome浏览器的最新版本,滚动条样式已经是非常漂亮了。这个webkit-scrollbar仅适用于webkit内核。如果你想找其他的,可以试试用jquery滚动条插件。 webkit属性 ::-webkit-scrollbar ...
CSS3 flexbox弹性布局实例

我认为当flexbox支持所有的浏览器时,由于它比浮动布局更加的简单和强大性,它将彻底的改变我们的CSS布局方式。例如我们可以很容易的写出一个元素在未知比例下的居中对齐布局。当然CSS3新增的其它属性,例如grid也可以给前端开发带来更多的 ...
CSS3弹性盒模型flexbox布局基础版

最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案。另外本人还废寝忘食的翻译了国外的《CSS3弹性盒模型flexbox完整教程》和《CSS3弹性盒模型flexbox布局实例》,这么好的文章没有人来发现,实在是遗憾。
Bootstrap3的栅格化布局样式

栅格化布局,又称“网格系统”,是一种使用规则的网格阵列来指导和规范网页中的版面布局以及信息分布 Bootstrap2.3的时候还支持IE7,到了3之后,就跟IE7以下说拜拜了。前面已经发过一篇:Bootstrap 3.0的扁平化来了,有兴趣 ...
CSS3多列Multi-column布局

Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 columns CSS3 无 设置或检索对象的列数和每列的宽度。复合属性 column-width CS ...
使用Grunt来编译compass并压缩js代码

之前的一篇文章:前端开发自动化:compass+grunt 里面实现的功能有这么几个。编译compass代码并压缩,js代码合并并压缩。今天看到一篇文章,发现前面的这篇文章里面使用了多余的Grunt插件了。其实要实现上面这两个功能,只需要三 ...
前端开发自动化:compass+grunt

最近在使用这个grunt之后,感觉真的挺好用的,下面我将分享如何进行基础的前端开发流程。 1.使用sublime text2书写sass代码 2.用compass解析css源代码(不压缩) 3.使用grunt里面的插件cssmin进行压缩为 ...
x-webkit-speech实现语音搜索

该属性只在chrome11中有效,你可以用chrome打开试试看 实现方法就是在input里面添加一个x-webkit-speech。代码如下 <input type="text" x-webkit-speech/> 如果浏览器 ...