演示地址及使用请移步：http://d2.sodao.com/demo/Slide/

看demo把（请用ie6围观）：http://www.css88.com/demo/absolute-bug/absolute-bug.html

这里有几个条件：

1. 相邻元素是有width属性的，如果去掉width属性，margin-top又会生效，点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-1.html
2. 增加相邻元素浮动，margin-top也会又会生效；点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-2.html

如果没有复杂的背景什么的可以使用padding-top替换margin-top；

还可应在相邻元素间插入一个空标签的方法：

<div style="position: absolute; width: 500px; top: 0; left: 0; height: 30px; background-color: #666;">此处显示新 Div 标签的内容</div>
<!--[if IE 6]>
<div></div>
< ![endif]-->
<div style="margin-top: 35px; width: 100px; float: left; background-color: #3fc;">此处eeeeeeeee显示新 Div 标签的内容</div>

点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-4.html

————————————————
另赠送一个IE6下与float元素相邻的position:absolute元素消失BUG
围观地址：http://blog.dengsa.com/?p=342 http://www.webchina110.cn/?p=105

var S=KISSY,
	obj={a:"a",b:"b"};
	var newObj=S.clone(obj);//深拷贝
	var newObj1=obj;//浅拷贝，赋值
	obj.b="b2";
	S.log(obj);//{a:"a",b:"b2"}
	S.log(newObj);//{a:"a",b:"b"}
	S.log(newObj1)//{a:"a",b:"b2"}

function siteAdmin(nickName,siteName){
			this.nickName=nickName;
			this.siteName=siteName;
		}
		siteAdmin.prototype.showAdmin = function() {
			alert(this.nickName+"是"+this.siteName+"的站长!")
		};
		siteAdmin.prototype.showSite = function(siteUrl) {
			this.siteUrl=siteUrl;
			return this.siteName+"的地址是"+this.siteUrl;
		};
		var matou=new siteAdmin("愚人码头","WEB前端开发");
		var matou2=new siteAdmin("愚人码头","WEB前端开发");
		matou.age="30";
//		matou.showAdmin();
//		alert(matou.showSite("http://www.css88.com/"));
		alert(matou.hasOwnProperty("nickName"));//true
		alert(matou.hasOwnProperty("age"));//true
		alert(matou.hasOwnProperty("showAdmin"));//false
		alert(matou.hasOwnProperty("siteUrl"));//false
		alert(siteAdmin.prototype.hasOwnProperty("showAdmin"));//true
		alert(siteAdmin.prototype.hasOwnProperty("siteUrl"));//false
		alert(siteAdmin.prototype.isPrototypeOf(matou))//true
		alert(siteAdmin.prototype.isPrototypeOf(matou2))//true

Array.prototype.delRepeat=function(){
	var newArray=new Array();
	var len=this.length;
	for (var i=0;i<len ;i++){
		for(var j=i+1;j<len;j++){
			if(this[i]===this[j]){
				j=++i;
			}
		}
		newArray.push(this[i]);
	}
	return newArray;
}

但是很明显这里有for循环内嵌了另一个for循环，在大数据量下肯定非常耗时！效率低下！经过查找和高人指点优化了一个新方法：

Array.prototype.delRepeat=function(){
	var newArray=[];
	var provisionalTable = {};
	for (var i = 0, item; (item= this[i]) != null; i++) {
        if (!provisionalTable[item]) {
            newArray.push(item);
            provisionalTable[item] = true;
        }
    }
    return newArray;
}

就是使用一个临时的provisionalTable对象，将数组的值作为provisionalTable对象的键值，如果相应的值不存在就将这个数组的值push到新数组中。
效率是提高了，但是有个bug，就是假设数组中换用可转换的数字和字符串，比如数组[6,"6"]这时候就好被去掉一个。悲剧，同时求解决方法。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。

点击查看：http://www.css88.com/demo/pre/index-1.html

今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题：

1.先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。

点击查看：http://www.css88.com/demo/pre/index-2.html

2.查看了pre的浏览器默认样式：

xmp, pre, plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin: 1em 0;
}

都有这个white-space: pre，看看white-space的值：

有个pre-wrap，保留空白符序列，但是正常地进行换行。

这样就OK了搞定，我们只要加上样式：

就能使<pre>的内容自动换行了。

点击查看：http://www.css88.com/demo/pre/

各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份：

1. IE6(下载)
2. IE7(下载)
3. IE8(下载)
4. IE9(下载)
5. Firefox 3.6.3(下载)
6. Webkit (r57042) (下载)
7. Opera 10.51(下载)

当然我们还可以找到更老的一些浏览器默认样式：

• Firebird 0.7
• Firefox 0.8
• Firefox 0.9
• Firefox 2.0.0.6
• Firefox 2.0.0.12
• Firefox 3.0b3
• Firefox 3.0.1
• Firefox 3.0.8
• Flock 0.9.0.2
• Flock 1.2.4
• Flock 1.2.7
• Konqueror 3.2.0
• Mozilla 1.0.1
• Mozilla 1.5
• Navigator 6.1
• Navigator 7.1
• Navigator 8.1
• Navigator 9.0b3
• Safari 3.0.4
• Safari x
• Safari 3.1.2
• SeaMonkey 1.1.2

Web前端开发工程师

