关注F2E-UED-SEO

jCarousel是一款JQuery 插件， 用来控制水平或垂直排列的列表项. 这些项目（可以是静态HTML内容或是Ajax加载内容）内容是可以来回滚动的（可以有动画效果）。此插件功能十分强大！敬请关注！

淘布斯网站需要做一个回顶部的简单效果，mootools功能强大可以直接往上写，而Jquery简练，需要挂一个简单的小插件。

先发下Mootools的写法

window.addEvent('domready',function(){
       $('gotop').inject(document.body).addEvent('click',function(){
		   new Fx.Scroll(window,{link:'cancel'}).toTop();
	   }).setOpacity(.8);
	   this.addEvent('scroll',function(){
	        if(window.getScrollTop()>100){
		    $('gotop').setStyle('top',window.getSize().y + window.getScrollTop() - $('gotop').getSize().y).show();
	       }else{
		      $('gotop').hide();
		   }
	   });
   });

ID为gotop点击触发事件，当页面是最顶部的时候，按钮隐藏，不过按钮的定位需要CSS绝对定位在某一位置

———————–

Jquery的写法则更为简单，直接挂上插件就可以使用！
不过在scrolltopcontrol.js的配置的参数信息需要配置正确

    /*startline: 鼠标向下滚动了100px后出现#topcontrol*/
	/*scrollto: 它的值可以是整数，也可以是一个id标记。若为整数（假设为n），则滑动到距离
                    top的n像素处；若为id标记，则滑动到该id标记所在的同等高处*/
	/*scrollduration:滑动的速度*/
	/*fadeduration:#topcontrol这个div的淡入淡出速度，第一个参数为淡入速度，第二个参数
                    为淡出速度*/
	/*controlHTML:控制向上滑动的，默认为<img src="up.png" style="width:48px;
                    height:48px" />，可以自行更改。该处的html代码会被包含在一个id标记
                    为#topcontrol的div中。*/
	/*controlattrs:控制#topcontrol这个div距离右下角的像素距离*/
	/*anchorkeyword:滑动到的id标签*/
	/*state: isvisible:是否#topcontrol这个div为可见
		 shouldvisible:是否#topcontrol这个div该出现*/

    setting:{startline:1,scrollto:0,scrollduration:1000 fadeduration:[500, 100]},
	controlHTML: '<img src="up.png" style="width:24px; height:24px" />',
	controlattrs: {offsetx:5, offsety:5},
	anchorkeyword: '#top',
	state: {isvisible:false, shouldvisible:false},

不多说，先看效果：点击这里查看演示 | 点击这里下载实例

关键Js代码：

$(function(){
	  $(".select_list li:odd").addClass("currert");
	  $("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	  });
	  $(".select_list > li > a").hover(function(){
		  $(this).animate({
			paddingLeft: 20
		  },100);
	      },function(){
		  $(this).animate({
			paddingLeft: 5
		  },50);
	 });
});

解释一下：

 $(".select_list li:odd").addClass("currert");

获取class=”select_list”下的li的偶数行给其添加class=”currert”,同时定义currert的样式，起到隔行换色的效果

$("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	});

获取id=”menuClick” 通过鼠标点击触发事件，触发id为vMenuList的sildsToggle的事件。
这段才是下拉框或者是下拉菜单的核心代码！！

$(".select_list > li > a").hover(function(){
		$(this).animate({
			paddingLeft: 20
		},100);
	},function(){
		$(this).animate({
			paddingLeft: 5
		},50);
	});

这一段是鼠标下拉框的触发水平移动事件：
获取class=”select_list”下的子元素li的子元素a，当鼠标放上（hover）触发：animate事件，左边内边距20px;时间100ms(0.1秒)，当鼠标移开的时候再次触发animate事件，左边内边距5px;时间50ms(0.05秒)。

鼠标划过显示菜单, 离开隐藏菜单, 没有能比这个跟简单的了.

jQuery(document).ready(function(){
	// 找到所有菜单, 并添加显示和隐藏菜单事件
	jQuery('#menus > li').each(function(){
		jQuery(this).hover(
			// 显示菜单
			function(){
				jQuery(this).find('ul:eq(0)').show();
			},
			// 隐藏菜单
			function(){
				jQuery(this).find('ul:eq(0)').hide();
		});
	});
});

点击这里查看Demo演示

————————————————————————————————————————
淡出淡入导航菜单，需要注意的是，这里需要加入延迟处理！

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];

jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
			// 取消淡出菜单的线程, 延时淡入菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeIn(200);
				}, 400);
			},
			// 取消淡入菜单的线程, 延时淡出菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeOut(200);
				}, 400);
			});
	});
});

点击这里查看Demo演示

——————————————————————————————————————-

鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];

jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(

			// 取消卷起菜单的线程, 延时展开菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},

			// 取消展开菜单的线程, 延时卷起菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}

		);
	});
});

