一个外部div，如果内部对象有float设置，产生了浮动，那么，外部div的高度不会随着内部对象而撑大
具体看例子：
/examples/clear.html
.clear { clear:both; height:0; overflow:hidden; line-height:1px;}
一直都是用
进行清除浮动，方便实用，又省事
现在想想，感觉总是有那么一点不妥，多出来一个div，貌似在结构上不是很规范。
于是重新整理了一下清除浮动的方法，老外写的文章很专业，哈哈：
How To Clear Floats Without Structural Markup
http://www.positioniseverything.net/easyclearing.html
.demo2 {border:1px solid #360;}
.demo2:after{ content:" "; visibility:hidden; display:block; height:0; overflow:hidden; clear:both;}
/* no ie mac \*/
* html .demo2 {height:1%;}
/* end */
*+html .demo2 {height:1%;} /* for ie7 */
.demo2 {display: inline-block;} /* for ie mac */
:after伪类，目前在IE6,IE7中都不能支持，IE8 bate不太清楚。。我还没有用到IE8。。
所以就有了针对IE的一些hack，除mac IE的hack：
/* no ie mac */
* html .demo2 {height:1%;}
/* end */
针对Mac IE的属性：
.demo2 {display: inline-block;} /* for ie mac */
在IE7竟然不支持* html div的方式：
*+html .demo2 {height:1%;} /* for ie7 */
这下好了。。。IE6、IE7、FireFox、Opera都通过了，至于Mac IE。。。我没有测试~~好在Mac IE的用户几乎为0吧。。
不知道是在哪位神仙的网站上看到这段代码，觉得很有趣，却百思不得其解。。。
放在这里，慢慢研究。
示例页面：/examples/clear-right.html
各浏览器效果：
.wrapper{
width:150px;
border:3px #666 solid;
padding:3px;
background-color:#efefef;
}
.sbox{
clear:right;/*注意，就是这个神奇的clear*/
float:left;
width:100px;
height:100px;
border:1px #000 solid;
background-color:#ccc;
}
待续….
Demo地址：/examples/input-line-height.html
在默认值的情况下，FireFox的默认文字好像较小，所以，尽量在全局设置时，定义一下各元素的文字大小。
.demo1 { line-height:25px; font-size:14px;}
设置了line-height后，FireFox没有什么问题，但IE高没有变化，里面的line-height变动了，貌似是overflow:hidden的效果。~~
.demo2 { line-height:25px; height:25px; font-size:14px;}
行高和高一起设置，FireFox不支持在input使用line-height
.demo3 { height:19px; font-size:14px; padding:6px 0 0 0;}
最后用padding的方法，解决问题，padding-top=(height-font-size)/2
或许有更好的解决方法，望牛人告知。
target=”_blank”已经不符合标准了，是不是很郁闷？这么方便的功能，为什么非得取消呢？
估计是因为用户体验问题，弹出新窗口对于用户来说，是强制的，用户体验不佳。
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
通过JS的方式达到弹出新窗口的效果，HOHO~
当前页面-比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不 同，用以给浏览者一个明显的指示。
设菜单有5个栏目：home、about、products、services、contact，分别给每个栏目一个ID，m1-m5，CSS可写成如下：
#home #nav li#m1 a,
#about #nav li#m2 a,
#products #nav li#m3 a,
#services #nav li#m4 a,
#contact #nav li#m5 a{color: #FFF; background: #DC4E1B url(navbg.gif) no-repeat;}
html页：
以下是引用片段：
<ul id="nav">
<li id="m1"><a href="index.html">Home</a></li>
<li id="m2"><a href="about.html">About</a></li>
<li id="m3"><a href="products.html">Products</a></li>
<li id="m4"><a href="services.html">Services</a></li>
<li id="m5"><a href="contact.html">Contact</a></li>
</ul>
然后分别给每个页面的bady标签一个独立的ID，例如给首页的ID是home，其余的类推。
比如在首页：
<body id="home">
<ul id="nav">
<li id="m1"><a href="index.html">Home</a></li>
<li id="m2"><a href="about.html">About</a></li>
<li id="m3"><a href="products.html">Products</a></li>
<li id="m4"><a href="services.html">Services</a></li>
<li id="m5"><a href="contact.html">Contact</a></li>
</ul>
这样做法的好处是每个页面的菜单都是一样的，方便修改，动态页包含也容易。