工作职责：
1．负责web产品网站的前端实现；
2．协助web产品网站的性能优化；

职位要求：
1．精通各种Web前端技术，包括XHTML/XML/CSS/Javascript/ActionScript等（JS和AS之一即可）；
2．深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验；
3．有基于Ajax或Flash的RIA应用开发经验；
4．至少精通一门非Web前端脚本的语言（如Java/PHP/C++，PHP优先），并有项目经验；
5．个性乐观开朗，逻辑性强，善于和各种背景的人合作；
6．计算机、数学、自动化等相关专业本科以上学历优先；
7．两年工作经验以上。

==============================================

网页重构工程师

工作职责：
1．负责web产品网站的页面原型实现；
2．协助web产品网站的性能优化；

职位要求：
1．对符合web标准的网站重构有丰富经验，有成功案例；
2．精通结构化语言xhtml、xml与解释性语言css；
3．精通图像处理软件与网页编辑软件；
4．对业界最新的页面实现有浓厚的兴趣和深入的见解；
5．逻辑分析能力强，善于沟通，较强的学习能力；
6．熟悉对象模型与脚本语言，有前台开发、门户网站重构经验者优先考虑；

7．计算机、数学、自动化等相关专业本科以上学历优先；
8．两年工作经验以上。

=========================================

以上岗位来都为急聘，请直接发简历到：phourmliang@tencent.com，主题注明“xxx应聘xxx岗位 ”，条件符合者我们马上安排面试，谢谢！

http://www.jsforest.org/2010/07/19/jsfzine-is-running-out/

留言，或者twitter森林：@jsforest_org

比如一个“网友评论”模块这个会在很多地方使用到，比如日志，照片，等等，如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等，包括后台的数据存贮。

《页面模块化（设想）》上面总结了页面模块化的优点，《前端模块化设计思路》也提到要做到模块化的前提条件：

为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进 行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。

我们应给怎么样建立一套设计规则呢？

首先我们要从页面的表现开始，视觉上我们要采用统一的视觉设计规则，比如：

1. 应用网页栅格化来确定网页布局；
2. 页面标题栏，字体大小，文本间距统一；
3. 表单类的表现统一，比如按钮，文本框等；
4. 图片规格统一；
5. 行为类的弹窗，浮层等表现统一；
6. 等等…

其次为模块编写统一的html结构，

1. 要合理使用语言化的标签；
2. 可以保存成代码片段或者单独的html文件等，
3. 如果需要可以加上适当的注释；
4. 考虑扩张性和维护性；

再次编写为模块编写统一的css，比如：

1. 要有统一的命名规则（查看鬼哥的命名规则），当然建议加上模块的命名规则，不过我的建议是在模块的命名规则前加上mode_前缀，例如：
   • 弹出 mode_pop
   • 公共 mode_global,mode_gb
   • 标题 mode_title,mode_tit
   • 提示 mode_hint
   • 菜单 mode_menu
   • 信息 mode_info
   • 预览 mode_pvw
   • Tips mode_tips
   • 导航 mode_nav

   当然你也可以根据你们团队重新命名一套规则；合适的才是最好的

2. 做好基类和拓展类的设计,做好在不同页面模块变化的差异性；比如同一模块在A页面标题的字体是粗体，在B页面标题的字体是细体等等；
3. 将每个模块的css保存成独立的独立的css文件；
4. 如果需要可以加上适当的注释；
5. 考虑扩张性和维护性

接下了为该模块添加行为（js），编写层面向对象的js，提高代码的复用率等等；

最后审视模块间的耦合问题，比如，留言模块和发日志，填表单都会使用到表单元素，按钮，文本框等，那么我认为我们应该把表单样式作为一个独立的css模块，html和js模块还是在原来的模块中。这需要我们对这些模块归类，从而更好，跟方便的的拼装我们的页面，

html模块可以布局模块和功能模块等，比如

• 按功能分的功能模块，比如：
  1. 日志模块：日志列表，日志详细，日志评论（引用评论模块等等），日志发布（引用表单模块等等），日志管理等等
  2. 评论模块：评论列表，发表评论（引用表单模块等等），评论管理等等
  3. 相册模块：……
  4. 工具条模块：……
  5. ……等等；
• 按布局分的布局模块：比如栅格化中的一堆布局组合；

css模块比较复杂大致的

• 按类别分的公共模块：重置模块（css reset），表单模块，字体模块，文字、图片、图文列表模块，弹窗模块，标题模块，提示模块,应用小图标模块等等；这里模块绝大多数作为功能模块的部件，融入在各个模块中；
• 布局模块和功能模块可以参照html里的功能模块的拆分；

行为js模块可能就相对简单一点,库模块，功能模块等，功能模块可以参照html里的功能模块的拆分；

合理的模块拆分和拼装在实现页面模块化中其中相对重要的作用，模块拆分和拼装的好可以大大的提高开发和维护的效率，反正甚至会影响到网页模块化的成败，给开发和维护带来相对重大的影响。

这样我们就有了网页模块化的基本实现思路，当然这是建立在设计规则上的，如果我们没有完备的设计规则，那么网页模块化就会变成网页魔鬼化，呵呵。

参考文章：

前端模块化设计思路

http://www.cssforest.org/blog/index.php?id=167

http://www.cssforest.org/blog/index.php?id=143