在掌握了丰富而强大的css选择符之后，就具备了将css样式根据需要应用到网页中任何元素的能力。能够应用规则了，接下来就需要熟练掌握规则的制定方法——什么样的属性组合能够实现什么样的效果。一般的颜色、字体、字号、行高等的设置比较容易掌握，而初学者在应用css的时候，主要头疼的还是如何用css实现复杂的网页布局，从两栏布局、三栏布局，到表单设计等。在布局的时候，实际上主要是借助元素的宽、高、定位、浮动、边距、边框、间距、背景颜色、背景图片的组合来实现的。而所有这些，都要基于对css盒模型的理解。网上对盒模型的论述很多（推荐阅读《彻底理解css盒子模式》），我这里想从实用的角度来谈谈。
以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。但是通过上一篇日志的分析，xhtml要实现和css的解耦，就要尽量不依赖于css（或者说不要纯粹为了给css预留接口而添加不必要的class和id），那么，在用css布局之前，其实就有一个更紧迫的任务摆在我们的面前——如何将css规则准确应用到目标元素。于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。
虽然CSS在表现方面天生具有很多优势，但是如果不是web标准化的盛行，估计CSS不会达到今天这样的热门。所以要说CSS，肯定要从web标准化说起。实际上，对CSS的理解越深，才能越好地理解和使用CSS。
很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。
绝大部分现代浏览器支持 css 中的 :hover 伪类选择器，可以用于所有 html 元素。这很酷，因为这使你可以仅通过 css 来对表格行(<tr>)应用鼠标滑过事件(mouseover)时的特殊效果。然而，万恶的IE，对 :hover 伪类顶多只提供了有限的支持，具体支持的程度要取决于你的IE浏览器的具体版本。
Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和 :focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript 动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。
结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。
说明：在不改变HTML代码的前提下，通过CSS和JavaScript，对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。
具体实现：
1.假设我们要操作的图片放置在一个id="imgbox"的div容器中。如下面的代码：
2.首先，在css中增加两个类定义，为了避免影响到其它图片，最好是用选择限定符加以限定。如下代码：
3.然后在网页的<head>区域增加JavaScript，JavaScript将在页面载入完成之后，为我们指定的图片添加半透明效果和鼠标事件：
补充说明：
在上面的JavaScript中，设置图片的class属性的时候，同时使用了两种方式：
第一种方式是针对IE以外的浏览器，按理说设置class属性对所有的浏览器都是有效的。但是IE比较有个性，它通过元素的className来定义class属性。这是IE不符合规范的地方，但是我们不得不考虑到IE占据的广大市场。所以，同时使用两种方式，从而达到跨浏览器兼容的效果。
适合多图片调用的修改
当时做的时候是针对单张图片的情况做的。如果要用于调用的多图片，可以把JS代码做如下修改：
再做改进：改为当图片加载完毕就产生效果：
首先定义函数：
然后在图片调用代码的后面调用此函数（例如）：
<div id="imgbox" style="width:700px;margin:auto;"><img src="/images/logof.gif"></div>
<script type="text/javascript" language="JavaScript">transpic();</script>
利用CSS，尝试做了一个仿Windows窗口的横向纵向均居中的Div效果：
效果图如下：
以下是完整源代码：
最新评论