穿别人的鞋，走自己的路，让别人去找吧。<<--做兼职之经验之谈
div+css+JS导航菜单 
Write by admin On 2007年11月22日 17:09
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css 菜单</title>
<style>
body{
background-color:#B8B8A0;
}
#fbtn{
display:none;
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding:1 1 1 1;
width:115px;
height:30px;
}
#fbtn_txt{
position:relative;
}
#fbtn_txt div{
height:30px;
padding-top:11px;
font-size:9px;
font-family:small fonts;
color:#800080;
text-align:center;
cursor:hand;
}
#fbtn_mask{
background-color:#ffffff;
position:relative;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<script>
var current=null;
var t=null;
for(var i=0;i<fbtn.length;i++){
fbtn_txt[i].style.posTop=-30;
fbtn_mask[i].style.posTop=-30;
fbtn[i].index=i;
fbtn[i].style.display="block";
fbtn[i].onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}
fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index);
current=null;
}
}
}
function domove(num){
var o=fbtn_txt[num];
var m=fbtn_mask[num];
if(o.style.posTop<-60){
o.style.display="none";
var t=o.children[1].innerHTML;
o.children[1].innerHTML=o.children[0].innerHTML;
o.children[0].innerHTML=t;
o.style.posTop=-30;
o.style.display="block";
if(m.style.posTop>30)
m.style.posTop=-30;
else
m.style.posTop=0;
}
else{
m.style.posTop+=3;
o.style.posTop-=3;
setTimeout('domove('+num+')',15);
}
}
</script>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css 菜单</title>
<style>
body{
background-color:#B8B8A0;
}
#fbtn{
display:none;
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding:1 1 1 1;
width:115px;
height:30px;
}
#fbtn_txt{
position:relative;
}
#fbtn_txt div{
height:30px;
padding-top:11px;
font-size:9px;
font-family:small fonts;
color:#800080;
text-align:center;
cursor:hand;
}
#fbtn_mask{
background-color:#ffffff;
position:relative;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<script>
var current=null;
var t=null;
for(var i=0;i<fbtn.length;i++){
fbtn_txt[i].style.posTop=-30;
fbtn_mask[i].style.posTop=-30;
fbtn[i].index=i;
fbtn[i].style.display="block";
fbtn[i].onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}
fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index);
current=null;
}
}
}
function domove(num){
var o=fbtn_txt[num];
var m=fbtn_mask[num];
if(o.style.posTop<-60){
o.style.display="none";
var t=o.children[1].innerHTML;
o.children[1].innerHTML=o.children[0].innerHTML;
o.children[0].innerHTML=t;
o.style.posTop=-30;
o.style.display="block";
if(m.style.posTop>30)
m.style.posTop=-30;
else
m.style.posTop=0;
}
else{
m.style.posTop+=3;
o.style.posTop-=3;
setTimeout('domove('+num+')',15);
}
}
</script>
</body>
DIV+CSS编码时应注意的一些错误 
Write by admin On 2007年11月8日 10:33
CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+ div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误： 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3. 确定错误发生的位置 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属性
阅读全文...
DIV为空时占据空间如何解决
Write by admin On 2007年11月8日 10:22
CSS小技巧之DIV为空时占据空间的解决办法
当在div标签内无任何内容时：
<div></div>
如果给div元素<b>设置了宽度<b>时，比如width:100%，此时div在IE中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：
<div style="width:100%"></div>
此时在IE中到底是什么在影响着最终的显示，又是如何解析的呢？
可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）
我们对上面的代码逐一添加过滤属性（具体的过程有兴趣的朋友，可以私下里实验一下，“自己动手，丰衣足食”！）
在测试的过程中，你会发现IE6和IE7的解析也不尽相同，比如在给div设置了line-height:0; height:0; 的样式后，IE7中显示正常了，不再占据物理空间了，而IE6却依然我行我素，亦或是悲！
最终的测试结果，最简单的方法是，给div设置高度（height）和溢出（overflow）属性：
<div style="width:100%;height:0;overflow:hidden; "></div>
DIV+CSS技术怎样入门
Write by admin On 2007年11月8日 10:19
CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化，越来越多的人在学习而很多初学者没有一个头绪，整理了一些学习的方法给大家。
一. CSS学习重在方法!
学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法!
要想掌握CSS, 首先要学会HTML!
再来谈一下学习过程中的细节，因为一个样式它是不可能脱离HTML页面的，HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你上机测试效果，这是笔者想让你有对样式表CSS有一个初步的印象，告诉你CSS能做什么。一个小例子：“麻雀虽小，五脏俱全”，你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你骑的是牛也好，千里马也罢，只要有恒心，一定会到达终点的。
一. CSS学习重在方法!
学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法!
要想掌握CSS, 首先要学会HTML!
再来谈一下学习过程中的细节，因为一个样式它是不可能脱离HTML页面的，HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你上机测试效果，这是笔者想让你有对样式表CSS有一个初步的印象，告诉你CSS能做什么。一个小例子：“麻雀虽小，五脏俱全”，你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你骑的是牛也好，千里马也罢，只要有恒心，一定会到达终点的。
阅读全文...
DIV+CSS布局与网站SEO 
Write by admin On 2007年11月7日 23:53
代码精简
使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率， 能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。
表格的嵌套问题
很多网站如何推广的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据 目前掌握的情况来看，spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。
使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率， 能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。
表格的嵌套问题
很多网站如何推广的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据 目前掌握的情况来看，spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。
阅读全文...
<
