在实际制作网页中，我们有时会要这样的效果：
或许我们能通过图片实现，但是在html中有一个标签很轻松的帮我们实现，他就是<fieldset>标签。
fieldset 标签 -- 对表单进行分组
在form表单中，我们可以对form中的信息进行分组归类，如注册表单的form，我们可以将注册信息分成：
基本信息（一般为必填）
详细信息（一般为可选）
那我们如何更好的来实现呢？我们可考虑在表单form中加入下面两个标签：
fieldset：对表单进行分组，一个表单可以有多个fieldset。
legend：说明每组的内容描述。
- 格式：
- <fieldset>
- <legend>health?information</legend>
- height:?<input?type="text"/>
- weight:?<input?type="text"/>
- </fieldset>
实例：
- <fieldset>
- ????<legend>WOSN.NET?CSS网页布局</legend>
- ????<ul>
- ????????<li>Div+CSS教程?系统的讲述了关于CSS布局的知识</li>
- ????????<li>CSS布局实例?向你呈现了wosn.net中的一些实例</li>
- ????????<li>CSS模板下载?你可以查看一些模板</li>
- ????????<li>CSS大师的作品定会让你有所收获</li>
- ????</ul>
- </fieldset>
css样式表：
- <style>
- *?{
- ????font-size:12px;
- ????margin:0;
- ????padding:0;
- }
- fieldset?{
- ????padding:10px;
- ????margin:10px;
- ????width:270px;
- ????color:#333;
- ????border:#06c?dashed?1px;
- }
- legend?{
- ????color:#06c;
- ????font-weight:800;
- ????background:#fff;
- }
- ul?{
- ????list-style-type
none; - ????margin:8px?0?4px?0;
- }
- li?{
- ????margin-top:4px;
- }
- </style>
效果如下：
评论