土豆网新导航今天终于成功上线啦!
由于这次充分发挥了变态的优化手段，所以忍不住来炫耀一下：
1. 整个导航的样式图片只有一张：
大小7K的样子。不过如果考虑把LOGO拿掉，就只有大约2K。关于这点，我还在纠结中。
2. 很得意的实现了一个效果：两侧不同的背景自动延伸，见下图：
其实不容易的哦，得动动脑子，关键是要保证几个要点：
a. 两侧背景不同，但都得向外自动延伸
b. 中间的导航部分必须居中
c. 过渡部分的背景位置也要相对于居中模块固定
d. 这点也是最重要的：当把浏览器宽度缩小到比居中模块还小的时候，再将横向滚动条拉到右边，背景仍然会延伸。如果你不能体会，请试试看下面的代码：
<div style="width: auto; background: red;">
<div style="width: 900px; margin: 0 auto; background: blue;">
这是居中模块
</div>
</div>
当窗口小于900时，外面红色的部分就只有窗口宽度那么宽，这样页面拉到右边时会有一段白色。
3. 底部菜单项之间的分割线，是用CSS做的。当然，这个没啥好炫耀的，方法在两年前就有被提到了。正淳同学最后提到说为啥没见人这么用。OK，就试试看像土豆网底部菜单那样居中且宽度根据内容自适应吧。
呃，不过还是得谦虚一下：我现在已经变得很不爱学习了，所以一些新的CSS方法都不了解。很可能我这些雕虫小技也是被流传了好多年的了。反正它们都是我自个儿琢磨出来，如果很火星，就请大家赐教哈。
陳小河流: 2009-5-27 11:05 pm
呵呵，不錯的方法……
沒看你的實現的話我要模仿的話肯定是把下麵那條線當border直接使了……
化石: 2009-5-27 11:54 pm
为什么不用border而用背景图呢？
aoao: 2009-5-28 1:51 am
我觉得文件大小不是最关键的问题。
fireyy: 2009-5-28 8:49 am
用border的弊端就是高度的问题，不太美观
小麦: 2009-5-28 9:43 am
不用border的道理很简单：因为即使是那几个像素的窄条，也是有渐变的。忠实还原所有的设计细节是我们前端组的基本工作准则。
当然，还有一种实现方法就是用一个超长的背景图，比如3000px，但这样的话背景图就会很大。
小麦: 2009-5-28 9:50 am
@aoao: 其实，我也觉得文件大小并不那么重要，呵呵，相较而言，连接数更重要。
但之前有遇到在网络不稳定的时候，CSS图片下载得很慢，顶上那块导航就是一片白，看起来很不好~~所以导航图尽量小还是好的。
pengsir: 2009-6-2 4:41 pm
1280下导航视觉向右倾斜，下拉菜单被广告盖过
caii: 2009-6-2 4:50 pm
走错地方？！
5ivedance: 2009-6-5 7:35 pm
其实我个人喜欢土豆的设计,不过跟人感觉好像土豆的内容策划不怎么样,首页弄个什么专题感觉费力不讨好(我只针对第一眼进入用户眼睛的东西就是那个专题)。
相反,我同学一般都在看优酷的八卦,我不怎么感兴趣八卦,我不大喜欢那个设计,感觉磕磕绊绊的,但是首页无论是八卦还是新闻都能吸引很多人,腾讯那个弹出窗很烦人,可是八卦的顺序还是值得肯定的…
我觉得这是UCD出的问题吧,土豆主推的专题不是用户提供的吧。是有专门的编辑?再怎么专业的编辑有时候也会跑偏大部分人的喜好吧,而用户这么广泛的东西,喜欢什么最好由用户决定。包括右边那个大型视频广告,感觉也是骗点击的..弄那么大,如果有人误点了肯定有一丝不爽.
顺便说:喜欢土豆的导航条,但是播放视频时候一堆黑,难道只是设计师一厢情愿?有没有做过用户数据收集啊.我觉得黑色不应该是主色,最好的解释是纯黑的很少,不是说大家的都俗很可能的大家做的都符合用户或者说用户被其他设计“习惯“了！ 当然,这种习惯有时候不是否定的.比如win窗口右上角的”_“就是最小化,可是gmail的”工作表“那个”_”在缩小放大都没变就会感觉很不好.还有的小网站用那种表示进度的渐变旋转gif图片做icon,让用户以为还有很多东西正在下载中….
菜单的”更多“和右上角的”我的“是鼠标hover激活,可是搜索就得单击激活,个人觉得应该都hover或者都单击。不过这些到底怎么样才算好还是要用户数据算。
说土豆导航,,扯远了.不过说出了想说的~·
崔凯: 2009-6-16 5:56 pm
这个渐变色如果不是用PS放大的话，几乎看不出来。（可能是液晶显示器的问题）
我个人会选择border来实现。
不平等条约: 2009-6-20 11:07 am
有时候这样优化不一定好，闲暇时锻炼一下技术可行
鬼鬼: 2009-7-23 5:30 pm
把所有图标集合到一张图，QQ，网易好像很早就这么弄了。
小叶: 2009-10-31 2:47 pm
把图片集合在一张图片是很正常的……也是最好的方法了
辉舞世间: 2009-12-7 10:33 am
把图片放到一起主要不是为了减少访问服务器的次数吗？再就是同色的图放在一起很好，但你的橙色图和灰色图放在一起会不会抢他的色，还是只有渐变才会出现抢色的情况？
肉山: 2010-5-4 4:16 pm
CSS Sprite 优缺点都十分明显~
我觉得小范围内的 CSS Sprite 还是可以接受的，否则维护管理起来太麻烦