</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>
效果和方法一一样,但是没有方法一的缺点也