首頁  >  文章  >  web前端  >  利用 css 制作简单的提示框_html/css_WEB-ITnose

利用 css 制作简单的提示框_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:32:211327瀏覽

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

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><br />

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; /*-*/<br />            border-left-color: transparent; /*-*/<br />}

现在我们可以看到一个基本的雏形,接下来我们在来改改,把上边框的高度设为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>

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn