<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[SMbey0nd's Blog]]></title>
  <subtitle type="html"><![CDATA[像Mario一样飞]]></subtitle>
  <id>http://www.SMbey0nd.com/</id>
  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/" /> 
  <link rel="self" type="application/atom+xml" href="http://www.SMbey0nd.com/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2008-12-01T18:34:18+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[第三届D2速写（关于前端协作）]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=6" label="Front-End" /> 
	  <updated>2008-12-01T18:34:18+08:00</updated>
	  <published>2008-12-01T18:34:18+08:00</published>
		  <summary type="html"><![CDATA[<img src="http://www.SMbey0nd.com/attachments/month_0812/o2008121181354.jpg" border="0" alt=""/><br/>《前端敏捷开发-质量与效率的战争》 -- 许湛(Justin) From AliUED<br/><br/><img src="http://www.SMbey0nd.com/attachments/month_0812/v2008121181817.jpg" border="0" alt=""/><br/>《IE8的新特性及微软下一代前端技术预览》 -- 王超群 From Microsoft<br/><br/><img src="http://www.SMbey0nd.com/attachments/month_0812/b2008121181949.jpg" border="0" alt=""/><br/>《<a href="http://www.taobao.com" target="_blank">淘宝</a>网的前端团队组织结构剖析》-- 怿飞 From TBUED<br/><br/><img src="http://www.SMbey0nd.com/attachments/month_0812/f2008121181955.jpg" border="0" alt=""/><br/>《土豆网的前端团队组织结构剖析》-- 小麦 From 土豆网<br/><br/><img src="http://www.SMbey0nd.com/attachments/month_0812/12008121181639.jpg" border="0" alt=""/><br/>叽歪.de与正在叽歪de人<br/><br/>=====================华=丽=的=分=隔=====================<br/><br/><strong><span style="font-size:14pt">首先祝贺第三届D2论坛胜利闭幕：）</span></strong><br/><br/>　　上海是一个充满了现代气息的城市，而此次土豆网所选择的会议地点，没有那种城市中的浮躁和喧闹，而是多了一份田园式的安逸平静。话说当天阳光明媚，和同事OneMax下了地铁1号线后，直接赶往目的地。比预想的要好找得多，不到10分钟就看到了屹立在我们面前的建工锦江大酒店。12:30准时赶到会场5楼，直接看到一个支付宝招聘的易拉宝，而签到处就在旁边。小心翼翼地拿出已经褶皱了的珍贵的D2邀请函，PL的前台MM审查了一下送还给我们并附赠了两张D2贴纸和一个神秘信封，没来得及看就亟不可待的冲进会场……<br/>　　场地有两个大投影屏幕，正中的屏幕显示讲演的PPT内容，右侧屏幕显示实时刷新的D2叽歪讨论组--在会议现场，每个人都可以针对会议内容做一些简单的评价分享到这里，这个创意挺有意思的。<br/>　　刚入座不久，抽奖环节开始了，看着屏幕上飞快闪过的人名，突然感觉这个抽奖程序似曾相识……好像是以前云谦同学给我看过的某个东东，嘿嘿。貌似中午签到的名字不会输入到抽奖名单列表中，看各种人名闪了好长时间也没见自己名字，很残念。奖品好像是TBUED某个MM参与的新书，恩，《悟透JavaScript》，还有其他的一些什么东东。<br/><br/>=====================<br/><br/>　　残念过后，下午第一位演讲嘉宾闪亮登场，在这里对每一个精彩的演讲做一个简单的笔记和总结：<br/><br/><strong>《前端敏捷开发-质量与效率的战争》 -- 许湛(Justin) From AliUED</strong><br/><br/>主要内容：结合<a href="http://www.alibaba.com" target="_blank">阿里巴巴</a>的实际软件开发流程，系统地讲述了前端开发部门可以提高效率和质量的开发模式流程，并且针对若干开发过程中遇到的问题，介绍了很多具有针对性的解决方案。<br/><br/>要点：<br/>&nbsp;&nbsp;1.开发要避免混乱局面，统一目标：明确目的，量化目标。<br/>&nbsp;&nbsp;2.前端开发与PD的配合：<br/>&nbsp;&nbsp;&nbsp;&nbsp; a.不要抹杀PD的想法和创意。<br/>&nbsp;&nbsp;&nbsp;&nbsp; b.给PD提供解决方案，并告诉他实现这些想法所需的风险成本，并给出自己的实际建议。<br/>&nbsp;&nbsp;3.设计和规范文档的意义：<br/>&nbsp;&nbsp;&nbsp;&nbsp; a.为开发作指导。<br/>&nbsp;&nbsp;&nbsp;&nbsp; b.确保产品质量。<br/>&nbsp;&nbsp;&nbsp;&nbsp; c.帮助后人理解。<br/>&nbsp;&nbsp;4.解决问题的原则：<br/>&nbsp;&nbsp;&nbsp;&nbsp; a.客户第一。<br/>&nbsp;&nbsp;&nbsp;&nbsp; b.结果导向。<br/>&nbsp;&nbsp;5.需求变更需要正规化的流程。<br/>&nbsp;&nbsp;6.如何应对外界干扰：<br/>&nbsp;&nbsp;&nbsp;&nbsp; a.闭关。<br/>&nbsp;&nbsp;&nbsp;&nbsp; b.内部明确细分工。<br/>&nbsp;&nbsp;&nbsp;&nbsp; c.确定人力资源计划。<br/>&nbsp;&nbsp;&nbsp;&nbsp; d.对相关人员进行培训。<br/>&nbsp;&nbsp;7.产出质量：<br/>&nbsp;&nbsp;&nbsp;&nbsp; a.可用(基础)。<br/>&nbsp;&nbsp;&nbsp;&nbsp; b.易用(提升)。<br/>&nbsp;&nbsp;&nbsp;&nbsp; c.体验(提升)。<br/>&nbsp;&nbsp;8.工作流程文档化。<br/><br/>个评：不得不说Justin的讲演功力很专业，思路清晰，逻辑性强，思维也很敏捷，整个讲演过程如行云流水一般，非常顺畅。感觉不足的是，可能由于时间太紧，讲演时缺少对细节的描述，很多地方一语而过；在Q&amp;A的时候，有些问题回答的比较空泛，并没给出实质的回答，或者所答非所问；讲演的主题敏捷开发，是立足在一个中大型团队中的流程，对于其他的小团队，很多的流程并不适用；一些思路和建议很有启发性，如“文档化”“解决问题的原则”等。<br/><br/>语录：“我们把这个文档，叫做人肉文档”，“你提的这个问题，非常好”……<br/><br/>　　接下来是下午的第二位嘉宾：<br/><br/><strong>《IE8的新特性及微软下一代前端技术预览》 -- 王超群 From Microsoft</strong><br/><br/>要点：<br/>&nbsp;&nbsp;1.Accelerators加速器。<br/>&nbsp;&nbsp;2.Web Slices。<br/>&nbsp;&nbsp;3.改进功能的Search。<br/>&nbsp;&nbsp;4.Compatibility兼容性：<br/>&nbsp;&nbsp;&nbsp;&nbsp;a.【IE=5】Quirks Mode<br/>&nbsp;&nbsp;&nbsp;&nbsp;b.【IE=6】IE6 Standards Mode<br/>&nbsp;&nbsp;&nbsp;&nbsp;c.【IE=7】Strict Mode<br/>&nbsp;&nbsp;&nbsp;&nbsp;d.【IE=8】IE8 Standards Mode<br/>&nbsp;&nbsp;5.通过W3C CSS2.1，W3C HTML，以及Acid2的检测。<br/>&nbsp;&nbsp;6.IE8使用IE7渲染模式的几个方案：<br/>&nbsp;&nbsp;&nbsp;&nbsp;a.通过&lt;meta/&gt;tag让IE8用IE7的渲染模式。<br/>&nbsp;&nbsp;&nbsp;&nbsp;b.IIS的自定义HTTP Response Header信息。<br/>&nbsp;&nbsp;7.Developer Tools开发者工具。<br/>&nbsp;&nbsp;8.丰富的富媒体体验。<br/>&nbsp;&nbsp;9.SilverLight介绍。<br/><br/>个评：这大概是整个下午最让人感觉轻松快乐的一个讲演了。不管怎么样，至少这个来自MS的技术策略顾问给人感觉很真诚，就像叽歪上的实时点评：“这哥们忒实在了！”。IE8的新功能和特性估计大多数同行们心里都有数，有价值的东西也不多，这个讲演可以基本定性为IE8的产品推广时间，这多多少少会让人有点厌烦情绪。不过，现场的气氛从最开始的有点怀疑和敌意的态度，最终也被他的真诚打动了，从大家的掌声中可以感受到对MS的鼓励和期待和对这满头大汗哥们的真诚的肯定。<br/><br/>语录：“Firefox有的，我们也有了！”，“我们也通过Acid2了”，“<a href="http://www.taobao.com" target="_blank">淘宝</a>这个页面，太复杂了，我们换个简单点的”，“我们已经支持CSS2.1了”，“相信我，这是最后一次了”……<br/><br/>　　第三位：<br/><br/><strong>《<a href="http://www.taobao.com" target="_blank">淘宝</a>网的前端团队组织结构剖析》-- 怿飞 From TBUED</strong><br/><br/>要点：<br/>&nbsp;&nbsp;1.我们都是Devigner(Developer+Designer)。<br/>&nbsp;&nbsp;2.<a href="http://www.taobao.com" target="_blank">淘宝</a>的前端开发人员分配比例：<br/>&nbsp;&nbsp;&nbsp;&nbsp;a.前端开发工程师(8)<br/>&nbsp;&nbsp;&nbsp;&nbsp;b.资深前端开发工程师(4)<br/>&nbsp;&nbsp;&nbsp;&nbsp;c.前端架构师(1)<br/>&nbsp;&nbsp;3.组织结构(*为即将组建的)：<br/>&nbsp;&nbsp;&nbsp;&nbsp;a.日常组(5)，负责处理日常维护等事务处理<br/>&nbsp;&nbsp;&nbsp;&nbsp;b.项目组(5)，负责新项目的开发<br/>&nbsp;&nbsp;&nbsp;&nbsp;c.研发组(3)，负责研究开发公用组件和工具<br/>&nbsp;&nbsp;&nbsp;&nbsp;d.性能优化组*，负责前端优化<br/>&nbsp;&nbsp;&nbsp;&nbsp;e.前端安全组*，负责前端安全<br/>&nbsp;&nbsp;&nbsp;&nbsp;f.前端测试组*，负责前端的测试<br/>&nbsp;&nbsp;4.D2的由来。<br/><br/>个评：虽然没有Justin那样好的讲演口才和功底，但怿飞言语中所流露出的充满了理想主义的坚定和执着，打动了在场的每一个人。怿飞的讲演，一度让我们感觉热血沸腾，斗志激昂，甚至感觉身边每一个人都是出生入死的战友。至少我是这么感觉：）详细的了解了<a href="http://www.taobao.com" target="_blank">淘宝</a>前端的组织架构，头一次发现原来前端开发也可以细致的分成这么多的组。Q&amp;A时有个MM问，前端开发不会JS是否可以？怿飞的回答（大概的意思）：网页是由结构、表现、行为组成的，少了任何一块，都是不完整的。虽然今后的岗位会有细分的趋势--即分为CSS开发方向（网页重构）和JS开发方向等等，但是作为一个前端开发人员，掌握这三者并学习这些知识是有必要的。个人感觉非常认同。<br/><br/>语录：“D2论坛开设的目的，是为了提高前端开发在业界的地位，同样也是为了提高大家的工资”“……我们称之为Day2，也就是D2的前身”“Developer + Designer”<br/><br/>　　接下来是最后一位：<br/><br/><strong>《土豆网的前端团队组织结构剖析》-- 小麦 From Tudou.com</strong><br/><br/>要点：<br/><br/>&nbsp;&nbsp;1.工作流程图。<br/>&nbsp;&nbsp;2.组织结构（跨部门的结构）：<br/>&nbsp;&nbsp;&nbsp;&nbsp;a.广告部--&gt;前端(Flash)<br/>&nbsp;&nbsp;&nbsp;&nbsp;b.研发部--&gt;前端<br/>&nbsp;&nbsp;&nbsp;&nbsp;c.产品部--&gt;UI设计<br/>&nbsp;&nbsp;3.每周一次UI例会。<br/>&nbsp;&nbsp;4.配合越默契的成员，越适合分开。<br/><br/>个评：土豆的小麦非常优雅淡定，就像土豆所散发出来的气质一样。小麦提出的“配合越默契的成员之间，越利于分开”观点很独特。土豆组织结构中，前端、设计之间是跨部门分开的，这种方式有弊有利，弊是部门之间横向的交流或解决问题，需要跨越部门进行操作，要花费一些时间和精力成本；而利则是这种结构有利于纵向的沟通--比如前端和后端之间的沟通，UI设计和PD、ID之间的沟通。前端和UI设计，对于前端和后端之间的默契度更高，而且前端与后端有更多的内容需要交流，因此纵向的沟通更需要更多的时间。最终结论，如此安排在一起是利大于弊的。<br/>第三届D2论坛，就在小麦带给我们的安静中落幕了。<br/><br/>语录：“OK，接下来……”“OK”。<br/><br/>==================<br/><br/>　　这是我第一次参加D2，整个会议是在十分平静安逸的气氛中进行的，可以感觉得到在场的每一位来自各地前端开发同仁们的脸上都泛着红光，可以感觉得到他们也是跟我一样的心情：兴奋、喜悦、满足。D2确实是属于我们自己的节日。<br/>　　由于各种原因，我们没有参加上午的会议（Flash专题），而是直接参加的下午场，多少有一些遗憾的感觉。D2论坛带给我们的意义不再多说了，感觉不足的是概念性的东西过多，除了很多新颖的启发性的思路，给人感觉实际性的东西少了一些，大家互相之间也没有形成很好的交流和互动氛围。大概和这次的主题也有一些关系吧。<br/>　　现在开始，期待下一届更加丰富和精彩的D2。<br/><br/>===============华=丽=的=分=隔==================<br/><br/>后记：<br/>1.会议下课时间，在抽烟时认识了两位TC的朋友，后来回家翻看名片时才发现其中一位是传说中的<a target="_blank" href="http://www.pjhome.net" rel="external">舜子</a>(PJBlog作者)，看来D2论坛真的是卧虎藏龙。代表本Blog向舜子致意，再次感谢他为我们带来了那么NB的BLOG程序。 <img src="http://www.SMbey0nd.com/images/smilies/Face24.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/><br/>2.神秘信封中是一张Firefox的贴纸和两张D2的贴纸，太可爱了！<br/>3.感谢TBUED，感谢土豆网，感谢灯光音响，还有一个聋哑的姑娘，感谢各种TV，将来还有可能感谢CCTV <img src="http://www.SMbey0nd.com/images/smilies/Face58.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/80.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=80</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[第三届D2即将开幕]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=9" label="My Life" /> 
	  <updated>2008-11-11T23:03:43+08:00</updated>
	  <published>2008-11-11T23:03:43+08:00</published>
		  <summary type="html"><![CDATA[<a target="_blank" href="http://www.d2forum.org" rel="external"><img src="http://www.SMbey0nd.com/attachments/month_0811/02008111123024.jpg" border="0" alt=""/></a><br/><br/>第三届D2大会由土豆儿在11月29日盛大召开in上海。<br/>有兴趣的同志们赶快去报名吧！<br/><br/>忐忑地等待邀请中…… <img src="http://www.SMbey0nd.com/images/smilies/Face67.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/78.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=78</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[Spotlight on Mac 2008]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=9" label="My Life" /> 
	  <updated>2008-10-15T02:28:15+08:00</updated>
	  <published>2008-10-15T02:28:15+08:00</published>
		  <summary type="html"><![CDATA[<img src="http://www.cnbeta.com/upimg/081014/zhangxiaolu_235042.png" border="0" alt=""/><br/>今天睡得晚，居然意外的赶上Mac Books的<a target="_blank" href="http://www.cnbeta.com/articles/67044.htm" rel="external">新产品发布会图文直播</a>。老乔依旧很帅很健康。<br/>==================================<br/>MacBook Pro新品第一种型号<br/>$1999 for 15.4&#34; LED-backlit display, 2.4GHz Intel Core 2 Duo/3MB L2, 2GB 1066MHz DDR3 memory, both NVIDIA chips, 250GB hard drive, slot-loading superdrive<br/><img src="http://www.cnbeta.com/upimg/081015/alect_012724.JPG" border="0" alt=""/><br/><br/>第二种<br/>$2499, 15.4&#34; screen, 2.53GHz, 6MB L2, can upgrade any model to 2.8GHz<br/><br/>MacBook Air也得到了升级 佩戴128GB的SSD 或者 120GB的硬盘 并且使用Nvidia 9400M显卡<br/><br/>iMac新品<br/>24寸，分辨率1920*1200，内置摄像头和mic，音箱以及三个USb<br/><img src="http://www.cnbeta.com/upimg/081015/alect_013941.JPG" border="0" alt=""/><br/><br/>新MacBook由1099调整到了999，设计工艺上和MacBook Pro相似<br/><img src="http://www.cnbeta.com/upimg/081015/alect_014040.JPG" border="0" alt=""/><br/><br/>新的MacBook已经降到了$999，大哥你再降一点吧再降一点吧再降一点吧再降一点吧再降一点吧……看着这些强悍的让人半夜流口水的东东，实在是受不了了。热血沸腾吧，我誓要化口水为力量！F5<br/>真希望一会的梦里可以再美美地歪歪一下。<br/>停止没出息的呻吟了，按时尿尿，洗洗睡觉。 <img src="http://www.SMbey0nd.com/images/smilies/Face67.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/><br/><br/><img src="http://www.cnbeta.com/upimg/081014/zhangxiaolu_234803.jpg" border="0" alt=""/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/77.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=77</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[关于background-attachment的研究]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=6" label="Front-End" /> 
	  <updated>2008-09-11T18:07:53+08:00</updated>
	  <published>2008-09-11T18:07:53+08:00</published>
		  <summary type="html"><![CDATA[更新：<br/><span style="color:Red">Up&#100;ate 2008-9-12 14:59:57：<br/>感谢同事OneMax的提醒：<br/>background-attachment是在设置fixed时才是相对body定位；<br/>IE7是支持background-attachment：scroll的；<br/><br/>我发现了很多疏漏之处，马上重新整理了一下。<br/>关于background-attachment，针对<strong>IE系列浏览器</strong>的特性如下：</span><br/><span style="color:Green"><strong><br/>IE6：默认效果scroll，设置scroll效果正常，设置fixed正常。（IE6完美支持；和标准浏览器的表现却天壤之别）<br/><br/>IE7：默认效果scroll，设置scroll效果正常，设置fixed背景图像位置重置。（一半像IE6一半像IE8，承上启下？）<br/><br/>IE8：默认效果fixed，设置scroll后是fixed效果，设置fixed背景图像位置重置。（最接近标准浏览器的表现）<br/></strong></span><br/><span style="color:Red">希望通过此整理，对background-attachment会有更清晰的认识：）<br/><br/>IE系列，在这方面的表现，的的确确令人头痛。个人感觉IE7目前的状况是比上不足比下有余，食之无味弃之可惜。对用户来讲或对开发人员来讲，都是很让人别扭的一款浏览器。希望IE高级版本能尽快取代老版本浏览器形成统一，也希望Windows7能取代XP和惨死的Vista，捆绑着最新版的IE浏览器，带着开发人员又爱又恨的感情，在不久的未来迅速普及下去……再说就扯远了，继续工作。 <img src="http://www.SMbey0nd.com/images/smilies/Face67.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/><br/></span><br/><br/>============================================<br/><br/><span style="color:Red">Up&#100;ate 2008-9-12 10:43:27：<br/>今天测试时突然发现昨日研究过程中有个遗漏：IE7居然完全不支持元素中的fixed方式。在IE7中不设置background-attachment的话，溢出滚动后默认居然是scroll的效果，设置background-attachment:scroll后效果不变，而设置fixed后仍然会导致background-position问题。看来IE7对这个属性的支持是很有问题的，我会继续关注这个问题，抽空再作研究。<br/></span><br/><br/>============================================<br/><br/>background-attachment引发的血案……<br/>今天在CSS森林的群里，遇到群老大<a target="_blank" href="http://www.cssforest.org/blog" rel="external">鬼-CSSForest</a>提出的一个需求：<br/><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/quote.gif" style="margin:0px 2px -3px 0px" alt="引用内容"/> 引用内容</div><div class="UBBContent">一，有两个div在同一页面里，都有背景，宽高一样，有y方向滚动条<br/>二，其中一个背景是固定的，即不滚动（fixed）<br/>三，这两个div是平级的，并且其内部结构可以按需更改（可以更改结构使得实现起来方便多了）<br/></div></div><br/><br/>以及一个问题：<br/><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/quote.gif" style="margin:0px 2px -3px 0px" alt="引用内容"/> 引用内容</div><div class="UBBContent"><span style="font-size:12pt">background-attachment，是否只能用于html和body？</span><br/></div></div><br/><br/><span style="color:Purple">=========================抓狂的分隔线===========================</span><br/><br/>带着这些问题，我闷头苦练了将近一个上午（工作计划被打乱T.T）……<br/>首先针对第二个问题，得出以下结论（关于background-attachment的特性）：<br/><br/><strong>1.background-attachment在标准浏览器中（即IE6以外的浏览器），仅在html和body中才起作用（html和body的background-attachment默认是scroll，可以设置成fixed；其他元素overflow:scroll滚动时的background-attachment始终是fixed，并且设置scroll无效）；<br/><br/>2.IE系列（IE6-8）在不指定文档类型的时候（进入quirks mode模式），元素中的background-attachment支持scroll和fixed，而FF等其他内核浏览器仍然无效。<br/><br/>3.在不给元素设置background-attachment，并且该元素overflow:scroll滚动时，标准浏览器中默认是fixed效果，而在IE6中默认是scroll效果。<br/><br/>4.在IE6下，不管在任何时候设置background-attachment的fixed或scroll都起作用；即，IE6支持任何元素的background-attachment的一切（IE6的无敌兼容爆发？）。<br/><br/>延伸问题：在IE6以外的标准浏览器中，设置除body、html外其他元素的background-attachment:fixed后，这些元素的background-position将以body和html为基准进行定位，这个特性所带来的灾难是：如果页面下方两个元素都具有background-attachment并且都没有设置background-position，那么他们的背景将重叠在页面的左上角处并且不予显示，不管这两个元素身在何处。在页面中的表现是，两二个元素的背景离奇消失）。</strong><br/><span style="color:Maroon">此问题详见DEMO：背景消失之谜</span><br/><a target="_blank" href="http://www.smbey0nd.com/demo/20080911/background_disapear_1.html" rel="external">http://www.smbey0nd.com/demo/20080911/background_disapear_1.html</a><br/><br/><span style="color:Purple">=========================抓狂的分隔线===========================</span><br/><br/>得出以上结论后，再回头来看鬼提出的需求，感觉思路清晰多了：P<br/><br/>解决思路如下：<br/><br/>首先设置这两个DIV为#C1（fixed），#C2（scroll）。<br/><strong>1.先考虑fixed的#C1，在标准浏览器里实现fixed很简单，压根不需要考虑什么background-attachment，直接设置背景图片即可；不过在另类的IE6下，如果不指定background-attachment，它却将是scroll的效果。怎么办，直接hack（_background-attachment:fixed）搞定。</strong><br/><span style="color:Green">注：如不用hack直接用background-attachment:fixed，将会导致上面所说的“背景消失”问题。</span><br/><br/><strong>2.再考虑scroll的#C2，想要达到scroll效果其实并非易事：各大标准浏览器并不“允许”你这样设置一个内部元素（IE6在这时却表现的特别亲切，看看这个让人反感的IE6！&gt;.&lt;#）。该怎么办？单单一个DIV似乎没有办法做到这个要求，那么……看来只能更改结构了。OK，再在#C2中加入一个修补元素&lt;div class=&#34;patch&#34; /&gt;，让#C2只负责滚动，而让patch来承载背景图片和其他内容，这样滚动的时候内部文档流就会随着滚动条，自然而然地scroll了，从而也避免了使用这该死的background-attachment所带来的一切困扰。</strong>：P<br/><br/>最终实现的DEMO如下：<br/><span style="color:Maroon">DEMO：两个div，一个fixed一个scroll</span><br/><a target="_blank" href="http://www.smbey0nd.com/Demo/20080911/fixed-scroll.html" rel="external">http://www.smbey0nd.com/Demo/20080911/fixed-scroll.html</a><br/><br/><span style="color:Purple">=========================抓狂的分隔线===========================</span><br/>一点感想和猜测：<br/>不知道w3c有没有在它的某些文档中提到过background-attachment的这些特性，之前也从未接触过这方面的资料。我们在这些DEMO实例中可以明显感觉到，w3c貌似并不提倡我们在html和body以外的元素中使用background-attachment，并且拒绝让我们在这些元素中使用background-attachment:scroll的滚动效果。这个原因目前尚不清楚，是否由于这种效果可以用一些简单的结构很轻松的做到，抑或是由于需求量很少，还是考虑到其他我们所想不到的原因，而取消这个效果？而让我感到很意外的是，IE6中居然可以很完美地支持background-attachment，让人感觉哭笑不得。<br/>最后，从这几个DEMO和实践中可以看出，background-attachment只适合用在html和body上。至于其他元素的背景，我们还是尽量让他们规矩点吧。]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/76.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=76</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[Fun with Wonfu !]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=9" label="My Life" /> 
	  <updated>2008-09-05T22:47:15+08:00</updated>
	  <published>2008-09-05T22:47:15+08:00</published>
		  <summary type="html"><![CDATA[<object name="flvplayer" data="http://www.mogo.com.cn/flvplayer.swf" type="application/x-shockwave-flash" height="358" width="409">
<param name="flashvars" value="autoplay=false&amp;config=http://www.mogo.com.cn/mogo/video_config?id=12-477-1915-embed-remote" />
<param name="allowScriptAccess" value="always" />
<param name="allowFullscreen" value="true" />
<param name="quality" value="high" />
<param name="movie" value="http://www.mogo.com.cn/flvplayer.swf" /></object>
<p><span class="trans">Wonfu &lt;the Shinkansen&gt; in BeijingLive.</span></p>
<p><span class="trans">I love it,I Hate it</span>,So much!</p>
<p>More Live Video &gt;&gt;&gt; <a target="_blank" href="http://www.mogo.com.cn/">MOGO</a></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/75.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=75</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[雷人瞬间 From CSS森林群]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=9" label="My Life" /> 
	  <updated>2008-09-05T10:05:25+08:00</updated>
	  <published>2008-09-05T10:05:25+08:00</published>
		  <summary type="html"><![CDATA[1.CSS森林的群明确规定不许发大图，一旦发现立即清人；<br/>2.当天群主暴走阿龙正在气头上；<br/>3.这个可爱的家伙估计是不小心点错了，马上意识到，可是一切都晚了；<br/>4.这三条动作几乎是在1秒内，以迅雷不及快车盗铃之势，出现，完成……<br/><br/><img src="http://www.SMbey0nd.com/attachments/month_0809/n20089510317.png" border="0" alt=""/><br/><br/>后续：5分钟后，这个可爱的家伙回来了，然后可怜巴巴的认错，检讨，面壁……<br/>简直太可爱鸟￥%……&amp; <img src="http://www.SMbey0nd.com/images/smilies/Face25.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/74.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=74</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[Fun with Chrome!]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=9" label="My Life" /> 
	  <updated>2008-09-03T21:27:24+08:00</updated>
	  <published>2008-09-03T21:27:24+08:00</published>
		  <summary type="html"><![CDATA[I love Chrome so much!&gt;..&lt;~NO!<br/><br/><img src="http://www.SMbey0nd.com/attachments/month_0809/h200893212436.png" border="0" alt=""/><br/><br/><a target="_blank" href="http://www.google.com/chrome?hl=zh-CN" rel="external">Fun with Chrome</a>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/73.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=73</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[WML试验]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=6" label="Front-End" /> 
	  <updated>2008-09-02T18:19:56+08:00</updated>
	  <published>2008-09-02T18:19:56+08:00</published>
		  <summary type="html"><![CDATA[作为一个FE开发者，有必要了解一些WAP的知识。<br/>特接触了一些WML标签的应用，做了个简单的DEMO，试验用。<br/><br/>====================无线的分隔线=====================<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&gt;<br/>&lt;!DOCTYPE wml PUBLIC &#34;-//WAPFORUM//DTD WML 1.1//EN&#34;<br/>&#34;<a href="http://www.wapforum.org/DTD/wml_1.1.xml" target="_blank" rel="external">http://www.wapforum.org/DTD/wml_1.1.xml</a>&#34;&gt;<br/>&lt;wml&gt;<br/>&lt;head&gt;<br/>&nbsp;&nbsp; &lt;access domain=&#34;www.smbey0nd.com&#34;/&gt;<br/>&nbsp;&nbsp; &lt;meta name=&#34;keyword&#34; content=&#34;WAP&#34;/&gt;<br/>&lt;/head&gt;<br/>&lt;card id=&#34;Demo1&#34; title=&#34;Demo No.1&#34;&gt;<br/>&#160;&#160;&#160;&#160;&lt;p&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;strong&gt;Hello Wolrd!&lt;/strong&gt;&lt;br/&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;em&gt;HOHO&lt;/em&gt;&lt;br/&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;This is a &lt;big&gt;Demo&lt;/big&gt; For Testing WML in Wap, From &lt;u&gt;<a href="http://www.SMbey0nd.com" target="_blank">SMbey0nd</a>.com.&lt;/u&gt;&lt;br/&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;But, it&#39;s without CSS...LOL&lt;br/&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;small&gt;(*^__^*) 嘻嘻……&lt;/small&gt;&lt;br/&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;img src=&#34;/images/Logo1.gif&#34; alt=&#34;<a href="http://www.SMbey0nd.com" target="_blank">SMbey0nd</a>&#39;s LOGO&#34;&gt;<br/>&#160;&#160;&#160;&#160;&lt;/p&gt;<br/>&#160;&#160;&#160;&#160;&lt;anchor&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Go To Demo2<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;go href=&#34;#Demo2&#34;/&gt;<br/>&#160;&#160;&#160;&#160;&lt;/anchor&gt;<br/>&lt;/card&gt;<br/><br/>&lt;card id=&#34;Demo2&#34; title=&#34;Demo No.2&#34;&gt;<br/>&#160;&#160;&#160;&#160;&lt;table columns=&#34;3&#34;&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;tr&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;td&gt;Cell 1&lt;/td&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;td&gt;Cell 2&lt;/td&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;td&gt;Cell 3&lt;/td&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/tr&gt;<br/>&#160;&#160;&#160;&#160;&lt;/table&gt;<br/>&#160;&#160;&#160;&#160;&lt;anchor&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Back to Demo1<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;prev/&gt;<br/>&#160;&#160;&#160;&#160;&lt;/anchor&gt;<br/>&#160;&#160;&#160;&#160;&lt;anchor&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Go to Demo3<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;go href=&#34;#Demo3&#34;/&gt;<br/>&#160;&#160;&#160;&#160;&lt;/anchor&gt;<br/>&lt;/card&gt;<br/><br/>&lt;card id=&#34;Demo3&#34; title=&#34;Demo No.3&#34;&gt;<br/>&#160;&#160;&#160;&#160;&lt;fieldset title=&#34;CD Info&#34;&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;This is an input&lt;input name=&#34;Name&#34; size=&#34;15&#34;/&gt;&lt;br/&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;sel&#101;ct&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=&#34;wap&#34;&gt;This is an option&lt;/option&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/sel&#101;ct&gt;&lt;br/&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;sel&#101;ct multiple=&#34;true&#34;&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=&#34;wap&#34;&gt;This is an option(M)&lt;/option&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/sel&#101;ct&gt;<br/>&#160;&#160;&#160;&#160;&lt;/fieldset&gt;<br/>&#160;&#160;&#160;&#160;&lt;anchor&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Back to Demo2<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;prev/&gt;<br/>&#160;&#160;&#160;&#160;&lt;/anchor&gt;<br/>&#160;&#160;&#160;&#160;&lt;anchor&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Go to Demo4<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;go href=&#34;#Demo4&#34;/&gt;<br/>&#160;&#160;&#160;&#160;&lt;/anchor&gt;<br/>&lt;/card&gt;<br/><br/>&lt;card id=&#34;Demo4&#34; title=&#34;Demo No.4&#34;&gt;<br/>&lt;do type=&#34;accept&#34; label=&#34;Answer&#34;&gt;<br/>&#160;&#160;&#160;&#160;&lt;go href=&#34;#Demo5&#34;/&gt;<br/>&lt;/do&gt;<br/>&lt;p&gt;<br/>&#160;&#160;&#160;&#160;&lt;sel&#101;ct name=&#34;name&#34;&gt; <br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=&#34;OP1&#34;&gt;OP1&lt;/option&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=&#34;OP2&#34;&gt;OP2&lt;/option&gt;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=&#34;OP3&#34;&gt;OP3&lt;/option&gt;<br/>&#160;&#160;&#160;&#160;&lt;/sel&#101;ct&gt;<br/>&lt;/p&gt;<br/>&lt;anchor&gt;<br/>&#160;&#160;&#160;&#160;Go to Demo5(Final Mission)<br/>&#160;&#160;&#160;&#160;&lt;go href=&#34;#Demo5&#34;/&gt;<br/>&lt;/anchor&gt;<br/>&lt;/card&gt;<br/><br/>&lt;card id=&#34;Demo5&#34; title=&#34;Demo No.5 Answer&#34;&gt;<br/>&lt;p&gt;<br/>&#160;&#160;&#160;&#160;You sel&#101;cted: $(name)^_^ Cool!<br/>&#160;&#160;&#160;&#160;The Mission Finished!<br/>&#160;&#160;&#160;&#160;花夏小小 爱你！<br/>&#160;&#160;&#160;&#160;Bye~ Mario<br/>&#160;&#160;&#160;&#160;&lt;a href=&#34;<a href="http://www.smbey0nd.com/wap.asp" target="_blank" rel="external">http://www.smbey0nd.com/wap.asp</a>&#34;&gt;<a href="http://www.SMbey0nd.com" target="_blank">SMbey0nd</a>.com/wap&lt;/a&gt;<br/>&lt;/p&gt;<br/>&lt;/card&gt;<br/>&lt;/wml&gt;<br/></div></div><br/><br/>DEMO地址：<a target="_blank" href="http://www.smbey0nd.com/Demo/wap/Demo1.wml" rel="external">http://www.smbey0nd.com/Demo/wap/Demo1.wml</a> （使用手机浏览）<br/><br/>====================无线的分隔线=====================<br/><br/><span style="font-size:12pt"><strong>WML备忘：</strong></span><br/><strong>Tips：</strong><br/>1.WML 指无线标记语言(Wireless Markup Language)，用于 WAP 的标记语言。它是一种从 HTML 继承而来的标记语言，但是 WML 基于 XML，因此它较 HTML 更严格。WML 使用标签 - 类似 HTML - 但是语法更严格且遵守 XML 1.0 标准。<br/>2.WML 被用来创建可显示在 WAP 浏览器中的页面。用WML编写的页面被称为 DECKS。DECKS 是作为一套 CARDS 被构造的。<br/>3.WML 使用 WMLScript 在客户端运行简单的代码。WMLScript 是一种轻量级的 JavaScript 语言。不过，WML 脚本并不嵌在 WML 页面中。WML页面仅仅含有对脚本 URL 的引用。WML 脚本在 WAP 浏览器运行之前，需要先在服务器上被编译为字节编码。<br/>4.WML不支持CSS。 <img src="http://www.SMbey0nd.com/images/smilies/Face39.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/><br/>5.WML 文档必须含有一个 XML 声明和一个 DTD。<br/><br/><strong>常用标签：</strong><br/><br/>1.Deck / Card 元素：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;wml&gt; <span style="color:Teal">用来定义 WML deck (WML 卡片组)。</span><br/>&lt;card&gt; <span style="color:Teal">用来定义 deck 中的一个 card。card 元素的 &#34;id&#34; 属性可用作锚 (anchor)。</span><br/>&lt;head&gt; <span style="color:Teal">可包含&lt;access&gt; 和 &lt;meta&gt;的区域。&lt;access&gt;访问控制，&lt;meta&gt;文档元信息。</span><br/>&lt;template&gt; <span style="color:Teal">为 deck 中的所有 card 定义一个模板：该标签中的“代码（行为）”会添加到 deck 中的每个卡片。<br/></span><br/></div></div><br/><br/>2.文本格式化元素：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;b&gt; <span style="color:Teal">粗体</span><br/>&lt;strong&gt; <span style="color:Teal">强调（效果与&lt;b&gt;一样）</span><br/>&lt;i&gt; <span style="color:Teal">斜体</span><br/>&lt;em&gt; <span style="color:Teal">着重（效果与&lt;i&gt;一样）</span><br/>&lt;big&gt; <span style="color:Teal">大号</span><br/>&lt;small&gt; <span style="color:Teal">小号</span><br/>&lt;u&gt; <span style="color:Teal">下划线</span><br/></div></div><br/><br/>3.锚元素：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;a&gt; <span style="color:Teal">在任何可能的情况下，使用 &lt;a&gt; 标签代替 &lt;anchor&gt; 标签。</span><br/>&lt;anchor&gt; <span style="color:Teal">比&lt;a&gt;多出指定的任务&lt;go&gt;&lt;prev&gt;&lt;refresh&gt;。</span><br/></div></div><br/><br/>4.事件元素：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;do&gt; <span style="color:Teal">点击一个单词时激活一个任务，默认是accept类型。如果&lt;card&gt; 包含多个类型为 accept 的 &lt;do&gt; 元素，且这些 &lt;do&gt; 元素没有被命名，WML 会出现编译错误，而且不会显示出页面。</span><br/>&lt;onevent&gt; <span style="color:Teal">包含了当下列事件发生时所执行的代码：onenterbackward（当 &lt;prev&gt; 跳转到前一个卡片时触发）、onenterforward（当 &lt;go&gt; 跳转到某一个卡片时触发）、onpick（当项目被选取或撤销选取时触发）、ontimer（当计时器终止时触发）。</span><br/></div></div><br/><br/>5.任务元素：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;go&gt; <span style="color:Teal">跳转到新卡片的动作，类似&lt;a&gt;。可包含 &lt;postfield&gt; 或 &lt;setvar&gt; 标签。</span><br/>&lt;noop&gt; <span style="color:Teal">不进行任何动作，防止事件的发生。</span><br/>&lt;prev&gt; <span style="color:Teal">返回前一个访问过的卡片。</span><br/>&lt;refresh&gt; <span style="color:Teal">刷新指定的卡片。</span><br/></div></div><br/><br/>6.控件元素：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;fieldset&gt; <span style="color:Teal">分组元素。</span><br/>&lt;input&gt; <span style="color:Teal">文本框。</span><br/>&lt;sel&#101;ct&gt; <span style="color:Teal">可选列表。multiple属性控制单、复选</span><br/>&lt;option&gt;&nbsp;&nbsp;<span style="color:Teal">&lt;sel&#101;ct&gt;中的一个选项。</span><br/>&lt;optgroup&gt; <span style="color:Teal">&lt;sel&#101;ct&gt;中的一组选项。</span><br/></div></div><br/><br/>还有一些细节上的东西，先不写了，下次补上。 <img src="http://www.SMbey0nd.com/images/smilies/Face23.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/><br/><br/><span style="color:Red">Up&#100;ate 2008-9-5 22:52:20：</span><br/>补一些要注意的<br/>1.不同的手机品牌、不同的型号，其微浏览器对WML解释都有微小不同。如Nokia的一些新的系列对事件元素（do标签）并没有如期的支持效果，不是像文档中提到的自动触发，而是需要选择“操作”键后才出现候选动作；同时对控件元素的交互也有区别（如单选框，操作时不是直接选中，而是会进入一个特别的选择页面进行选择后再返回原页面）。<br/>2.（云谦同学的提醒）：较新的手机浏览器都支持XML Base（XML简化版），并支持一些简单的CSS和JS，相对于WML能做的更多。轻量级的WML应该快到了更新换代的时候了。]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/72.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=72</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[DEMO：内容自适应、有层叠效果的滑动门实现]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=6" label="Front-End" /> 
	  <updated>2008-08-30T03:40:41+08:00</updated>
	  <published>2008-08-30T03:40:41+08:00</published>
		  <summary type="html"><![CDATA[前几天在<a target="_blank" href="http://www.cssforest.org/blog/" rel="external">CSS森林群</a>中讨论问题时，遇到一位朋友提出的内容自适应的层叠式菜单（滑动门）问题，当时想得很简单，以为简单切图即可，随后发现自己的低级错误。由于以前还没有实际的项目做过这种菜单，故实际制作一例DEMO并附上解决思路，深刻地熟悉一下其中的特点。<br/><br/>====================滑动的分隔线(*^__^*) ====================<br/><br/><span style="font-size:12pt"><strong>要实现的效果如下</strong></span>（设计水平不行了，别笑话咱 <img src="http://www.SMbey0nd.com/images/smilies/Face25.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/>）：<br/><br/><img src="http://www.SMbey0nd.com/demo/20080830/images/sample.png" border="0" alt=""/><br/>默认时，各个菜单分别向前遮挡；悬停时，当前菜单需要移动到最上层并替换图像。<br/><br/><span style="font-size:12pt"><strong>HTML部分：</strong></span><br/><strong>1.第一次考虑的思路（失败方案）：</strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;ul&gt;<br/> &lt;li&gt;&lt;a /&gt;&lt;/li&gt;<br/>&lt;/ul&gt;</div></div>li中放置向右对齐平铺的滑动背景（简称身体层），a中放置左侧不重复背景（简称头部层），由于a在li中，优先级高，其头部层将盖住身体层。因为头部层需要用透明png图片，为避免身体层透过来，头部层要向左移动一段距离，与身体层保持距离。接下来开始思考hover的时候，发现这种结构不能实现hover后的效果，因为身体层在a的外面，IE6下无法使用a:hover伪类替换图像。故考虑加入span标签来完成。<br/><br/><strong>2.第二次考虑的思路（最终方案）：</strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;ul&gt;<br/> &lt;li&gt;&lt;a&gt;&lt;span&gt;标题1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br/>&lt;/ul&gt;</div></div>把span作为头部层放在a中，a换作身体层（li被架空了 <img src="http://www.SMbey0nd.com/images/smilies/Face25.gif" border="0" style="margin:0px 0px -2px 0px" alt=""/>，残念），这样就可以通过a:hover来控制头部和身体，让他们同时……替换图片了^^#。另外，菜单在悬停之后，需要设置z-index来使它们显示在同类的最上层。<br/><br/><span style="font-size:12pt"><strong>CSS部分：</strong></span><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">ul li{float:left;}<br/>ul li a{display:block;height:30px;float:left;color:#FFF;background:url(img1);}<br/>ul li a span{display:block;height:30px;float:left;position:relative;left:-10px;background:url(img2);} <span style="color:Teal">/*用relative向左10像素使菜单头部与身体衔接，同时向左覆盖前一个菜单并露出本菜单尾部*/</span><br/>ul li a:hover{height:55px;line-height:55px;position:relative;top:-25px;z-index:100;background:url(img3);} <span style="color:Teal">/*用relative向上25像素使hover后的菜单模拟&#34;底部对齐&#34;*/</span><br/>ul li a:hover span{height:55px;background:url(img4);} <span style="color:Teal">/*hover后+span的选择器，用来替换头部层span的图像*/ </span></div></div>因为要实现宽度自适应，故所有标签均不要定义宽度。图片使用8位png可较好的实现圆角透明效果。最终图片尽量做成Sprite方式，这样菜单的性能更好：D<br/><br/><span style="font-size:12pt"><strong>Images部分：</strong></span><br/><img src="http://www.SMbey0nd.com/demo/20080830/images/nav_sprite.png" border="0" alt=""/><br/>这就是用来做Sprite的图了。<br/><br/><span style="font-size:12pt"><strong>OK。最终整理一下，运行看看效果：</strong></span><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp59971"><!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.1//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34;>

<head>
<meta content=&#34;text/html; charset=utf-8&#34; http-equiv=&#34;Content-Type&#34; />
<title>Sliding Doors</title>
<style type=&#34;text/css&#34;>
#SlidingDoor{margin:20px 0 0 0;padding:0;list-style:none;font:bold 12px/30px arial;}
#SlidingDoor li{float:left;}
#SlidingDoor li a,#SlidingDoor li a span{display:block;height:30px;float:left;color:#FFF;background:url(<a href="http://www.smbey0nd.com/demo/20080830/images/nav_sprite.png" target="_blank" rel="external">http://www.smbey0nd.com/demo/20080830/images/nav_sprite.png</a>) no-repeat;}
#SlidingDoor li a{background-position:right 0;}
#SlidingDoor li a span{padding:0 20px;position:relative;left:-10px;cursor:pointer;}
#SlidingDoor li a:hover{height:55px;line-height:55px;text-decoration:none;position:relative;top:-25px;z-index:100;background-position:right -30px;}
#SlidingDoor li a:hover span{height:55px;background-position:0 -30px;}
</style>
</head>

<body>
<h1>DEMO：
内容自适应，有层叠效果的滑动门</h1>
<ul id=&#34;SlidingDoor&#34;>
	<li><a href=&#34;&#34; title=&#34;&#34;><span>标题1</span></a></li>
	<li><a href=&#34;&#34; title=&#34;&#34;><span>标题2</span></a></li>
	<li><a href=&#34;&#34; title=&#34;&#34;><span>标题标题标题3</span></a></li>
	<li><a href=&#34;&#34; title=&#34;&#34;><span>标题4</span></a></li>
	<li><a href=&#34;&#34; title=&#34;&#34;><span>标题5</span></a></li>
</ul>
</body>

</html></TEXTAREA><br/><INPUT onclick="runEx('temp59971')"  type="button" value="运行此代码"/> <INPUT onclick="doCopy('temp59971')"  type="button" value="复制此代码"/><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><span style="font-size:12pt"><strong>以下是完整的DEMO演示地址：</strong></span><br/><a target="_blank" href="http://www.smbey0nd.com/Demo/20080830/sliding_doors.html" rel="external">http://www.smbey0nd.com/Demo/20080830/sliding_doors.html</a><br/><br/>====================滑动的分隔线(*^__^*) ====================<br/><br/>实现这种滑动门的关键之处在于，由于IE6不支持a之外的hover伪类，所以悬停的效果只能在a中做文章。CSS选择器在a:hover后选择span可以很好的解决这个问题。position:relative和z-index也是需要注意的地方。<br/><br/>btw:很可惜，由于relative的问题，本Demo不能进行<a target="_blank" href="http://www.blueidea.com/tech/web/2008/6130.asp" rel="external">float:center的居中模拟:(</a>，不得不算做一个小瑕疵吧。]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/69.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=69</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[HTML标准属性]]></title>
	  <author>
		 <name>SMbey0nd</name>
		 <uri>http://www.SMbey0nd.com/</uri>
		 <email>SMbey0nd@163.com</email>
	  </author>
	  <category term="" scheme="http://www.SMbey0nd.com/default.asp?cateID=6" label="Front-End" /> 
	  <updated>2008-08-28T16:03:27+08:00</updated>
	  <published>2008-08-28T16:03:27+08:00</published>
		  <summary type="html"><![CDATA[这里列出的属性，是通用于每个标签的核心属性和语言属性（不支持的标签将会列在每一项的后面，需要重点记忆）：<br/><br/><br/><strong><span style="font-size:12pt">核心属性：</span></strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">class（元素的类）<br/>id（元素的特定id）<br/>style（内联样式定义）<br/>title（提示的文本）<br/></div></div><strong>不支持以上属性的标签：</strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">base<br/>head<br/>html<br/>meta<br/>param<br/>script<br/>style<br/>title<br/></div></div><br/><br/><strong><span style="font-size:12pt">语言属性：</span></strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">dir（设置文本的方向）<br/>lang（设置语言代码）<br/></div></div><strong>不支持以上属性的标签：</strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">base<br/>br<br/>frame<br/>frameset<br/>hr<br/>iframe<br/>param<br/>script <br/></div></div><br/><br/><strong><span style="font-size:12pt">键盘属性：</span></strong><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.SMbey0nd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">accesskey（设置访问某元素的键盘快捷键）<br/>tabindex（设置某元素的Tab次序）<br/></div></div><strong>无不支持标签</strong><br/><br/>====================<br/><br/>延伸：<a target="_blank" href="http://www.smbey0nd.com/article/67.htm" rel="external">XHTML中必须具备属性的元素</a>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.SMbey0nd.com/article/68.htm" /> 
	  <id>http://www.SMbey0nd.com/default.asp?id=68</id>
  </entry>	
		
</feed>
