大伟的博客

懒了，或许是满地SNS网站的影响，周围写博客的朋友都懒了。。。来记录下最近的生活吧。最大的事情，就是我马上要当爸爸了，老婆的预产期是11月16日，我激动地期待着！为母子平安而日夜祈福！

我最近在成都出差，为华为赛门铁克公司做官网改版，在华为待了快一个月了，体验了一下传说中的华为！

成都是一个我觉得很不错的城市，除了天气之外（听说全年2/3的时间天都是灰灰的，让你觉得随时都像是要下雨）。

 看新闻说Chrome的Javascript引擎很强大，执行速度很快。就随便写了一个1,000,000次的累加放到IE和Chrome下测试，效果果然很明显！如下图：

脚本代码很简单，就是一段循环累加的：

这几天整理了一份《搜索引擎优化》的PPT，同事交流之用。主要内容有：

1. SEO常用术语解释
2. 如何让搜索引擎收录网站
3. SEO的目的
4. 站点自身内部的优化
5. 影响排名的外部因素
6. 常见的黑盒SEO手法

内容大多都是前辈们的东西，整理了一下而已，适合对SEO感兴趣但不熟悉的网页设计和开发人员阅读。

有兴趣的朋友可以在这里下载：《搜索引擎优化基础》

前段时间在论坛上有人问到一个淘宝网上的hover伪类实现的效果如果兼容ie6。
帖子：http://bbs.blueidea.com/thread-2854899-1-1.html
淘宝效果预览：http://list.mall.taobao.com/1343/g-s—–40-0–1343.htm

其实，问题很简单，就是hover伪类在IE6中得不到很好的支持，因为IE6只支持css1，而在css1中hover伪类只能针对a标签来起作用，看了一下淘宝的代码，他们的解决方法是：
首先，按照ie7/FF都支持的css2的写法来写。其次针对IE6不支持css2再做特殊处理。也就是通过javascript来弥补ie6下的不足。

这段javascript的原理是这样的：

根据某些特征找到需要添加hover效果的标签
对此标签添加onmouseover和onmouseout事件
在onmouseover事件中给对象赋予新的css class属性，同样，在onmouseout时移除该css class即可模拟成hover伪类的效果了。

这里有一个简单的示例，供大家参考！

前些日子看到小志发表的『xhtml+css实例』不规则导航的制作，刚好今天遇到了一个这样的问题。就对小志的修改完善了一下，相信有很多朋友都会遇到同样的问题。就把这个demo发出来，和大家分享一下。
预览地址：不规则导航条示例
具体技巧说明，请参考小志的博客：

http://www.linxz.cn/blog2/article.asp?id=128

蓝色理想8周年聚会，圆满结束了。认识了很多朋友，要感谢Cloudy、Apple虫、娃娃、ych13、柠檬等会员的精心策划，感谢广州会员的踊跃参与。引用一下ych13的致谢词：
[quote]
感谢Jxdawei,batieyes提出聚会的构思，并成立最初的组委会。后来batieyes临时有事赶回家，来不及参加聚会了。
感谢cloudy,娃娃，apple虫,海王后来加入组委会，大家一起努力成就了这次聚会的成功。
感谢czbad的一路来的支持，还特地带了气球去会场。（后来没用上）
感谢cloudy自费提供了活动的海报和ID贴纸。
感谢娃娃准备的文档和清单和财务上的打理。
感谢TogetherLLLL提供的活动方案。
感谢myvonne的帮忙，补充了很多活动上的细节，使得今天的活动得以顺利进行。
感谢apple虫做的娃娃，感谢jxdawei,czbad这两位财务官，感谢摄影师eezx,缺点，genous,apple虫，czbad,小林2001，如有遗漏请PM我补充上来。
感谢丁春秋的支持，感谢蓝色赞助的奖品，感谢ctxhhm赞助的奖品，感谢Missx的支持，感谢一直关注经典的朋友。不说来年，下次再聚过啦！
[/quote]

这次聚会时间安排上有点紧张，后边本来可以有更多的技术交流由于时间关系××了，期待下次！应部分会员要求，在总结帖放出我在聚会上的一个交流PPT、windows vista uxguide文档、Apple uxguide文档，需要写规范文档类的朋友可以参照学习一下，至于我的那个PPT，时间仓促，准备的不好，让大家见笑了。

