“学着玩儿的”目录存档

前端工程师常用工具

2010年01月17日,星期日

虽然有一段时间不做前端工程师,但还是免不了做前端的思维,碰到了很好的前端实用工具帖还是忍不住转了过来。这个帖子被转了好多次了,也不知道原本的作者是谁,但无论是谁都是万分的感谢,没有您的整理也没有大家的方便。

帖子整理了前端工程师常用的工具手册以及一些著名的相关博客,是工作中不可缺少的资料。

在线工具集

(更多…)

经典海量jQuery插件

2010年01月17日,星期日

海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面。

其中有些已经无法访问,或许是文件移除,或许是被封锁。大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们。

在此提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题。并且其中英文插件在转换成中文时注意编码,推荐utf-8。

jQuery插件-文件上传(File upload)

jQuery插件-表单验证(Form Validation)

(更多…)

CSS Hack

2010年01月17日,星期日

区别IE6与FF:

background:orange;*background:blue;

区别IE6与IE7:

background:green !important;background:blue;

区别IE7与FF:

background:orange; *background:green;

区别FF,IE7,IE6:

background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;

  • IE6能识别*,但不能识别 !important,
  • IE7能识别*,也能识别!important;
  • FF不能识别*,但能识别!important;
IE6 IE7 FF
* ×
!important ×

网页栅格系统研究(4):技术实现

2008年11月17日,星期一

前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。

Blueprint的实现

Blueprint是一个完整的CSS框架,栅格系统是它的一部分功能。我们来看demo页面

Blueprint的实现

Blueprint的实现

以上三栏布局的代码为:

<style type="text/css">
    .container_12 { margin: 0 auto; width: 960px }
    .grid_4 { float: left; margin: 0 10px }
</style>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

上面是基本功能,Blueprint还支持append-n, prepend-m, border等“高级”功能,这些就不细说了。Blueprint的特点简单总结如下: (更多…)

栅格分栏标准参考

2008年11月4日,星期二

1. 黄金分割标准:右边的大小一般是左边大小的黄金比例

2. 平分:在1024的分辨率下,一般采用330左右的分割

3. 两栏分割:左边660 右边260左右

4. 三栏分割:左边是200左右 中间400左右 右边300左右

5. 三栏分割:右边两栏之和是左边的0.618

6. 三栏分割:中间180 两边分别为380左右