一个TIP信息提示框的实现

一个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>

转载自：https://blog.csdn.net/iteye_11687/article/details/82159812