带边框的HTML样式

Question

制作一个新的jsp并从某个分析师那里得到了一个模型。注意部分“收藏夹”和“收藏夹管理选项”，以及围绕它们的线条和边框。我将如何设计类似的东西？

所有其他的东西像选择框和数据字段一样简单。

Answer 1

本品采用以下模式：

<form> 
    <fieldset> 
    <legend>Favorites</legend> 
... form elements 
    </fieldset> 
</form> 

字段集是包装：

fieldset { 
    border:1px solid #d0d0d0 
} 

传说是标题：

legend { 
    font-size:12px; 
    font-weight:bold 
    border:1px solid #d0d0d0 
} 

您可以应用各种CSS样式，使其看起来像你想要的样子。

参见：http://www.alistapart.com/articles/prettyaccessibleforms

Answer 2

他们正在使用的字段集和传说html标签创建。你可以在这里详细http://www.w3schools.com/tags/tag_fieldset.asp

Answer 3

相对容易。使用fieldset将边框值添加到css中。然后使用legend标签作为“收藏夹”和“收藏夹管理选项”。给出background-color和border的图例css并使用position:relative; top:-10px（猜测）将其移到字段集边界上。