简单对话框样式案例

周梦顺

已于 2022-09-05 22:26:27 修改

阅读量1.7k

点赞数

文章标签：对话框

于 2017-05-04 16:02:33 首次发布

本文链接：https://blog.csdn.net/zhoumengshun/article/details/71171529

版权

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

点击下载案例代码

代码如下：

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

这里写图片描述