帶邊框的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（猜測）將其移到字段集邊界上。