为FireFox增加自定义搜索引擎-w3school

biao166 — Tue, 27 Dec 2011 16:00:14 +0000

好像已经养成一种习惯了，在firefox上搜索是我不会再打开baidu或者google，而是直接在工具栏上搜索了，w3school是初级菜鸟码农必查的，故萌生把w3school的搜索添加到firefox上。

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的文件，将下面的代码保存进去


w3school    //搜索栏显示的名字
w3school  //选中该搜索引擎后，显示的描述名
UTF-8   //编码
data:image/bmp;base64,Qk04AwAAAAAAAD
YAAAAoAAAAEAAAABAAAAABABgAAAAAAAIDAAASCwAAEgsAAAAAAAAAAAA...

    //参数
  
  // {searchTerms}是固定的，这个就是在搜索栏里输入的内容

http://www.google.com/

Image标签内是一个base64的图像

关于搜索栏图标的做法：

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

下载：w3

　» 转载请注明来源：Biao166's life » 《为FireFox增加自定义搜索引擎-w3school》

notepad++ 启动和关闭都提示root element is missing

biao166 — Sat, 24 Dec 2011 08:20:11 +0000

如题，不晓得什么时候启动和关闭notepad++的时候都弹出提示框：root element is missing，但却不影响正常工作。

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

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

　» 转载请注明来源：Biao166's life » 《notepad++ 启动和关闭都提示root element is missing》

清理浮动的几种方法以及对应规范说明-转

biao166 — Tue, 13 Dec 2011 15:13:22 +0000

前言

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

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

采用一个HTML标签，以及css的clear属性，来手工清理浮动；
采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
使用 TABLE 以及 TD 标签作为浮动元素容器；
采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
在 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 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），或拥有布局。

默认拥有布局的元素：

, 
, , , 


,

Libiao's Blog