Div如同面板

Question

我有一个带凹槽边框的div。 我希望它看起来像这个面板：http://www.devmanuals.com/images/images1/444Panel1.gif

图像上的面板有标题“用户注册”。 如何让我的div有一个像面板一样的标题？

Answer 1

这就是所谓的字段集，它是一个基本的HTML标记。

<fieldset> 
    <legend>User Registration</legend> 
    User name: <input type="text" /><br /> 
    Password: <input type="text" /><br /> 
    </fieldset> 

我畏缩在给你一个链接到this site，但它确实有让你尝试你的HTML那里的能力。

Answer 2

尝试 “字段集”：

<fieldset> 
    <legend>caption goes here</legend> 
</fieldset> 

Answer 3

你可以做一些造型上的字段集。

stylesheet.css中

fieldset.panel 
{ 
    border: 1px solid #000; 
    width: 200px; 
} 
fieldset.panel input[type=text] 
{ 
    width: 170px; 
} 

使用

<fieldset class="panel"> 
    <legend>User Registration</legend> 
    User name:<br/><input type="text"/><br/> 
    Email-id:<br/><input type="text"/><br/> 
    Password:<br/><input type="text"/><br/> 
    Confirm password:<br/><input type="text"/><br/> 
    <br/> 
    <input type ="submit" value="Register"/> 
</fieldset> 

基本上它使用一个字段但有一些基本样式，CSS类panel将使边境1px的纯黑色和投入都去宽度为170px，因为css样式只适用于input s，其中type为text，并在fieldset之内，其class属性是panel，翻译成css这样：fieldset.panel input[type=text]。