在div中给边框标题
我可以这样做在HTML中:
我想在我的div
上添加边框标题(这个图片中的“一般信息”)。 可能吗? 怎么做?
注意:
图像不是HTML页面的图像,它是一个Java应用程序的图像。
<div id="form" style="width:350px;"> <fieldset> <legend style="color:blue;font-weight:bold;">General Information</legend> <table> <tr> <td><span style="text-decoration:underline">C</span>hange Password To:</td> <td><input type="text"/></td> </tr> <tr> <td><span style="text-decoration:underline">C</span>onfirm Password:</td> <td><input type="text"/></td> </tr> </table> </fieldset> </div>
该图像可能使用fieldset
标记而不是div
,在fieldset
您可以使用标记legend
,它将自动定位在那里。
<fieldset> <legend>General Information</legend> </fieldset>
<fieldset style="width:100px;"> <legend> Please Enter Your Name</legend> <br> <table> <tr> <td>First Name:</td> <td><input type="text" /></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" /></td> </tr> </table> </fieldset>
这将输出这样的。
与背景颜色的圆的边界。
<!DOCTYPE html> <html> <head> <style> .sample { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> </head> <body> <div class="sample"> The border-radius property allows you to add rounded corners to elements. <fieldset style="width:100px;"> <legend> Please Enter Your Name</legend> <br> <table> <tr> <td>First Name:</td> <td><input type="text" /></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" /></td> </tr> <tr> <td>First Name:</td> <td><input type="text" /></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" /></td> </tr> </table> <input type="submit" value="Submit"> </fieldset> </div> </body> </html>
这会给这样的输出,