div 边框显示标题

最新推荐文章于 2024-08-18 10:28:23 发布

信-老僧

最新推荐文章于 2024-08-18 10:28:23 发布

阅读量4.6k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/FOLOYO586/article/details/46909079

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

</pre></p><p></p><p></p><p>方法一：</p><p></p><pre class="html" name="code"><!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>div边框标题</title>
<meta name="author" content="老僧" />
<style>
	body{
		background-color:white;
	}
	div>span[name='title']{
		position:absolute;
		top:1px;
		left:20px;
		background-color:white;
		text-align:center;
	}
	.mediumblock{
		width:500px;
		height:200px;
		border:1px solid red;
	}
</style>
</head>
<body>
	<div class="mediumblock">
		<span name="title" style="width:80px">告警设置</span>
		<br/>
		页面效果...
	</div>
</body>
</html>

效果图：

这种方法很蛋疼，弄个背景色啥的立马原形毕露... 还要手动设置标题宽度还要防止标题遮掩了，后面的文档元素，看到<br/>你就明白了...

方法二：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>div边框标题</title>
<meta name="author" content="老僧" />
<style>
	fieldset{
		height:200px;
		width:500px;
		border:1px solid red;
	}
</style>
</head>
<body>
	<fieldset>
		<legend>告警设置</legend>
		显示效果....
	</fieldset>
</body>
</html>

效果和方法一一样，但是没有方法一的缺点也