致力于网页设计制作教程:HTTP://WWW.ASP119.COM

当前位置：首页 > 网页制作 > CSS教程

使用css实现网页弹出气泡层效果

作者：迷失的宇　来源：ASP急救中心　浏览： 添加日期：2010-11-09 　我要评论( )

[导读]我们前面给大家介绍了，使用jquery实现网页弹出气泡层的效果，但是如果你不熟悉，或者不喜欢用它的话，我们用css也可以显示，今天给大家的介绍的就是使用css的方法。我们看下面的教程吧。

做个气泡层，我们需要下列这几个元素：带三角指示箭头、边框需要描边、渐进圆角。
然后我们的任务就是把他们一一都做出来，下面我们先做一个浮动层，效果如下：
image_thumb.png

下来我们的就要开始做三角箭头了，我们这里用的是一个空的S标签，来表示他的形状。代码如下：

<html>
     <head>
         <style>
         div{
             position:absolute;
             top:30px;
             left:40px;
             display:block;
             height:100px;
             width:200px;
             border:1px solid #666;
         }
         s{
             position:absolute;
             top:-21px;
             left:20px;
             display:block;
             height:0;
             width:0;
             font-size: 0;
             line-height: 0;
             border-color:transparent transparent #666 transparent;
             border-style:dashed dashed solid dashed;
             border-width:10px;
         }
         </style>
     </head>
     <body>
         <div>
             <s></s>
         </div>
     </body>
 </html>

效果如下图：
image_thumb_1.png

下面，我们需要一个白色背景的小三角将原来的深色三角遮住，用深色三角做底，为了颜色更明显一些，我这里用#ff0做底色，在s标签内嵌套一个空的i标签，并设置它的边框宽度略小一点。

<html>
     <head>
         <style>
         div{
             position:absolute;
             top:30px;
             left:40px;
             display:block;
             height:100px;
             width:200px;
             border:1px solid #666;
             background-color:#ff0;
         }
         s{
             position:absolute;
             top:-21px;
             left:20px;
             display:block;
             height:0;
             width:0;
             font-size: 0;
             line-height: 0;
             border-color:transparent transparent #666 transparent;
             border-style:dashed dashed solid dashed;
             border-width:10px;
         }
         i{
             position:absolute;
             top:-9px;
             left:-10px;
             display:block;
             height:0;
             width:0;
             font-size: 0;
             line-height: 0;
             border-color:transparent transparent #ff0 transparent;
             border-style:dashed dashed solid dashed;
             border-width:10px;
         }
         </style>
     </head>
     <body>
         <div>
             <s>
                 <i></i>
             </s>
         </div>
     </body>
</html>

效果如下：

image_thumb_3.png

在IE下，有点小瑕疵，三角的定位有点的问题，简单hack一下，并把背景颜色改回白色。

 <html>
     <head>
         <style>
         div{
             position:absolute;
             top:30px;
             left:40px;
             display:block;
             height:100px;
             width:200px;
             border:1px solid #666;
             background-color:#fff;
         }
         s{
             position:absolute;
             top:-21px;
             *top:-20px;
             left:20px;
             display:block;
             height:0;
             width:0;
             font-size: 0;
             line-height: 0;
             border-color:transparent transparent #666 transparent;
             border-style:dashed dashed solid dashed;
             border-width:10px;
         }
         i{
             position:absolute;
             top:-9px;
             *top:-9px;
             left:-10px;
             display:block;
             height:0;
             width:0;
             font-size: 0;
             line-height: 0;
             border-color:transparent transparent #fff transparent;
             border-style:dashed dashed solid dashed;
             border-width:10px;
         }
         </style>
     </head>
     <body>
         <div>
             <s>
                 <i></i>
             </s>
         </div>
     </body>
 </html>


在IE下的效果如下：

image_thumb_4.png

Tags:

相关文章

文章评论

正在载入评论数据中...
用户名：
  QQ号：
*
  匿名发表
验证码：

相关栏目

推荐文章

最新信息