fieldset标签以前都没用过,确切的讲是听都没听说过,今天参考ASP.Net Ajax的Document,看到它在举例子的时候网页中出现了类似于WinForm中GroupBox的东西,感觉布局一下子显得很有条理。感觉很不错,查看了源文件才知道原来是用了fieldset标签,其格式如下
用fieldset标签来实现类似WinForm中GroupBox布局效果<fieldset>
用fieldset标签来实现类似WinForm中GroupBox布局效果 
<legend>fieldset的标题,可以不要</legend>
用fieldset标签来实现类似WinForm中GroupBox布局效果
</fieldset>

其实我个人认为如果在用户注册的界面上使用用fieldset布局可能效果会好一点,有些网站的必填项和选填项是混在一起的,如果用fieldset分开个人感觉更人性化吧。
用fieldset标签来实现类似WinForm中GroupBox布局效果<fieldset>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
<legend>用户注册必填选项</legend>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
<ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:50px; display:inline;">
用fieldset标签来实现类似WinForm中GroupBox布局效果            
<asp:Label ID="Label1" Width="80px" runat="server" Text="用户名"></asp:Label></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:150px; display:inline;">
用fieldset标签来实现类似WinForm中GroupBox布局效果            
<asp:TextBox ID="tbx_username" runat="server" Width="150px"></asp:TextBox></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
</ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
<ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:50px; display:inline;">
用fieldset标签来实现类似WinForm中GroupBox布局效果            
<asp:Label ID="Label2" Width="80px" runat="server" Text="密码"></asp:Label></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:150px; display:inline;"><asp:TextBox ID="tbx_password" runat="server" Width="150px"></asp:TextBox></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
</ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
<ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:50px; display:inline;">
用fieldset标签来实现类似WinForm中GroupBox布局效果            
<asp:Label ID="Label3" Width="80px" runat="server" Text="密码确认"></asp:Label></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:150px; display:inline;"><asp:TextBox ID="tbx_confirm" runat="server" Width="150px"></asp:TextBox></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
</ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
<ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:50px; display:inline;">
用fieldset标签来实现类似WinForm中GroupBox布局效果            
<asp:Label ID="Label4" Width="80px" runat="server" Text="电子邮件"></asp:Label></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:150px; display:inline;"><asp:TextBox ID="tbx_email" runat="server" Width="150px"></asp:TextBox></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
</ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果
</fieldset>
用fieldset标签来实现类似WinForm中GroupBox布局效果
<fieldset>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
<legend>用户注册选添项</legend>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
<ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:50px; display:inline;">
用fieldset标签来实现类似WinForm中GroupBox布局效果            
<asp:Label ID="Label5" Width="80px" runat="server" Text="真实姓名"></asp:Label></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果        
<li style="width:150px; display:inline;">
用fieldset标签来实现类似WinForm中GroupBox布局效果            
<asp:TextBox ID="tbx_realname" runat="server" Width="150px"></asp:TextBox></li>
用fieldset标签来实现类似WinForm中GroupBox布局效果    
</ul>
用fieldset标签来实现类似WinForm中GroupBox布局效果
</fieldset>

相关文章:

  • 2022-12-23
  • 2021-07-27
  • 2021-07-19
  • 2022-02-24
  • 2021-10-17
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-06-30
  • 2022-12-23
  • 2021-09-17
  • 2021-10-29
  • 2021-06-02
  • 2021-11-03
相关资源
相似解决方案