记录一下到场会员：
Jxdawei czbad Cloudy Appleflowerpop ych13 娃娃 myvonne fairiy lwywyy1986 w3css cnliulin88 likeytom aoao Amer linling112(林农) gulu77 zoby bc1983蓝诃 sofiapeng yushiki cymeng fanxuan wondgergis ggzx iamlei 缺点 小林 genous netecflash 小志 wuanlong xiaojiepp echy Smile Yahoo

运气很差，经典娃娃、Mp3都被抢光了。

前奏帖：

http://bbs.blueidea.com/thread-2819303-1-1.html

总结帖：

http://bbs.blueidea.com/thread-2823911-1-1.html

现场相片放送帖：
G的角度看聚会

http://bbs.blueidea.com/thread-2823891-1-1.html

缺点记事本

http://bbs.blueidea.com/thread-2823895-1-1.html

切蛋糕视频

通常我们在制作上图的时候，会分别给四个div加上不同的css属性，来实现中间间隔。但我们更希望的是不需要对html标签做标识，直接能通过css实现，今天在论坛上小志提出了一个很不错的解决方案。使用overflow:hidden属性。或许很多人已经是这样用了，我没用过，觉得耳目一新。呵呵。其实道理很简单，我们按照正常的设置li的margin-right、margin-bottom属性，这样的结果自然会比我们期望的要多出来右边和下方的，这个时候我们通过ul的父级来设置width/height属性，然后overflow:hidden把多余的隐藏掉。好方法，呵呵！
请看效果预览页面：overflow排版
解决方法请看图：

预览地址：随机显示图片Demo

论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。先可以看一下预览效果：js实现select标签美化demo。

【功能需求】
1、调用要方便，做好之后应该像这样：

function loadSelect(selectobj){
//传入一个select对象就能将他的样式美化
}

2、不改变原有表单项，表单的页面代码不去破坏：

【实现思路】

第一步：将表单中的select隐藏起来。
为什么？很简单，因为这家伙太顽固了，用css根本搞不出来你想要的。所以把它杀掉。

第二步：用脚本找到select标签在网页上的绝对位置。
我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。

第三步：用脚本把select标签中的值读出来。
虽然藏起来了，但它里边的options我们还有用呢，统统取过来。

第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。

大致上就是这样了，接下来我们一步一步去实现它！

【准备工作】
1、想好你要把select美化成什么样子，并准备好相应的图片。我准备了两张小图，就是下拉箭头1和下拉箭头2，1是默认样式，2是鼠标移过来的样式。
2、写好一个普通的表单递交页面，比如下边这个。注意我给select定义了基本的CSS样式、在头部添加了调用js文件的代码、在body中添加了调用函数的脚本。

【编写javascript】

新建一个js文件并保存为select.js，剩下的工作我们全部在这个js中去完成。

函数名：loadSelect(obj);
参数：select对象

相关函数：

function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;

while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}

第一步：把select的绝对位置记录下来。一会替身上来就知道应该站那里了。
最后这个比较复杂一点，再解释一下，我们在做这一步之前，select的样子已经出来了，下一步就是再加一个div去模仿select被点击之后出现的下拉选项了。我们可以讲select标签的options通过javascript提取出来，把它写成这样：
基本上就这样了。还有些缺陷，有时间大家可以一起补充！

预览地址：javascript模拟select下拉
脚本下载：select.js

[本文由于在pjblog2wp过程中丢失了一些信息，请大家注意看demo页面的代码。]

今天蓝色的moby问我找一个树型菜单。就随便Google了一遍，没有找到合适的。obout的AJAX树控件做得很好看，也很专业。但不是基于标准设计的，而且代码非常的复杂。
就自己写了个简洁版的，只有二级的。预览地址

很多朋友在写页面代码的时候会过多地去考虑布局如何实现，其实是一种错误的思路，文档结构是可以脱离表现而存在的。先不要去管显示效果，这样才能写出比较好的页面代码，不至于回头一看全是div包着div的。

行为层要完成：
1：展开与收缩功能，其实就是display属性设置是否显示。
2：展开与收缩时的图标变化，用两张图片一个加号一个减号，用javascript变换背景图。
3：选中时的样式，当用户点击展开某一项时，给用户做个记号。