简单对话框样式案例

xiaoxiao2021-02-27  278

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

点击下载案例代码

代码如下:

<!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>

上面是演示效果图↑

转载请注明原文地址: https://www.6miu.com/read-4583.html

最新回复(0)