点击这里查看Demo演示

自从微软强制绑定浏览器以来，IE独霸浏览器的半壁江山，从IE4.0开始到现在出来的IE9，真是“IE代有人才出，各领风骚好几年”，回首曾经风火一时的IE6，如今已经沦为众矢之的问题先生，呵呵，解决兼容问题本身就是一名前端理应具备的素质。
不过看到阿里UED分享的如此文章，心里不由得一阵，一些原本没接触过的和接触过的这里都有，呵呵感谢阿里的分享精神：

做Seo方面由于Google的退出，国内已是百度一家独大，其他有道/搜搜/搜狗等目前市场份额比较小，故特针对百度方面的一些Seo做一个简单的描述与整理，有一些不足之处请大家指教!

其实如果涉及到运营网站层面的话，SEO在建站之初就要有所准备，一般来说，网站的SEO分为三步：树状规划-seo布局-seo实施！

一：树状规划

树状规划其实很简单，
一个网站需要有一些频道页有一些文章，就好像一个公司需要有总裁有各部门经理有各部门主管有各部门基层员工（注意这里都是各部门！），大家各司其职，各尽其事，这样公司才能正常运转。SEO的道理是一样的，一个网站需要有一些频道或者栏目，每个栏目下面有自身栏目的一些内容，这当然是最基础的。（这一段当做废话好了……）

二：SEO布局
说到布局，有些同学会误会是网页布局，那就错了，这里说的布局是只我这边私人总结的seo的三要素的拟定标准和一些选取依据。插句题外话，其实搜索引擎很聪明，他能识别原创，能识别伪原创，能识别静态和动态，但是它再聪明也只能识别文字，不能识别图片。So，从文字下手，从前面提到的SEO三要素下手.
(1)*关键词-Keywords：
关键字乃SEO重中之重，大家上搜索引擎搜索的都是关键字，一个足够优化的关键字能迅速给你的网站带来流量，直接进入正题
关键字的选择方法
1.网站建站规划中的核心keywords
2.主要竞争对手所使用的keywords
3.百度相关的keywords
建站之初核心关键字自然必不可少，而竞争对手的成功关键字往往能给你带来启发，这里要说的是百度相关的关键字，看图1说话：

在百度中输入望远镜（你的核心keywords），百度会自动延伸出一些热门的搜索词汇，这些词汇如果跟你自己需要做的望远镜的产品有直接关系，可以直接为我所用！好，我们保留核心keywords，点击搜索，再看图2

嘿嘿 在搜索内容的底部，百度又会出来一些相关的长尾关键词，同样你可以借用这里的keywords放在自己的网站上。
长尾关键字
上面两张图，都是搜索的核心关键词，诚然，如果想做长尾关键字可以用同样的方法来实现，但是在于长尾关键词的选择上，需要下一点功夫。

我们发现 搜索天文望远镜的时候，望远镜这个keywords也在百度搜索的范围内！说明百度这家伙还是会识别长尾关键字中的（核心）关键字。

理论上来讲，keywords的选择是自己对网站或者是网站某个频道某个栏目的定位方向，在这里我并不赞成盲目的堆积keywords，而是希望某一个栏目只做当前栏目的关键字，而同时这个栏目的keywords最好与其他栏目的keywords有所区别！目前经验来看，一个网页的keywords最好不要超过10个，稳定在6-8个比较适宜。

(2)*标题-Title：
标题的选择也有一点点技巧

title是百度直接体现出来的，给用户直接阅读的一句话，就好像上图中红框所示，但是注意最后一个蓝色的框，我们发现有省略号，而前面几个是没有的，为什么呢？这里就需要研究一些title的字数，目前百度允许的最大字符数应该在60-70（个人估算），大概30-33个字，所以建议title文字的长度尽量是一句包含有核心关键字或者页面关键字的通俗的语句，且字数小于等于30！

(3)*描述-Description：
关于description的话，这里需要提及的其实跟标题差不多，尽可能的包含你的keywors，也尽可能的对当前页进行描述，某些blog和cms程序通常的description都是直接调用文章摘要，我们不妨也可以认为这就是文章摘要！这里需要注意的是，文字小于等于90！！自己数一遍！！

三：SEO实施
实施的这一部分的话，主要分为
1.友情链接
2.锚文本（内链，站内优化）
3.反向链接
在说上述三点的同时，插入一段比较重要的东西~~百度自己家亲戚 什么三姑奶奶的小舅子的姑父的大姨妈……
扯远了，在这个百度推广横行的年代，有钱便是爷，有钱就能排第一，但是我们做seo比的不是钱，是精力。所以我写这篇文章本身不把这黑心的百度推广纳入范围之内，说的是百度家族的其他几位常用的大师：百度知道/百度百科/百度贴吧/百度图片，这几位虽说不能在seo上起决定性作用，但是他们的存在依然不能忽视，百度做的也是肥水不流外人田的买卖，自家哥们的东西当然排队靠前。 所以有心的朋友不要忽略这重要的一环！

