码迷,mamicode.com
首页 > Web开发 > 详细

利用 css 制作简单的提示框

时间:2015-12-05 22:30:28      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作

1.首先类似一个长方形右上角一个关闭按钮

技术分享

这里用到的主要是一些定位的知识,运用relative和absolute可以快速制作这样的一个提示框,想详细了解,点击这里

html代码:

<div id="position">
        <div class="position-relative">
            <span>提示信息</span>
            <a href="javascript:;"><i class="icon">&times;</i></a>
        </div>
</div>

css代码:

     #position {
           position: relative;
           width: 500px;
           height: 400px;
            margin: 0 auto;
           color: #fff;
           background: #66cccc;
     }
     #position .position-relative {
            position: relative;
            top: 20px;
            left: 20px;
            width: 300px;
            height: 200px;
            padding: 20px;
            background: #999;
        }
        #position .position-relative .icon {
            display: block;
            position: absolute;
            top: -10px;
            right: -10px;
            overflow: hidden;
            /*
            white-space: nowrap;
            text-overflow: ellipsis;
            */
            border-radius: 50%;
            width: 20px;
            height: 20px;
            line-height: 20px;
            color: #eee;
            font-style: normal;
            text-align: center;
            background: #666;
        }

2.还有类似这种qq对话框

技术分享

有了定位的知识后,这种对话框主要就是左边的小三角的制作了,其实这个我们可以利用border来制作,首先我们先来开一个例子:

我们就给一个span标签来看看

html 

<span class="icon-s"></span>

css

.icon-s {
            display: block;
            margin: 0 auto;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px;
            border-top-color: red;
            border-right-color: blue;
            border-bottom-color: yellow;
            border-left-color: black;
}

我们来看看效果:

技术分享

怎么样!很神奇对不对!其实到这里我们就可以看到我们要的三角形了,我们只要保留四个中的一个就行了,那么将其他三边设置为透明就行了

css

.icon-s {
            display: block;
            margin: 0 auto;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px;
            border-top-color: transparent; /*-*/
            border-right-color: red;
            border-bottom-color: transparent; /*-*/
border-left-color: transparent; /*-*/
}

技术分享

现在我们可以看到一个基本的雏形,接下来我们在来改改,把上边框的高度设为0,右边框的宽度设长一点

css:

.icon-s {
            display: block;
            margin: 0 auto;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px;
            border-top-width: 0; //
            border-right-width: 70px; //
            border-top-color: transparent;
            border-right-color: red;
            border-bottom-color: transparent;
            border-left-color: transparent;
}

技术分享

这样子左边的三角形就出来了,接下来我们来简化一下代码:

.icon-s {
            display: block;
            margin: 0 auto;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: transparent red transparent transparent;
            border-width: 0 70px 40px 40px;
}

考虑到IE低版本不支持transparent 属性我们可以设置dotted或是dashed

原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3),虚线宽长度必须是其宽度的5倍 以上(height>=border-width*5),否则点线和虚线都不会出现.

.icon-s {
            display: block;
            margin: 0 auto;
            width: 0;
            height: 0;
            border-style: dashed solid dashed dashed;
            border-color: transparent red transparent transparent;
            border-width: 0 70px 40px 40px;
        }

技术分享

 

完整的demo:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="阿林十一">
  <meta name="Keywords" content="关键字">
  <meta name="Description" content="描述">
  <title>提示框</title>

  <!--style start-->
    <style type="text/css">
        /*-------- begin-base ------------*/
        html,
        body,
        div,
        h1,h2,h3,
        ul,li,
        a,
        p,
        span {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        body {
            color: #666;
            font-size: 14px;
            font-family: "Microsoft Yahei";
        }
        a {
            color: #eee;
            text-decoration: none;
        }
        li {
            list-style: none;
        }
        /*-------- end-base -------*/
        #position {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 0 auto;
            color: #fff;
            background: #66cccc;
        }
        #position .position-relative {
            position: relative;
            top: 20px;
            left: 20px;
            width: 300px;
            height: 200px;
            padding: 20px;
            background: #999;
        }
        #position .position-relative .icon {
            display: block;
            position: absolute;
            top: -10px;
            right: -10px;
            overflow: hidden;
            /*
            white-space: nowrap;
            text-overflow: ellipsis;
            */
            border-radius: 50%;
            width: 20px;
            height: 20px;
            line-height: 20px;
            color: #eee;
            font-style: normal;
            text-align: center;
            
            background: #666;
        }
        #position .position-relative .tip {
            position: absolute;
            right: -212px;
            top:50%; 
            margin-top: -20px;
            width: 200px;
            height: 40px;
            border-radius: 5px;
            background: #4392e0;
        }
        #position .position-relative .tip .icon-tip {    
            position: absolute;
            top: 8px; 
            left: -23px;
            border: 12px solid transparent;
            border-top-width: 0;
            border-right-color: #4392e0;

        }
        .icon-s {
            display: block;
            margin: 0 auto;
            width: 0;
            height: 0;
            border-style: dashed solid dashed dashed;
            border-color: transparent red transparent transparent;
            border-width: 0 70px 40px 40px;
        }
    </style>
  <!--style end-->
    
 </head>
    
 <body>
    <!--
        position 定位 (参照点)
        
        1、static
        2、relative 相对定位(self)
        3、absolute 绝对定位(2  1、relative |absolute| absolute  first  2、body)
        4、fixed
        -->
    <div id="position">
        <div class="position-relative">
            <span>提示信息</span>
            <a href="javascript:;"><i class="icon">&times;</i></a>
            <div class="tip">
                <span class="tx">这里是提示信息!!!</span>
                <span class="icon-tip"></span>
            </div>
        </div>
    </div>

    <span class="icon-s"></span>

 </body>
</html>

 

利用 css 制作简单的提示框

标签:

原文地址:http://www.cnblogs.com/alsy/p/5022355.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!