几个CSS使用技巧
昨天看了一篇文章，是讲CSS技巧的，有几个技巧很不错，拿过来给大家看看。
1、同时使用两个 class
对于一个网页元素中写一个class的情况我们经常见到，而你也可以为网页中的元素指定一个以上的 class，多少个都无所谓。（如果你看过 Google Mail 或 Google Reader 的代码会发现，他们大量应用这种方法控制显示），例如：
<p class="text side">...</p>
p 会同时被应用 text 和 side 两个 CSS 类。
2、为一个页面指定最小宽度和最大宽度
我们知道 CSS 中有个 min-width 属性，但并不是每个浏览器都能支持它（可恶的 IE），此外，我们也无法对 body 指定 min-width，因此我们可以使用下面的方案来解决：
<p id="container">...<!-- div--></p>
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? " 600px": "auto" );
}
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? " 600px": "auto" );
}
当然，你也可以进一步发挥，同时指定一个 max-width
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? " 600px" : document.body.clientWidth > 1200? " 1200px" : "auto");
}
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? " 600px" : document.body.clientWidth > 1200? " 1200px" : "auto");
}
3、3D 按钮效果
提到这个特效，我们第一反应肯定是要用图片来实现，事实上，用 CSS 也可以做出效果很不错的按钮，我们来看看它的代码：
<style type="text/css"> a.demo-button { display: block; border: 1px solid; border-color: #aaa #000 #000 #aaa; width: 8em; background: #fc0; }
a.demo-button:hover { position: relative; top: 1px; left: 1px; border-color: #000 #aaa #aaa #000; } </style>
a.demo-button:hover { position: relative; top: 1px; left: 1px; border-color: #000 #aaa #aaa #000; } </style>
<a class="demo-button">按钮一个</a>
效果还不错吧，很简单。
这几个CSS技巧里面，对我启示最大的是第二个，因为我第一次看到CSS里面能和写程序似的写这样的判断代码，受益匪浅啊。
如果你觉得IE不好用（微软自己都承认IE的技术不如Firefox），你可以 ，来体验Firefox带给你的超爽感觉。
