大伟的博客

之前为公司设计了一套内部使用招聘系统，目的就是将招聘过程中的简历筛选、初试、复试、终试等繁琐的线下操作全部无纸化操作，其中有一个功能就是安排面试，简历经过筛选后HR可以在系统中选择面试官、面试时间、面试地点来安排面试，当然我希望的是邮件能直接以Outlook Meeting的方式直接推送到面试官的日程安排中去，而不是以一份普通的通知邮件来告知面试官。如下图：

点击接受了之后，就直接出现在他的日历中，并且会提前提醒。

结果开发的同事做出来果然是简单的邮件通知，我猜想可能是需要基于Microsoft Office做一些额外的开发，但Outlook的会议请求是可以直接发给Gmail的。而且Goole日历与Outlook两者之间是互通的，那就基本上与Office无关了。

剩下的只能是格式了，Google了半天找到iCalendar格式的相关资料，普通邮件的格式是text/html，而会议请求、Google日历中的活动都是text/calendar的格式。但自己打开vs2008搞了个demo，捣腾了半天也发不出来，结果证明，我开发能力太菜了……

目前的解决方案倒是有一个，可惜是收费的。

www.aspnetemail.com网站上提供完整的解决方案[Samples]，下载了他的代码下来看了看，实现方法基本和我说的一样，只是他封装了dll，还搞了license，着实麻烦……说了这么多，其实我想说的是，哪位大哥帮忙写一下代码吧？这个需求应该还是比较普遍的，非常好用！希望有朋友能Share一下代码。

===========无奈的分割线=========

好长的假呀，买不到火车票的人好惨呀……

博客换域名1周了，分享一下经验，并记录一下现在的结果。

准备工作

1. 保留老域名iwcn.net的程序运行。
2. PJblog转换Wordpress
3. 修改Pjblog的default.asp及article.asp代码做301转向（永久迁移），[方法]。
4. 新博客生成sitemap.xml提交Google Webmaster、Bing Webmaster、Yahoo Site Explorer。

目前结果

• Google在老域名设置301转向的第二天，将PR4转移到了新域名。
• 目前搜索引擎收录情况：Google 82、Yahoo 18、Bing 14、搜狗 63、有道 4（3个过期）、百度 1。
• Alexa从1周前的1,900,000左右上升到1,116,746。

体会&分享

• 百度是无视301转向的，或者说他对301的反应是高级迟钝。
• 301转向一定要做首页内页全部做，这个工作量还是比较大的。
• Google对301的反应是最快速的。
• 做301转向的老域名及网页保留180天。
• Google网站管理员关于301转向的文章

最后感谢及时更新我的友情链接地址的朋友！

网页的圆角处理，其实最开始的九宫格的表格处理是挺方便的，只是现在都不用表格布局了，自然就被非法取缔了。呵呵。

微软的有VML画圆角，由于只是它自家的特产，大家也都不用了，再有就是Javascript的处理方法，很多都会影响页面性能，大家也都不爱用了。

剩下来的，就只能是老老实实地用背景图了。常用的方法有：

1、固定高度的情况下，我们通常把背景图的宽度拉到足够大，做一个大图，如下：

2、同样，固定宽度的话，我们就拉长高度，如下：

原理都是一样的，就是2头拼凑到一块形成整体。第二种方法会因为在实际使用中图片可能会拉太长，我们一般会将它分为3块来实现，即头部、中间(1px背景垂直拉伸)、和底边。

3、以上是一般网站局部使用圆角的常见处理方法，但如果是整站的UI都很圆的话，显然上面2个常见的方法就不是很好用了，到处都是圆角，高度宽度都随意变换的情况下。我们有必要来一个兼容性更好的背景图法了。这也必然把我们带到了最开始的“九宫格”模式中去了。

同样是基于这种“九宫格”处理的思想，在代码实现上各个网站也有各自的招。

1、头、尾各用3个标签(div or span)来实现圆角，中间直接用border-left、border-right属性来补2边。

2、用一个很大很大的圆角图片，然后来个若干层div嵌套实现，道理和最上面说的拉长高度和拉长宽度是一样的，它这个是双向无限拉长，比如Facebooke的这个圆角处理的背景图片是2000*16像素的尺寸。更大的我看到就是饭否的这张1000*1000像素的了。请看例子。

3、图太大了，总难免是有点舍不得用的，那就用小图，看淘宝网首页的，实现圆角的图片圆角就是这样的。它的原理是在标准的边框实现之后，再额外地向4个角加上一张小图片去补圆，它这个做法，除了图片是小的之外，在网页加载背景图之前，也是有一个比较好的视觉呈现的。示意图如下：

具体代码请看例子。

百度图片第一位！

百度视频第一位！

百度贴吧第一位！

百度百科第一位！

百度mp3第一位！

最近又出狠招，把百度“有啊”也搬上来了，现在还比较低调，搜手机、笔记本、服装、相机等热门关键词的时候还只是出现在第4位之后，不过看上面的图恐怕用不了多久它也到第一位了！开网店的朋友赶紧抓住机会哦，等哪天百度被狠狠地反垄断了一把就没的玩了！

唉，不厚道！

这几天整理了一份《搜索引擎优化》的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

通常我们在制作上图的时候，会分别给四个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页面的代码。]