名站导航为爱好css的朋友们提供相关的知识。
IE Firefox在css教程中的差别 (部分)
- 此篇文章具体介绍如下
复制代码 代码如下:
<style>
body { font:verdena; font-size:14px; color:#000 }
h1{ font:verdena; font-size:22px; color:#000 }
h2{ font:verdena; font-size:15px; color:#000; text-align:left }
div#main { margin:30 }
/*关键代码开始*/
a.info {
position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none }
a.info:hover {
z-index:1; background-color:#ff0 }
a.info span {
display: none }
a.info:hover span { display:block; position:absolute; top:25px; left:60px; width:130px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center }
/*关键代码结束*/
</style>
<body>
<div id="main">
<h1>单纯使用CSS教程实现动态提示信息</h1>
<h1>不用js可以实现信息提示效果?!(title和alt除外)</h1>
<h2>By [51js.com]zdzhuo</h2>
<h2>Ie5.5 , Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用</h2>
<a class="info" href="#"><b>这是提示信息</b><span>www.fj126.net</span></a>不需要js就能实现的提示信息<a class="info" href="#"><b>单纯使用CSS教程实现提示信息</b><span>一个非常简便的方法
原理也浅显易懂</span></a></div>
</body>
<body>
<div id="main">
<h1>单纯使用CSS教程实现动态提示信息</h1>
<h1>不用js可以实现信息提示效果?!(title和alt除外)</h1>
<h2>By [51js.com]zdzhuo</h2>
<h2>Ie5.5 , Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用</h2>
<a class="info" href="javascript:;"><b>这是提示信息</b><span>www.fj126.net</span></a>不需要js就能实现的提示信息<a class="info" href="javascript:;"><b>单纯使用CSS教程实现提示信息</b><span>一个非常简便的方法
原理也浅显易懂</span></a></div>
</body>
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,信息提示CSS教程 Sprites 技术分析
CSS教程 Sprites技术不新鲜，早在2005年 CSS教程 Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS教程玩家之间作为一种制作方法流传，后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅，其中第一条规则Make Fewer hTTP Requests就提到CSS教程 Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS教程 Sprites，最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中，也是使用到CSS教程 Sprites，几乎都有的CSS教程装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon. 一时间，CSS教程 Sprites无处不在。
