另类提示框-猴子猿

我这里说的提示框，就是当用户将鼠标移动到需要提示的图标时，就会在这图标的位置出现一个提示框了。

咦，那这有什么好说的呢？

如果你来实现这一效果，你会怎么做呢？

初步的做法嘛，就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片，然后利用这张图片作为提示背景，里面输入指定内容呗。

恩，想法简单粗暴，那我们就来初步实现以下吧。

首先你得有两张上述说的图片，图片制作结果如下：

　　　　

　　　　　　 图一 　　　　　　　　　　　　　　　 图二

好了，图片有了，接下来，就是将这两张图片作为背景。

我的想法是，两张图片利用两个div，将图二（三角形图片）嵌套在图一（矩形方框）里，然后达到这一提示框的效果。

   DOCTYPE html  > 
       head  > 
           title  > tip   title  > 
           meta   http-equiv  ="Content-Type"   content  ="text/html; charset=utf-8"  /> 
           style  >  
            #liuTip   {  
                background  :  url(img/title_back.png) 0 10px no-repeat  ;     
                width  :  220px  ;  
                height  :  112px  ;  
                overflow  :  auto  ;  
                position  :  absolute  ;  
                display  :  block  ; 
             }  
            #liuTip div   {  
                background  :  url(img/title_arrow.png) 0 0 no-repeat  ;     
                width  :  40px  ;  
                height  :  11px  ; 
             } 
           style  > 
       head  > 
       body  > 
           提示框  --> 
           div   id  ="liuTip"  > 
               div  >  div  > 
           div  > 
           提示框结束  --> 
       body  > 
   html  >  

查看更多关于另类提示框-猴子猿的详细内容...