2008 九月 | Heluyao's Blog

Archive for 九月, 2008

CSS或js实现行间交替背景色效果

2008-09-24 下午 - Javascript/Ajax, Web Development - background - CSS - javascript

　　本文介绍两种方法，都挺简单的，略懂前端的同志们都应该能理解的。

1.利用CSS控制行的属性：

下载: code.html

<style type="text/css">
ul { list-style:none; font-size:12px; line-height:20px; color:#666;}
ul li{background-color: expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');}
</style>
<ul class="myul1">
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
</ul>

　　通过判断奇偶数来确定li的背景颜色，很简单吧！

2.利用JS控制各行的交替背景。

下载: code2.html

<style type="text/css">
ul { list-style:none; color:#666; font-size:12px;}
.li01 { background:#EAF8FD; }
.li02 { background:#fff; }
</style>
<ul id="list01">
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
</ul>
<Script type="text/javascript">
objName=document.getElementById("list01").getElementsByTagName("li");
for (i=0;i<objName.length;i++){
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</Script>

　　两个方法都不错哦！值得推荐的！

No Comments » | 2,528 Views |

css解决中英混合链接下划线不对齐问题

2008-09-23 下午 - Web Development - CSS - 下划线 - 对齐 - 链接

　　首先声明，直接在页面里设置链接的时不会出现下划线对不齐的效果。只有当该元素或该元素的父元素带有vertical-middle属性时才会出现。

　　这两者的解决方法不同：

　　1.其本身具有vertical-middle属性时，直接在该元素上加zoom:1。这里值得说一句，w3c是不推崇使用zoom（触发块元素的layout），意思就是不能通过w3c的验证。

　　2.其父元素具有vertical-middle属性时，在该元素上加vertical-middle：baseline后就可以解决。

No Comments » | 2,516 Views |

2008改版最成功的十大网站

2008-09-22 下午 - Web Design, 乱七八糟 - 改版

　　导语：目前点评“2008年10佳改版网站”也许为时尚早，但2008年毕竟已经过去了9个多月，周四又同时有Twitter和FriendFeed两家网站改版，因此当前也算是评选“2008年10佳改版网站”恰当时机。而且，入围网站也具有较强的代表性。

　　到目前为止，入围“2008年10佳改版网站”的分别为Twitter、Facebook、FriendFeed、雅虎、MySpace、Digg、MobileMe、 LinkedIn、Delicious和Last.fm。

　　此外，CNET、Engadget、《华尔街日报》网络版、TechCrunch、CenterNetworks、Mashable、Bebo, Revision3和coCommen等网站也进行了改变，用户反馈也不错。以下为2008年10佳改版网站，排名不分先后：

1. Twitter

　　Twitter的改版并不是很激进，与原版页面出入不大。主要变化在于两方面：一是简化界面，二是减少网页所加载资源。最显著的变化是标签上的变化，新版页面把顶部的标签转移到右部。这有利于用户访问，更重要的是，这是出于投资需要。将来，Twitter准备添加更多标签，而顶部空间已经明显不足。

2. Facebook

　　Facebook新页面把聊天与应用开始工具栏相结合，更重要的是，添加内容，对内容进行分类变得更容易。新页面还充分考虑到了宽屏趋势，充分利用两侧多出的空间。对于Facebook而言，此次改版是最激进的一次，因此也遭到了部分用户的反对。

3. FriendFeed

　　新版FriendFeed页面的最大变化是将导航标签从顶部移到左侧，充分利用了宽屏优势。更重要的是，在增加新功能的同时，页面内容没有丝毫挤压感。

4. 雅虎

　　雅虎此次大胆改版削减了一些冗余内容，添加了一些类似于My Yahoo服务的实用功能。更重要的是，用户可以对很多内容进行定制，甚至面向第三方互联网应用开放。例如，在屏幕右侧添加Netflix等电影网站链接。

5. MySpace

　　MySpace于6月中旬进行了改版，改版后的新页面更加整洁，且突出了用户创作内容。更重要的是，新页面增加了新的搜索、编辑器和播放器等实用工具。

6. Digg / Digg mobile

　　在保留核心服务的基础上，Digg和Digg移动版对原版页面进行了改善。新版页面增加了推荐引擎，确保用户以最快速度找到感兴趣的内容。

7. MobileMe (原.Mac)

　　新的MobileMe Web电子邮件服务更加现代化，陈旧的.Mac平台被一些基于云计算的Web应用所取代，并与多种设备同步。其中，最大的变化之一是增加了日程安排、文件和联系人信息管理工具等。

8. LinkedIn

　　LinkedIn于今年2月改版，改版幅度不大，但增加了一些实用服务。与旧版Facebook页面有些相似，LinkedIn把工具条和标签都转移到了左侧。

9. Delicious

　　Delicious于7月进行大幅改版，新版页面与旧版完全不同，几乎每一处都经过重新设计，标签管理功能得到极大强化。此外，Delicious的域名也从del.icio.us直接改为delicious.com，在很大程度上方便了用户访问。

10. Last.fm

　　7月中旬，音乐社交网站Last.fm进行了彻底改版，无需同步和共享当前音乐数据库，只需提供乐队名称，用户即可获得音乐家推荐。

No Comments » | 1,075 Views |

推荐：艾薇儿现场超棒的女子

2008-09-19 下午 - thinking, 乱七八糟 - music - 演唱会

　　两年前，坐在上班的车上，司机是个年轻的小伙子，放了一首让我惊讶得不行的英文歌。由此知道了—艾薇儿。

　　有一点，我是个喜欢实力派的人，更喜欢会做现场的艺人。国内的张震岳也不错哦。现场很棒的，以上台就一曲接一曲的唱，似乎永远体力充沛。着实是用歌喉征服现场观众。

　　做项目的时候在6间房发现这个视频，高清版的，推荐出来大家看看。现场跟唱片里差别不会很大吧，而且还更有震撼力。

No Comments » | 1,256 Views |

《站酷志》第3期

2008-09-18 下午 - Web Design, 乱七八糟 - 设计

　　《站酷志》第3期，姗姗来迟。相伴近一年时间，更加了解设计师朋友们的需求，更加详尽的设计比赛回顾，更加贴心的实用教程和制作心得。本期用心奉送350P，包括10组人物专访，5例实用教程，1堂设计课程，及多位国内年轻设计师作品欣赏。第三期的《站酷志》依旧期盼大家更多的建议。

　　《站酷志》是我们的，中国年轻的设计师们！

　　http://zmag.zcool.com.cn/zmag03.html

No Comments » | 1,074 Views |

Chrome对CSS各属性的支持

2008-09-16 下午 - Web Development - Chrome - CSS

　　Chrome，对于做前端开发的伙计们来说应该不陌生。前阵子谷歌推出的浏览器。本人在推出当天就下载试用了，但不到10分钟就又卸载了。没什原因，用惯遨游，够了！等全球很多用户都使用Chrome的时候，我再用它也不迟。到了那时不用都不行了，被“逼”的，就好像火狐“逼”着很多人一样。其实不能这样说，毕竟那么多的用户在使用它，说明它还是好的，就安全性而言，应该算高级别了！

　　回到正题，又扯远了！Chrome对于CSS，可以说跟SAFARI不相上下。对于CSS所有的高级属性它都能很好的支持！这点很让人惊喜哦~~！

　　更详细，请看： http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

No Comments » | 588 Views |