简单对话框样式案例

来源：互联网发布：股票诊断软件编辑：程序博客网时间：2024/06/07 18:10

写一个简单的对话框样式，供参考

点击下载案例代码

代码如下：

<!doctype html><html>    <head>        <meta content="text/html;charset=utf-8" http-equiv="content-type" />        <!----样式开始---->        <style>            .tip-bubble {                position: relative;                background-color:rgba(242, 240, 240, 1);                padding:10px 20px 10px 20px;                color:rgba(0,0,0, 0);                border-radius: 10px;                border: 1px solid rgba(242, 240, 240, 1);            }            .tip-bubble:after {                content: '';                position: absolute;                width: 0;                height: 0;                border: 15px solid;                border-bottom-color: rgba(242, 240, 240, 1);                left: 50%;                bottom: 100%;                margin-left: -15px;            }            <!--                这里是设置对话框内的div中的字体颜色为 #000 黑色,                上面color:rgba(0,0,0, 0); 操作已将内容颜色设置为透明,                所有下面内容的颜色必须设置，否则看不到字体内容            -->            .tip-bubble div{                color:#000;            }        </style>        <!----样式结束---->    </head>    <body>        <br/>        <!---对话框开始--->        <div class="tip-bubble" >            <div >                    这一个对话框            </div>        </div>        <!---对话框结束--->    </body></html>

这里写图片描述

上面是演示效果图↑

0 0