XHTML+CSS应用教程——CSS实现小提示框

<style type="text/css">.info ul,li{list-style-type: none;}.info li{ float:left; margin-left:30px;}.info span{display:none; display:block;}.info { position:relative; text-decoration:none; font-size:12px; width:250px; text-align:center; border:1px solid #ccc; height:50px; line-height:25px;}.info a { text-decoration:none;}.info a span { display:none;}.info a:hover{ position:relative;}.info a:hover span{ display:block; position:absolute; top:30px; left:60px; width:130px; border:1px solid #ff0000; background:#fff; color:#000; padding:5px;text-align:left;}/*下面的代码暂时在IE内不起作用*/.info:hover {background:#eee;color:#333;}</style>

<style type="text/css">

.info ul,li{list-style-type: none;}

.info li{ float:left; margin-left:30px;}

.info span{display:none; display:block;}

.info {

position:relative;

text-decoration:none;

font-size:12px;

width:250px;

text-align:center;

border:1px solid #ccc;

height:50px;

line-height:25px;

}

.info a { text-decoration:none;}

.info a span { display:none;}

.info a:hover{ position:relative;}

.info a:hover span{

display:block;

position:absolute;

top:30px;

left:60px;

width:130px;

border:1px solid #ff0000; 

background:#fff; color:#000;

padding:5px;text-align:left;

}

/*下面的代码暂时在IE内不起作用*/

.info:hover {background:#eee;color:#333;}

</style>

……

<ul class="info">

<li><a href="http://www.cainiao8.com">CSS提示<span>你可以在这里写一些提示</span></a></li>

</ul>

……

• CSS提示你可以在这里写一些提示