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

娶民国内阁总理孙宝琦之女

曾购进巨额帝俄时代的纸币卢布倒卖，俄国革命后这些纸币一夜之间成了废纸，导致精神失常。