代码挺简单的，DEMO请移步： 点此查看

数据是单独提取出来了，通过动态加入的：

以前几乎没弄过这样的效果，很是艰难，不过总算完成了！！！

预览：点击前往    点击下载

由于在notepad++里面的zencoding快捷键是设置成ctrl+e，所以在sublime里边也想要改过来（默认是tab），方法如下

菜单-preferences => key bindings – default => 搜寻tab

{ "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
{ "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},

将第二个tab替换成你想要设置的快捷键，注意不要与其他冲突…

Firefox添加搜索引擎大概有这么集中方法

1.安装插件

点击搜索栏，左边的下拉按钮，选择“管理搜索引擎”，在出现的页面点击”获取更多搜索引擎“，这个时候会登录到mozilla的add-on的网站上，随便点点就安装上了，里边的搜索引擎不多，不太适合国内用户

2.特别环境安装

火 狐打开可以增加搜索引擎的页面会提示你安装，比如你打开爱词霸的网站 http://www.iciba.com/ ，这个时候点击的搜索栏左边的下拉按钮，会出现” 增加 ”爱词霸辞典“ “，点击这个，会自动把当前页面提供的搜索引擎增加到你的搜索栏。

3.手动添加

自定义才是王道，查看w3school的搜索，是调用Goolge的自定义搜索来实现的，

http://www.google.com.hk/search?sitesearch=w3school.com.cn&as_q=html5

找到Firefox的搜索引擎目录searchplugins，里边有内置的几个，我们新建一个w3.xml的文件，将下面的代码保存进去

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>w3school</ShortName>    //搜索栏显示的名字
<Description>w3school</Description>  //选中该搜索引擎后，显示的描述名
<InputEncoding>UTF-8</InputEncoding>   //编码
<Image width="16" height="16">data:image/bmp;base64,Qk04AwAAAAAAAD
YAAAAoAAAAEAAAABAAAAABABgAAAAAAAIDAAASCwAAEgsAAAAAAAAAAAA...</Image>
<Url type="text/html" method="GET" template="http://www.google.com/search">
  <Param name="sitesearch" value="w3school.com.cn"/>  //参数
  <Param name="as_q" value="{searchTerms}"/>
  // {searchTerms}是固定的，这个就是在搜索栏里输入的内容
</Url>
<SearchForm>http://www.google.com/</SearchForm>
</SearchPlugin>

Image标签内是一个base64的图像

关于搜索栏图标的做法：

1. 制作一张 16×16的bmp文件。
2. 打开下面的页面 http://software.hixie.ch/utilities/cgi/data/data
3. 在出现的页面选中”base64″，在”Alternatively, upload a file:”右边，提交刚才制作好的文件
4. 点击按钮Generate

下载：w3

网上说是什么根元素丢失，按照提供的方法清空了系统的临时文件夹等等，都没用…只好自己寻找解决办法：

其他软件没出现错误，应该是notepad++的原因，最有可能是主题or插件or其他配置文件，一步一步排除，最终发现剔除SnippetPlus这个插件后，恢复正常，留个记号…

浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。

我们将现有已知的清楚浮动元素方法罗列下：

1. 采用一个HTML标签，以及css的clear属性，来手工清理浮动；
2. 采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
3. 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
4. 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
5. 使用 TABLE 以及 TD 标签作为浮动元素容器；
6. 采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
7. 在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式来自动清理浮动。

对这些方式我们一一来对照 CSS 标准（或者浏览器特性）来解释下。

使用 clear 样式清除

样例：

.clear-float {clear:both;}

clear 属性是 CSS 1 就提供的用来清除浮动的样式，设置了 clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，忽略其 margin-top 设置。这样，父容器高度未设定(值是 auto)时，由于定义的清理浮动样式元素所在位置处于浮动元素之下，容器计算后的实际高度就包含了浮动元素。

使用伪元素 :after 清除

样例：

.after-clear-float :after{content:""; display:block; clear:both;}

:after 伪元素是在 CSS 2 规范内提出的，IE 6/7 并不支持。它的作用是在指定该伪元素元素内，所有子元素最后自动生成一个伪元素，并可以为这个伪元素设定样式。在设定样式中，使用 clear 属性即可达到与手工添加元素指定清理的效果。

注意兼容问题：
:after 伪元素在 IE6/7 中并不被支持，这是由于之前的 IE 版本仅完全实现了 CSS 1 规范标准，以及一部分 CSS 2 规范，恰巧 :after 伪元素不在实现之例。

使用 overflow 清除

样例：

.overflow-clear-float {overflow:hidden;}
/* 或者 */
.overflow-clear-float {overflow:auto;}

overflow 样式值为 非 visilbe 时，实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素，会重新计算其内部元素位置，从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩，在 CSS 3 草案中被变更为名词 Root Flow，顾名思义，是创建了一个新的根布局流，这个布局流是独立的，不影响其外部元素的。实际上，这个特性与 早期 IE 的 hasLayout 特性十分相似。

注意兼容问题：
Block Formatting Contexts 概念是在 CSS 2.1 规范内被提出。因此 IE6/7 中并不被支持，这是由于之前的 IE 版本仅完全实现了 CSS 1 规范标准，以及一部分 CSS 2.0 规范。在 IE 7 中，overflow 值为非 visible 时，可以触发 hasLayout 特性。这同样使得 IE 7 同样可以使容器包含浮动元素。

使用 display:table 清除

样例：

.table-clear-float {display:table}
/* 或者 */
.table-clear-float {display:table-cell}

当元素 display 值被设定为 table 或 table-cell 时，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。

注意兼容问题：
除去 Block Formatting Contexts 在 IE 6/7 中的兼容性外，display:talbe 系列样式设定也不在 IE6/7 的支持范围之内。

使用表格类元素作为浮动元素容器

样例：

<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

当使用 TABLE TD TH 等 TABLE 系列标签时， 元素的 display 值实际上说是 display: table 系列，这同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时在 IE 6/7 中，TABLE TD TH 等 TABLE 系列标签天然拥有 haslayout 特性，这也可以使容器自动包含浮动元素高度。

使用浮动父元素清除

当元素设置 float:left/float:right 时 ，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时，这个样式也会在 IE 6/7 内触发 hasLayout 特性，拥有这个特性的元素也可以计算出浮动元素的高度，使父元素包含他们。

实际问题：
虽然这种方式并没有兼容问题，但实际使用中并不推荐。因为很容易推断出，页面中只要有一个浮动元素，使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。

触发 hasLayout 清除

样例：

haslayout-clear-float:{width:1px}
/* 或 */
.haslayout-clear-float:{height:1px}
/* 或 */
.haslayout-clear-float:{zoom:1}

‘Layout’ 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。

‘Layout’ 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。

‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。

‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值可以为 true 或 false。 当一个元素的 ‘hasLayout’ 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。

默认拥有布局的元素：

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

可触发 hasLayout 的 CSS 特性：

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)

IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：

min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 ‘width’ 或 ‘height’（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 ‘display:inline-block’ 才可以。

注意兼容问题：

haslayout 特性仅 IE 支持，其他浏览器并无此特性。可以依靠计算布局清理浮动的 haslayout 特性仅在 IE 6/7 中存在，IE8 之后将使用 CSS 2.1 的 Block Formatting Contexts 定义来达到同样效果。

注：IE hasLayout 特性厂商说明链接：hasLayout Property

以上内容是常见清理浮动手段生效的规范（和浏览器厂商特性）原理。我们希望页面开发者们，根据他们的兼容性特征以及实际情况来组合使用，以便达到实际项目目标。
建议

对于初学者我们推荐如下方式之一来清理浮动元素，它们均相对简单可靠：

采用一个HTML标签，以及css的clear属性，来手工清理浮动；
为元素设置 overflow:hidden 或 overflow:auto 值，配合可以设置 zoom:1 样式触发 IE6 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。
采用伪元素:after，配合可以设置 zoom:1 样式触发 IE6/7 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。

包含有关当前 URL 的信息，是 Window 对象的一个部分，可通过 window.location 属性来访问，存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

Location 对象方法

assign() 方法

定义和用法

assign() 方法可加载一个新的文档。

语法

location.assign(URL)

实例

[html]
<html>
<head>
<script type="text/javascript">
function newDoc(){
window.location.assign(<a href="../">http://www.biao166.cn</a>)
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()" />
</body>
</html>
[/html]

reload() 方法

定义和用法

reload() 方法用于重新加载当前文档。

语法

location.reload(force)

说明

如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

实例

[html]
<html>
<head>
<script type=”text/javascript”>
function reloadPage(){window.location.reload()}
</script>
</head>
<body>
<input type=”button” value=”Reload page” onclick=”reloadPage()” />
</body>
</html>
[/html]

replace() 方法

定义和用法

replace() 方法可用一个新文档取代当前文档。

语法

location.replace(newURL)

说明

replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

实例

下面的例子将使用 replace() 方法来替换当前文档：
[html]
<html>
<head>
<script type=”text/javascript”>
function replaceDoc(){
window.location.replace(“http://www.w3school.com.cn”)
}
</script>
</head>
<body>
<input type=”button” value=”Replace document” onclick=”replaceDoc()” />
</body>
</html>
[/html]
附：
Javascript刷新页面的几种方法：

• history.go(0)
• location.reload()
• location=location
• location.assign(location)
• document.execCommand(‘Refresh’)
• window.navigate(location)
• location.replace(location)
• document.URL=location.href

自动刷新页面的方法:
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20″>
其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20;url=http://www.biao166.cn”>
其中20指隔20秒后跳转到http://www.biao166.cn页面

3.页面自动刷新js版
<script language=”JavaScript”>
function myrefresh(){
window.location.reload();
}
setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
</script>

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>

//子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
(　或　<a href=”javascript:opener.location.reload()”>刷新</a>   )

//如何刷新另一个框架的页面用
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>

//如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。
<body onload=”opener.location.reload()”> 开窗时刷新
<body onUnload=”opener.location.reload()”> 关闭时刷新
<script language=”javascript”>
window.opener.document.location.reload()
</script>

开始调试吧，首先还原错误额！

将两个勾去掉，了解报错的大概位置,貌似这个位置没有过改动，想想自己白天改动了什么东西额，网上找下，原因最大可能是js数组最后一个元素后面添加了”,”。这个，貌似我真的添加了一个数组，关于bshare的自定义设置，看下吧，好家伙，貌似最后一个真的多了一个逗号，在火狐下轻松通过，却在IE给我做小动作。

GOOGLE出问题了？大清早发现PR变4，呼呼，不做评论，只当路过！！！

In Dreamweaver CS5 for Windows 7 replace the shortcut “Tab” to “Ctrl+Alt+Shift+Space” in the file Menus.xml

1. Open the C:\Users\YourUserName\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration\Menus\Menus.xml

2. Search for “Tab” (with quotes)

3. Replace “Tab” to “Ctrl+Alt+Shift+Space ”

4. Save the file

5. Restart Dreamweaver

换句话说在XP下面就在： C:\Documents and Settings\**用户名**\Application Data\Adobe\Dreamweaver CS5.5\zh_CN\Configuration\Menus\Menus.xml,在里边搜索“Tab”，然后用其他冷门的键代替，重启DW，再设置新的快捷键，我的为Ctrl+E，OVER！