一个TIP信息提示框的实现

<style> <!-- #mopTip01 .arrowSet {font-size:3px} #mopTip01 .tip {vertical-align:top; background:#FFF} #mopTip01 .content {padding:4px; font-size:11px; line-height:1.5em} #mopTip01 .tip .content {background:#ffeb9a; line-height:18px; font-size:14px} #mopTip01 .tip .content h4 {padding:2px 5px; background:#724620; color:#fff; margin-bottom:3px} #mopTip01 .arrowSetBottom {font-size:3px} --> </style> 一个TIP信息提示框的实现

<style> #mopTip01 .leftTop{ font-size:3px;height:20px;width:20px; background-repeat:no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://news.sohu.com/upload/ghostren/yuanshikai/images/leftTop.png',sizingMethod='scale'); } #mopTip01 .arrowSet{font-size:3px;} #mopTip01 .arrow{ height:20px;width:60px;background-image:url('http://news.sohu.com/upload/ghostren/yuanshikai/images/arrowTop.png');background-repeat:no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="tip_box/arrowTop.png"); } #mopTip01 .top{ background-repeat:repeat-x; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/top.png"); } #mopTip01 .rightTop{ font-size:3px;width:20px;background-repeat:no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/rightTop.png"); } #mopTip01 .t_left{ width:20px; background-repeat:repeat-y; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/left.png"); } #mopTip01 .tip{vertical-align:top; background:#FFF} #mopTip01 .content{padding:4px;font-size:11px;cursor:default;line-height:1.5em;} #mopTip01 .tip .content{background:#ffeb9a; line-height:18px; font-size:14px;} #mopTip01 .tip .content h4{ padding:2px 5px; background:#724620; color:#fff; margin-bottom:3px;} #mopTip01 .t_right{ width:20px;background-repeat:repeat-y; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/right.png"); } #mopTip01 .leftBottom{ font-size:3px;height:20px;width:20px;background-repeat:no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/leftBottom.png"); } #mopTip01 .arrowSetBottom{font-size:3px;} #mopTip01 .bottom{ background-repeat:repeat-x; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/bottom.png"); } #mopTip01 .rightBottom{ background-repeat:no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/rightBottom.png"); } #mopTip01 .close{ position:absolute;top:0px;left:0px;height:27px;width:27px;cursor:pointer;font-size:3px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://news.sohu.com/upload/ghostren/yuanshikai/images/closeBtn.png"); } </style> <div id="mopTip01" style="left: 265px; width: 440px; zoom: 1; position: absolute; top: 375px; z-index: 9999; font-size: 3px" sizcache="5" sizset="0"> <table sizcache="5" sizset="0" id="table4" border="0" cellpadding="0" cellspacing="0"> <tbody sizcache="5" sizset="0"> <tr sizcache="5" sizset="1"> <td class="leftTop" style="background-image: none"> </td> <td sizcache="5" sizset="1"> <table class="arrowSet" style="WIDTH: 400px" sizcache="5" sizset="1" id="table5" border="0" cellpadding="0" cellspacing="0"> <tbody sizcache="5" sizset="1"> <tr> <td class="arrow" style="behavior: none; background-image: none">　 </td> <td class="top" style="width: 340px; height: 20px; background-image: none">　 </td> </tr> </tbody> </table> </td> <td class="rightTop" style="behavior: none; background-image: none">　 </td> </tr> <tr> <td class="t_left" style="background-image: none">　 </td> <td class="tip" style="WIDTH: 400px; HEIGHT: 0px"> <div class="content"> <h4> 娶民国内阁总理孙宝琦之女 </h4> 曾购进巨额帝俄时代的纸币卢布倒卖，俄国革命后这些纸币一夜之间成了废纸，导致精神失常。 </div> </td> <td class="t_right" style="background-image: none"> </td> </tr> <tr sizcache="4" sizset="4"> <td class="leftBottom" style="background-image: none">　 </td> <td sizcache="4" sizset="4"> <table class="arrowSetBottom" sizcache="5" sizset="4" id="table6" border="0" cellpadding="0" cellspacing="0"> <tbody sizcache="5" sizset="4"> <tr> <td class="bottom" style="width: 400px; height: 20px; background-image: none">　 </td> </tr> </tbody> </table> </td> <td class="rightBottom" style="background-image: none">　 </td> </tr> </tbody> </table> <div class="close" style="ZOOM:1">　 </div> </div>

	娶民国内阁总理孙宝琦之女 曾购进巨额帝俄时代的纸币卢布倒卖，俄国革命后这些纸币一夜之间成了废纸，导致精神失常。