放大镜站内搜索:


您现在的位置:首页 > 电脑 > 网页制作 > 正文
简单form标准化实例——整体布局
学生王国 ∥ http://www.xswg.com 更新时间:2007年2月8日 调整字体:

2、使用label来布局

特点:对于简单的form布局,此方法在语义表现上更为突出。

通常的解决方法为

为label和input或其他的外围添加一个div或p,把该div或p触发layout(可以利用Holly Hack设置height: 1%),并清除左浮动clear:left;。将label设为float: left;浮动在input或其他的右边。

让label 对齐的是方法是:固定label的宽度,然后根据需要使用text-align向左或者向右对齐。

如果label右侧有多行input或其他,我们可以对div或p设置padding-left:xpx,然后对label设置margin-left:-xpx,

设定宽度的一个小窍门,使用单位em根据标记的最大字数来定宽度,不必辛苦测试px。

当然你也可以不用div或p,在每行结束使用<br />,并且个br设定清除浮动clear:left;

注意:使用次方法在IE下有个小BUG,那就是div或p里的第一行的input或其他有3px的IE的BUG,我们可以使用只有IE才识别的* html来定义属性来消除3px的BUG。

下面我们具体来对图一的设计图进行整体布局:

XHTML部分:

<form id="demoform" class="democss" action="">

<p>
<label for="fname" accesskey="F"><span class="required">*</span> First name:</label>
<input type="text" id="fname" value="" />
</p>
<p>
<label for="lname" accesskey="L"><span class="required">*</span> Last name:</label>
<input type="text" id="lname" value="" />
</p>
<p>
<label for="content" accesskey="C"><span class="required">*</span> Preferred content:</label>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</p>
<p>
<label for="sex" accesskey="G"><span class="required">*</span> Gender:</label>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>

6共  上一页 1 2 3 4 5 6 下一页


相关链接
简单form标准化实例——语义结构 (2007年2月8日)
来自:蓝色理想
编辑:
浏览:
评论查看全部评论
您的评论
姓名:
请您注意:
1.请遵守《中国互联网行业自律条款》及中华人民共和国其他各项有关法律法规。
2.严禁发表危害国家安全、损害国家利益、破坏民族团结、破坏国家宗教政策、破坏社会稳定、侮辱、诽谤、教唆、淫秽等内容的评论 。
3.用户需对自己在使用本站服务过程中的行为承担法律责任(直接或间接导致的)。
4.本站管理员有权保留或删除评论内容。
评论内容只代表网友个人观点,与本网站立场无关。