存档在 2010年10月

163邮箱让我猜

2010年10月17日

(撒花,这个问题已经解决了<!- – 2010.10.18 – ->)

问题重现,“开通会话功能后进入首页不作任何操作收件箱要等三分钟才显示未读数目”。

每天查看邮件,第一时间是想知道收件箱是否有邮件或邮件的多少,多么期待躺着一个新应用的邀请或几封情书。

最近发现当进入163邮箱(网页端)时并不能第一时间知道收件箱的未读数目,但可以计算,所以说163邮箱,让你算,让你猜。

多一步,是体验的一大步

如下图,登入时163邮箱会在主体区显示总未读邮件数目(包括收件箱、垃圾邮件、广告邮件和订阅邮件),事实上收件箱有两封未读邮件/新邮件,首次登入的页面并没有进行提示

根据垃圾邮件和其他两项的右侧小括号提示进行判断,收件箱没有未读邮件/新邮件 。但若清楚情况,可以计算 出收件箱未读的数目为 9-3-2-2=2 ,或者点击侧栏的任何一项就会显示收件未读数目。

提示重要的内容,要用户进行多一步的操作,是体验糟糕的一步。

(要立刻知道真相,请自带计算器)

哪个数字更重要?

» 阅读更多: 163邮箱让我猜

Photoshop中创建阴影微翻效果

2010年10月26日

简单讲述在Photoshop中创建一种让人感觉图形某角微微掀开的阴影效果。

方法很多,以下是一种。

开始

  • 矩形工具创建一个矩形
  • 继续矩形工具,先选择路径模式 ,创建一矩形路径。

Caution! Spongebob is watching U

2010年10月25日

换theme啦,Spongebob的主题。

为什么喜欢海绵宝宝?他善良。

  • 大眼睛是以海绵宝宝为主题的唱片 SpongeBob’s Greatest Hits 的封面。
  • footer里有小蜗,它是海绵宝宝的宠物,会“喵~”的叫,也不知道为什么蹦出了两个小白兔。
  • 404页很惊吓,点击这里可以看看。
  • 素材从google images搜,还有从NICK官网获取。

HTML/CSS细节

2010年10月14日

HTML/CSS的相对来说比编程简单,甚至简单很多。

可以用Dreamweaver快速学习上手,但最好学会手写,使用editplus/Notepad++。

不一定要懂最新的,例如HTML5/CSS3,但一定要懂标准的,简单的东西差别在于细节

以下是一些总结(持续更新)

编写XHTML而不是”HTML”

XHTML的一些特点

1)正确嵌套元素:<p><span></span></p>,不能<p><span></p></span>,span与p区交叉。

2)结束标签

3)处理空元素

4)区分大小写

5)引用的属性值

6)明确的属性值

7) 处理特殊字符<!–10.14更新–>

负边距实现超级流体布局

2010年10月12日

负边距除了可以进行简单的hack和实现适应浏览器的垂直和水平居中外,更多会用到在流体布局里。

今晚搜索更多相关内容的时候,从这里还学到一种结构多变(左右两栏宽度固定)但排列输出不变的负边距流体布局,我简称神奇流体布局,太神奇了,练习之余总结分享一下。

如下图,无论相关区域在相关区域里怎样滚动变换位置,输出位置都不变,left、main、right区都会分别从左到右排列。

重构也有好玩的东西,好玩之余也可以想想;

这样做的优点:

  • 结构可任意调整却不影响输出(信息量大而且用户网速慢时优先显示重要部分)
  • 优先让搜索引擎抓取重要内容
  • 用作高难度面试题(有必要?)
  • 忽悠小MM

这样做的缺点:

  • 代码不简洁,实现这样的三栏布局可用3个div解决,这里用了6个(致命)
  • 可能增加重构难度

代码如下(我要看demo),有一个地方想不明白,#in区的负边距可用大于mian宽度但小于1400px的任何整数值。#out区的负边距则可用大于right的任何整数值,为什么呢? » 阅读更多: 负边距实现超级流体布局