Front End on Gore's Blog

清理浮动！！

Tue, 03 Jan 2012 13:10:00 +0800

清理浮动！也叫闭合浮动元素！

我想，做过网页的同学应该都听过这个名词。在网页制作中，浮动是个好东西啊。但是由于浮动带来的BUG也非常之多。浮动有时候会带来很多诡异的意想不到的各种各样的表现。简单的IE6双边距BUG就是浮动一手制造的。

今天说说，清理浮动。

在什么情况下要记得清理浮动呢？我以前也看过一些别人写的文章，大都是介绍如何清理浮动。但终不太明白何时要清理浮动，何时会出来那种要清理浮动的情况。

纸上得来终觉渐，觉知此事要躬行。只有当自己真正遇到了，才知道是怎么一回事。

简单来说，我的理解：清理浮动就是当外层标签没有浮动而内层标签却浮动的情况下，要为内层标签清除浮动。否则会外层标签的一些样式则显现不出来。

至于如何清理浮动，请移步，他写得绝对比我好。

闭包小探

Wed, 30 Nov 2011 11:50:00 +0800

大概有些小搞懂Javascript闭包的一些原理，有些小兴奋，特贴图留念，大家仔细看图就知道了。

jQuery 基础总结

Wed, 30 Nov 2011 09:50:00 +0800

一些 jQuery 基础

$(document).ready(function(){})
//相当于onload事件jQuery对象与dom对象的转换

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML; //如何获取jQuery集合的某一项
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性同一函数实现set和get
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");

$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300

$("input").val(); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test

$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
//同样blur,focus,select,submit事件都可以有着两种调用方法集合处理功能

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']});
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]});
//实现表格的隔行换色效果

$("p").click(function(){.html())});
//为每个p元素增加了click事件，单击某个p元素则弹出其内容操作元素的样式
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });
//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select");
//如果存在（不存在）就删除（添加）名称为select的class绑定事件
$("p").bind("click", function(){.text());});//为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件

汉化aptana教程

Sun, 16 Oct 2011 00:58:00 +0800

这是篇教程式的文章，教大家如何汉化aptana，绝对长期有效，不会是只单单的添加更新源。

因为常常网上公布出来的软件更新源会出现过期或无效的问题，所以，现在我来教大家如何在aptana官网上去找到aptana的语言更新源，很强大哦，绝对长期有用。

首先找开aptana的官网，进入support页面，点击view documentation，如图

把红框内的网址复制到更新软件源里去就OK了。。。。

或许直接打开下面链接

http://www.eclipse.org/babel/downloads.php

官网上都会实时更新，所以只要知道怎么找到这个源，就不怕源会失效了，对吧。。。。霍霍。。。

简单有效的CSS兼容解决方案 ( ie6 ie7 firefox )

Tue, 04 Oct 2011 16:26:00 +0800

现在，浏览器的发展很快，但总会有那么些人放着优秀的浏览器不用，总守着原始的古董。上次小博经过一系列改造，已经不支持ie6进行访问了，如今ie已经更新到了ie9，win8将会搭载ie10浏览器…

这里提供的CSS兼容性解决方案绝对行之有效，而且简单，不说废话了：

margin:25px auto; /*标准浏览器*/
#margin:25px auto; /*IE7*/
_margin:25px auto; /*对IE6有效 ( 专属 ) */

( 注意：顺序不可颠倒，因为后面两项是对浏览器HACK的修补 )

不信你就试试，哈哈！

手动删除Firefox中一些无法卸载的扩展

Sat, 01 Oct 2011 12:36:00 +0800

这篇文章是转的，里面的方面，经本人亲测，是有效的，觉得很不错，就转过来了。嘎嘎

安装skype的时候没注意选择，结果skype给我的Firefox安装了一个扩展，让我吐血的是想卸载这个扩展的时候却发现卸载的按钮是灰色的。

同样流氓的扩展还有安装JDK以后出现的两个Java Console

没办法，看来得手工删除了。

首先跑去Firefox存储用户的文件夹搜索这几个扩展，无果

在Windows7下面的路径为：

C:\Users\{用户名}\AppData\Roaming\Mozilla\Firefox\Profiles\{随机码}.default\extensions

在XP的路径为：

C:\Documents and Settings\{用户名}\Application Data\Mozilla\Firefox\Profiles\{随机码}\extensions

附，鉴定扩展的方法：

有的扩展文件夹的名称是基于邮箱的，所以比较好找如firebug的是firebug@software.joehewitt.com

但是有的扩展是用的GUID来命名例如FireFtp的文件夹叫做{a7c6cf7f-112c-4500-a7ea-39801a327e5f}

这时我们可以用任意文本编辑器打开每个扩展文件夹下面的install.rdf,然后查看xml字段<em:name></em:name>中的名称即可确定是哪个扩展

如果个人文件夹里面没有那么该扩展应该就是公共的，于是去firefox的安装路径下面寻找扩展文件夹

skype的插件果然在里面

删除几个相关的文件夹，重启firefox后那几个插件就消失了，问题解决

IE6下字体美观的解决办法

Sun, 18 Sep 2011 14:47:00 +0800

先抱怨下：这些天天天都在纠结着网站的事，无奈…

为了网站可以在ie6下尽量保持网站原有的美观与舒适，一直都在寻求ie6下字体的办法，如今感觉略有小成，得瑟如下：

我想大家都知道，如今最适合在电子屏幕上显示的字体就是“微软雅黑”了（可笑的是这款字体不是中国公司造的，是微软公司为vista系统打造的一款字体）。

首先考虑肯定是给页面设“雅黑”字体了，这一点vista,win7用户都是完美支持。然后就是坑爹的XP用户了，特别是不升级浏览器的顽固派。以前一直很疑惑ie6到底支不支持“微软雅黑”，（在用户已安装字体前提下），因为以前在自己本机上测试过，ie7,8显示出微软雅黑，ie6却没有效果。

经过自己的一番搜索，搞定了，如下：

http://blog.csdn.net/xfsnow/article/details/6635568

后面研究发现，xp用户都是安装有黑体字体的，所以我的想法是利用ie6 hack默认给ie6 为黑体字体，而其它浏览器首选"雅黑"，如下：

font-family:"Microsoft YaHei",SimHei,Arial,Helvetica,sans-serif;
_font-family:SimHei,sans-serif; /*安装了clear type，否则默认不设最佳*/

IE版本判断之Html

Sun, 24 Jul 2011 10:08:00 +0800

今天在重温zen coding，查看zen coding配置文件时，偶尔看到html判断IE版本的zen coding缩写，便顺便把相关的知识总结下。

zen coding提供的缩写很简单 cc:ie6 即：

其它的大概还有这些形式（以IE6为例）

zencoding的缩写为 cc:ie

值得注意的是，这类html代码只有在IE中才会识别，其它浏览器只会当作注释，所以个人感觉<!--[if ！IE]><![endif]> 这种代码无意义。

其实是很好记忆的：

lt : less than
gt : greater than
lte : less than or eqal