阿辛的网志

先给各位朋友拜个早年！祝大家龙年快乐，健康、工作各种好！

2011年，对我来说算是比较平淡的一年，唯一的大事是把婚结了。工作上平平淡淡，忙忙碌碌，不过很多方面都有了明确的方向。

2012年，新的一年里面，希望自己能坚持自己的方向，专注，简单的去做好。对诱惑要忍得住；对错过要放得开；对鸡肋要敢舍弃！

两个都是小技巧问题，就写一起吧。其实并不是失效，而是用的方法不对。

先说z-index，当position为relative或者absolute或者fixed的时候，可以使用z-index指定当前元素的层级关系，值越大元素就越在上面，从而实现盖住下面元素的目的。但是遇到下面这种情况，会发现z-index值大的确盖不住值小的元素：

1
2
3
4
5
6
7
8
9
10

<style>
li { position: relative; width: 100px; height: 50px; background: blue; margin-bottom: 10px; z-index: 1; }
a { position: absolute; top: 0; left: 0; display: block; width: 80px; height: 100px; }
.a1 { background: red; width: 50px; z-index: 3; }
.a2 { background: yellow; z-index: 2; }
</style>
<ul>
    <li><a href="#" class="a1">xinple</a></li>
    <li><a href="#" class="a2">org</a></li>
</ul>

代码运行结果

可以看到，第一个li里面的a元素z-index为3，但是盖不住第二个li里面z-index为2的a元素（如果不设置li的z-index，firefox可以但IE6不行）。这是因为z-index会传递父元素的值，当第一个li中的a去覆盖第二个li里面的a时，因为父元素li的z-index值为1，所以盖不住值为2的元素了，这时候只需要设置父元素的z-index的值大于下面的a2，就实现了：

1

<li style="z-index:4"><a href="#" class="a1">xinple</a></li>

代码运行结果

如果是在同一个父元素下面，则按照z-index值大小来层叠，注意，不管父元素z-index值多大，子元素都能盖再其上面。 浏览全文 »

很少的时候，界面上需要一个固定位置的块，不论页面怎么滚动，始终停在它的位置，比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用，很方便，但是万恶的IE6却不支持，下面讲两种方法解决这个问题。

方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13

*html {/* 只有IE6支持 */
    background-image: url(about:blank); /* 使用空背景 */
    background-attachment: fixed; /* 固定背景 */
}
#box {
    /* 非IE6浏览器使用固定元素 */
    position: fixed;
    top: 0;
    left: 0;
    /* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}

这个方法要注意的是，*html使用固定位置空背景目的是解决滚动的时候抖动的问题，原理是这样，滚动页面浏览器重新计算出网页，然后执行css，所以固定元素产生延迟的抖动，使用固定背景之后，在滚动的时候先执行了css，再重新计算网页，所以没有抖动问题了。
document.documentElement.scrollTop是滚动条偏移的值，可以根据这个来设置位置，比如document.documentElement.scrollTop+200或者使用margin定位也行。

方法二：纯css的解决方法

1
2
3
4
5
6
7
8

html { _overflow: hidden; }
body { _height: 100%; _overflow: auto; }
.box {
    position: fixed;
    left: 10px;
    top: 180px;
    _position: absolute;
}

原理很简单，滚动条是body的滚动，固定元素是相对body定位，那么把它设置窗口那么高，不就一直是在窗口那个位置了？

最后，我选择的是方法一。
虽然第二种看起来简单，但是我想直接设置了html或者body的height和overflow可能会带来未知的界面bug，不太敢用。第一种方法感觉安全一些，而且可以查看淘宝网，也是用的第一种方法。

现在HTML5越来越流行，淘宝网很早就开始使用了HTML5的标签了。我因为工作忙一直迟迟没有使用，直到前一阵实在有点忍不住，就一口气把自己的博客用HTML5重构了。

回想五六年前的网站重构，轰轰烈烈，从table到div，从HTML4.0怪异模式到XHTML tranditional到XHTML strict重构了几遍。这次估计因为IE浏览器的限制不会那么流行。但是HTML5是发展的必然趋势，IE9和其他非IE核心的浏览器都已经支持的很好。可喜的是，现在已经有了方案使得小于IE9版本的IE浏览器支持HTML5标签：HTML5 enabling script 而且细心的朋友会发现，淘宝网也是使用的这个js。

原理就是通过Javascript的document.createElement("header");来创建标签，这样就能正常使用css来进行样式定义了(注意官方给出的调用方法，只会在小于IE9版本的IE浏览器才执行此js来创建HTML5标签)。创建的新标签没有block属性，所以我们的css reset还需要加入对新标签的定义例如：header, nav, section, article, aside, footer { display: block; } 浏览全文 »

目前我大部分时间是在做前端开发，对于html/css/javascript(主要是jQuery)感觉写的已经麻木了(除了手里的一个AJAX整站的web2.0项目还能在用户体验功能上做的有趣些而得到开发的乐趣)，而html5/css3由于杯具的IE不能很好的全面使用。所以我在想如果还要继续提升前端开发的乐趣，只能从写代码上面再提高一些，于是想到了vim。

虽然很久以前(大约一年)就想试试vim，但是往往因为时间不够/感觉vim上手麻烦而一直没有使用。直到这几天手里面项目多起来激发了我的热情，虽然说项目越多时间越紧张，但这种刺激却能很好的激发我学习的热情。怀着“磨刀不误砍柴工”的信念重新装了(g)vim。一研究就是三天过去了。下面总结下这几天的弯路和一些笔记。(因为有太多的vim学习资料，所以这里不会长篇大论记录什么快捷键啥的)

首先，zencoding for vim让我走了点弯路，原因是其快捷键“<c-y>,”，注意有个逗号！可郁闷的是，我在windows下的gvim里面按不出来！于是想了各种办法，把gvim的<c-y>快捷键去掉，感觉不爽，插入模式下<c-y>重做还是比较有用，然后考虑换快捷键，结果就是看到恐怖的快捷键列表几乎找不到可以用的快捷键。最后百般无奈的时候不小心按了<c-y>放开然后再按“,”，发现好了，真是比较233。所以和我一样使用windows下gvim的朋友，zencoding快捷键按不出来的时候，不要同时按“<c-y>,”，按完ctrl+y放开后立即按逗号就好了。

然后装了
css.vim (写css的时候颜色后面加上该颜色的背景，方便区分颜色)
NeoComplCache (自动完成)
NERDTree (侧边栏文件目录树)
Vim Template (以模板新建文件)
vimtweak (使窗口半透明)
xptemplate (快速插入代码片段)
(因为主要是写html/css/javascript所以ctags和taglist感觉暂时不需要，先不装了，以后慢慢来。)

于是，装了这些之后，用vim写html/css，简直就是爽死了。

update: 2011/05/24
window下gvim会在保存文件时候最后多一个回车符，导致用其他编辑器打开的时候总是发现最后多了一个空行。
vimrc里面增加：autocmd FileType * setlocal noeol binary fileformat=dos 就好了
参考：VIM Disable Automatic Newline At End Of File

2011年2月27日，星期天，结婚了。早晨起来很大的雨，到了8:08出门接新娘的时候无雨，等接到新娘九点多返回的时候还见到了一点阳光，直到晚上放完烟花又开始了一点雨，整个过程非常的顺。

感谢所有需要感谢的人，谢谢！

婚后，可以更加专注于事业了，本来想先立业后成家，没能实现，现在成家后立业还有机会，希望能干点有价值的事情出来。

婚后继续淡定的专注。