简明现代魔法 -> CSS层叠样式表 -> fieldset 与 legend 制作带标题的小框

fieldset 与 legend 制作带标题的小框

2010-02-23

效果演示

标题

Java这种Type Erasure做法，最大的优势便在于其兼容性：即便使用了泛型，但最后生成的二进制文件也可以运行在泛型出现之前的JVM上（甚至JDK中不需要添加额外的类库）——因为这里的泛型根本不涉及JVM的变化。

CSS 代码

.comment_quote{
	line-height:150%;
	font-family:Verdana,宋体;  
    font-size: 12px;  
	padding: 5px 5px 5px 5px;
	border: 1px solid #CCC;	
}
.comment_quote legend{
	color:green;
}
.comment_quote p{
	margin:0;
	padding:0;
	text-indent:24px;
	line-height:150%;
}

HTML 调用

<fieldset class="comment_quote"><legend>标题</legend>
<p>Java这种Type Erasure做法，最大的优势便在于其兼容性：即便使用了泛型，但最后生成的二进制文件也可以运行在泛型出现之前的JVM上（甚至JDK中不需要添加额外的类库）——因为这里的泛型根本不涉及JVM的变化。</p>
</fieldset>

HTML <legend> 标签

legend 元素为 fieldset 元素定义标题（caption）。即在 fieldSet 对象绘制的方框内插入一个标题。

legend 元素必须是 fieldset 内的第一个元素。此元素在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。