(1)*友情链接-Link：
至于友情链接的质量和PR我这里不再多说，说是还是关键字，如果短期内你想做的keywords是“天文望远镜”，那么在交换友情链接的时候,你可以请对方站长帮你做友情链接的文字 就做“天文望远镜”，过一段时间你需要做“观鸟望远镜”，那么在这一段时间你交换的友情链接上就要请对方放上“观鸟望远镜”，值得注意的是，以前交换时候放的“天文望远镜”的站依然保留，不需要修改为“观鸟望远镜”！

(2)*锚文本 站内优化-Anchor Text：
我们知道自己的内链多，可以有更好的用户体验效果，锚文本可以链接到站内的相关频道，也有助于增加网站权重！

(3)*反向链接-Link：
很多人在A5刷签名，其实在一些能迅速被百度收录的论坛里设置签名只是众多手法中的一种而已，其他手法诸如开博，自助提交搜索引擎，发新闻稿，在别人的blog上留言等等，都会留下的，多多益善！

世界之大无奇不有，想当年，清政府闭关锁国，造成了技术 经济全面落后的中国。现如今作为一名前端，咱也不能关起门来闭门造车，要多看看行业内一些顶尖的团队的经验心得，今天偶然点开淘宝UED的blog，发现CSS的border的神奇作用！！通过CSS可以做出你想要的三角形也可以做出一些简单的圆角边框，毕竟有些门户网站少发一次图片请求比多一行CSS代码更节省资源！

一个盒子包括: margin+border+padding+content
– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
–我们可以通过调整宽度的大小来调节三角形形状.

Example One. 如果我们正常设置一个盒子的边框：

#div1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

效果就是上图!

Example Two: 现在我们设置这个盒子的高度和宽度为0！

#div2 {
    height:0;
    width:0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /* 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

嘿，伙计，到这里你是否领悟到啥了？对！4个不同方向的三角形可以诞生了，需要的是你设置它们的背景色！

Example Three:现在我们保留上面来看看,#28

#div3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

这里需要注意的是，IE这位爷素来六亲不认，如果IE6的话 不能写transparent,只能让边框色与背景色相同

Example Four:上面都是小三角的斜边都是依靠原来盒子的一条边,
还有另外一种形式的小三角, 就是斜边在盒子的对角线上：

#div4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 #3366ff transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:40px 40px 0 0 ;
}

现在保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…
多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形！！
< 像这种不规则的三角形, 延伸一下, 放在气泡框上, 就可以省去拼背景图片的麻烦了，要知道，有些时候多两行CSS和html代码要比多一次图片请求更省的多！

另外, 关于气泡框, 可以使用棱形字符(◆)来实现, 设置其font-size, 颜色和背景色一致, 定位可以使用margin负值和absolute绝对定位来实现！
———————————————————-
我是分割线
———————————————————-

下面我们来看：Border圆角图案生成

要想实现上图，简单的CSS+html~~

Html

<div class="box">
    <div class="top"></div>
    <div class="center">我是一只小小鸟、小小鸟！</div>
    <div class="bot"></div>
</div>

Css

.box{width:500px;}
.top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000;
     border-left:3px dotted transparent; border-right:3px dotted transparent;}
.center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
.bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc;
     border-left:3px dotted transparent; border-right:3px dotted transparent;}

原理很简单，我们拆开来看，有图有真像：

简单吧？
不过IE6的话 会有点锯齿状，不过还好，问题不是很大

仍个Jquery中文手册到自己Blog上，方便查查!
Jquery中文手册 在线查看地址

由Zarknight 编译完成的Mootools中文手册，有幸在Google下到，争取把它变成自己的！！

Mootools中文手册 在线查看地址

在这个多灾多难，命途多舛的年代，在这个灾区洪水泛滥，世博人山人海的季节，我淡定的搭上了始往乌镇的大巴……

路上，导游操着东北腔调，用他那三寸不烂之舌，滔滔不绝的给大家讲述乌镇风土人情，什么小偷当道，什么宰客不吐骨头，什么强龙不压地头蛇….见鬼了。。我怎么就就记住了这些？！~！@&*

哎杯具的一天,好歹留了张影

虽然Chrome也有类似Firebug的调试工具，但是始终觉得没有Firefox里来的顺手，所以平时用Google的Chrome比较少，而且Google的信誉摆在这里，想当然是得跟着国际标准W3C混的，不过事有蹊跷，今天无意中用Chrome打开页面，发现有些绝对定位的地方Chrome解析的确实不太一样，所以翻遍了网上的兼容和解决方案，终于在群里一位热心朋友的帮助下，顺利搞定!

@media screen and (-webkit-min-device-pixel-ratio:0){
    ********************
}