许多网站都使用了下拉菜单效果，但大部分都是用Javascript实现的。 自己写过下拉菜单的人应该知道，处理onmouseover和onmouseout事件极其繁琐。 而实际上，仅使用CSS的:hover伪类就能简洁地实现下拉菜单效果。
不过遗憾的是只有完全支持:hover伪类的浏览器如Firefox才能实现这种效果。 像IE这种仅能部分支持:hover的浏览器就只能老老实实地用Javascript来做了。
请看下面的代码。
<html>
<head>
<style>
</style>
</head>
<body>
<div id="menu">
<h3>Select from menu</h3>
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
<li>menu item 5</li>
</ul>
</div>
</html>
我们尚未定义样式表，这个页面显示结果就是一个简单的列表。
为了实现下拉菜单，我们先将<ul>元素隐藏起来：
#menu ul { display: none; }
然后应当让菜单在鼠标经过时显示，所以应当为<div>的:hover伪类添加如下定义：
#menu:hover ul { display: block; }
阅读全文 »今天来讲一下CSS中的绝对定位和相对定位，即position属性的使用方法。
position属性常见的值有三种：
- static: 不使用定位（默认值）。
- absolute: 使用绝对定位。
- relative: 使用相对定位。
在解释定位方式之前，首先要阐明文档流(document flow)的概念。 浏览器在解释HTML文档时，它会将各个元素按照在HTML文档中出现的次序， 从上到下依次排列。例如下面的代码将产生如下的效果：
又懒了一下，好几天没更新了。其实上周买的书到了，这几天在忙着看书， 没顾得上研究技术。昨天一口气看完了《CSS禅意花园》， 觉得这本书不愧CSS设计的王者称号，无论从欣赏还是学习的角度，这本书都值得一读。
当然，原书网站CSS Zen Garden也一定要去看看。
今天先来介绍一个从这本书上学到的小技巧：如何用图片替换文字。
所谓图片替换文字就是用图片代替HTML中的某个文字元素，如标题。网站设计中很常用， 比如我想用图片而不是文字来显示blog标题，我可以在本应当显示<h1>的地方显示一个<img>， 但这样页面中失去<h1>会影响搜索引擎评分。当然我也可以通过css给<h1>设置一个背景图片， 但<h1>内的文字必须显示，否则也会影响搜索引擎评分。 可以使用下面的方法之一来通过CSS完美解决。
阅读全文 »
