zoukankan
html css js c++ java
用fieldset标签来实现类似WinForm中GroupBox布局效果
fieldset标签以前都没用过,确切的讲是听都没听说过,今天参考ASP.Net Ajax的Document,看到它在举例子的时候网页中出现了类似于WinForm中GroupBox的东西,感觉布局一下子显得很有条理。感觉很不错,查看了源文件才知道原来是用了fieldset标签,其格式如下
<
fieldset
>
<
legend
>
fieldset的标题,可以不要
</
legend
>
</
fieldset
>
其实我个人认为如果在用户注册的界面上使用用fieldset布局可能效果会好一点,有些网站的必填项和选填项是混在一起的,如果用fieldset分开个人感觉更人性化吧。
<
fieldset
>
<
legend
>
用户注册必填选项
</
legend
>
<
ul
>
<
li
style
="50px; display:inline;"
>
<
asp:Label
ID
="Label1"
Width
="80px"
runat
="server"
Text
="用户名"
></
asp:Label
></
li
>
<
li
style
="150px; display:inline;"
>
<
asp:TextBox
ID
="tbx_username"
runat
="server"
Width
="150px"
></
asp:TextBox
></
li
>
</
ul
>
<
ul
>
<
li
style
="50px; display:inline;"
>
<
asp:Label
ID
="Label2"
Width
="80px"
runat
="server"
Text
="密码"
></
asp:Label
></
li
>
<
li
style
="150px; display:inline;"
><
asp:TextBox
ID
="tbx_password"
runat
="server"
Width
="150px"
></
asp:TextBox
></
li
>
</
ul
>
<
ul
>
<
li
style
="50px; display:inline;"
>
<
asp:Label
ID
="Label3"
Width
="80px"
runat
="server"
Text
="密码确认"
></
asp:Label
></
li
>
<
li
style
="150px; display:inline;"
><
asp:TextBox
ID
="tbx_confirm"
runat
="server"
Width
="150px"
></
asp:TextBox
></
li
>
</
ul
>
<
ul
>
<
li
style
="50px; display:inline;"
>
<
asp:Label
ID
="Label4"
Width
="80px"
runat
="server"
Text
="电子邮件"
></
asp:Label
></
li
>
<
li
style
="150px; display:inline;"
><
asp:TextBox
ID
="tbx_email"
runat
="server"
Width
="150px"
></
asp:TextBox
></
li
>
</
ul
>
</
fieldset
>
<
fieldset
>
<
legend
>
用户注册选添项
</
legend
>
<
ul
>
<
li
style
="50px; display:inline;"
>
<
asp:Label
ID
="Label5"
Width
="80px"
runat
="server"
Text
="真实姓名"
></
asp:Label
></
li
>
<
li
style
="150px; display:inline;"
>
<
asp:TextBox
ID
="tbx_realname"
runat
="server"
Width
="150px"
></
asp:TextBox
></
li
>
</
ul
>
</
fieldset
>
查看全文
相关阅读:
「CF1039D」You Are Given a Tree
「NOIP2016」换教室
「NOIP2014」飞扬的小鸟
「AMPPZ2014」The Prices
POj-3104 Drying 二分+贪心
HDOJ1312<DFS>
STL入门2
HDU1425 <sort 快排>
2304: Lights Out(枚举)
1018:放苹果(递归)
原文地址:https://www.cnblogs.com/interboy/p/713592.html
最新文章
python open用法
numpy的简单运算计算角度
numpy的鸡兔同笼运算
numpy的简单运算
CodeForces 566D 并查集集合合并
codeforces 650C
ACdream 1007
ACdream 1732
hdu1664 bfs+余数判重
zstu 4214 高楼扔鸡蛋(google 面试题)dp
热门文章
zstu 4215 多起点bfs
hdu 计算机学院大学生程序设计竞赛(2015’11)
hdu5573 二叉树找规律,二进制相关
hdu 5524 二叉树找规律,二进制相关
「HNOI/AHOI2018」道路
「CF286C」Main Sequence
「CF55D」Beautiful numbers
「SCOI2009」windy数
「HNOI2008」玩具装箱
「AT2292」Division into Two
Copyright © 2011-2022 走看看