似乎xs.chengtu.com没备案暂时和谐了，模板图片什么的都看不到-。-

快毕业了

快去广州了

博客还要继续写下去！

工作还要继续做下去！

知识还要继续学下去！

加油！

现在要写毕业论文。

刚交了初稿还不知道要改多少编。

还有牙尖帮的页要做。

再见……

倒霉的学校还要回来考试！

不知道广州热不热啊~~~

激动！！！

嗯``希望面试顺利！工作顺利！

同志们！广州见！~~~

我最爱的Fireworks第一次由Adobe发布，会有什么惊喜呢？（之前的测试版好像并没什么变化...）

我一向都不太愿意用新东西，这个Fw cs3我还得等段时间再试。

Google英文站的个性化主页服务提供了“主题”，目前有7种主题可供选择。Google开始打扮自己了？

另外，我个人认为Google的个性化主页比微软的Live更出色，虽然还有不少瑕疵。

《CSS中的滑动门技术》一文中介绍了一种经典的CSS滑动门做法，即把标签图片的尺寸做的足够大（如下图），然后将标签划分成左右两部分，靠右侧较长的图片背景来实现滑动门的效果。

在参考了《100%点击区的滑动门》后我尝试了一些新的做法。

我的切图方式是这样的：

将标签的左角、右角及中间部分放在一张图片里。目的是减少HTTP请求，还可以让整个标签同时显示出来，而不是先下载好的部分就先显示出来。

Xhtml的代码如下：
<ul>
      <li class="on"><a href="tabTest1.html"><span>首 页</span></a></li>
      <li><a href="tabTest2.html"><span>美 女</span></a></li>
      <li><a href="tabTest3.html"><span>音乐盒</span></a></li>
      <li><a href="tabTest4.html"><span>to赵雪</span></a></li>
</ul>
很遗憾我在a里套了一个span，但是我将标签分为三部分，暂时也只能用span了。

CSS代码如下：
ul{
        list-style:none;
        margin:0;
        background:url(test3.gif) repeat-x;
        width:600px;
        height:28px;
        padding:13px 0 0 20px;
}

li{
        background:url(test2.gif) 0 -56px repeat-x;
        height:28px;
        line-height:28px;
        font-size:12px;
        font-weight:bold;float:left;
}
li a{
        background:url(test2.gif) 0 0 no-repeat;
        display:block;
        color:#069;
        height:28px;
        line-height:28px;
        text-decoration:none;
        float:left;
}
li a span{
        display:block;
        float:left;
        background:url(test2.gif) right -28px no-repeat;
        padding:0 15px;
        cursor:pointer; /*倒霉的IE有BUG，这样可以强制它显示手型鼠标箭头*/
}
li a:hover{
        color:#09C;
}

li.on{
        background-image:url(test1.gif);
}
li.on a{
        background-image:url(test1.gif);
        color:#FFF;
}
li.on a span{
        background-image:url(test1.gif);
}
li.on a:hover{
        color:#FFF;
}

最终效果

更多方法还在试验中...

The Adobe Illustrator CS2 WOW Book(附光盘)

情感化设计

人机交互(以用户为中心的设计和评估)