fireyy blog

早就发现Lokesh Dhakar的lightbox的效果很酷，今天又发现另一个国外达人Nathan的Hoverbox，纯CSS的技巧，酷。

把两个东西简单结合一下，其实花不了什么技巧，不过东西更酷了一点。

Lightbox and Hoverbox: 看效果演示 | 下载 (338kb)

Nathan向我们解释了Hoverbox的实现：

The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6, a series of * html hacks place the positioning on the containing a href.

最近渐渐的开始使用“标题标签”，其实这个标准的HTML标签是很酷的。

以前你这样定义你的blog名称

<div class="title">fireyy blog</div>

然后写css样式

.title {
font-size:20px;
font-weight:bold;
}

这种方式其实很不直观，(有虚荣心的人总是想让搜索机器人很简单的认出你的代码 )

你可以尝试使用h1

<h1>fireyy blog</h1>

然后写css样式

h1 {
font-size:20px;
font-weight:bold;
margin:0px; /*h1-h6默认有空白,设定外补丁的值为零，以便自己细调。*/
}

另外你可以看看H1-H6和其他尺寸的对照表

由于本站的天气预报的图片是png格式的，png在IE7.0之前的版本里不会显示透明，所以只能加了一个js来实现png透明，于是就用到了IE条件注释。（具体可以看本页面源代码 ;)）

条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。

<!--[if IE]>这是Internet Explorer< ![endif]-->
<!--[if IE 5]>这是Internet Explorer 5< ![endif]-->

<!--[if IE 7]>这是Internet Explorer 7< ![endif]-->
<!--[if gte IE 5]>这是Internet Explorer 5 或者更高< ![endif]-->
<!--[if lt IE 6]>这是版小于6的Internet Explorer< ![endif]-->
<!--[if lte IE 5.5]>这是Internet Explorer 5.5或更低< ![endif]-->

注意两个特殊的语法：
gt: 大于 
lte: 小于或等于 
!IE 感叹号的使用