网络编程
位置：首页>> 网络编程>> 网页设计>> 简单form标准化实例——整体布局（2）

简单form标准化实例——整体布局（2）

作者：blank　　发布时间：2007-05-11 17:04:00　

标签：form,布局,table

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>
</select>
</p>
<p>
<label for="yid" accesskey="Y"><span class="required">*</span> Yahoo! ID:</label>
<input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span>
</p>
<p>
<label for="pw" accesskey="P"><span class="required">*</span> Password:</label>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</p>
<p>
<label for="pw2" accesskey="R"><span class="required">*</span> Re-type password:</label>
<input type="password" value="" id="pw2"/>
</p>

<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>

</form>

CSS部分:


* {
  margin:0;
  padding:0;
}

input,select {
   font-family:Arial, Helvetica, sans-serif;
   font-size: 12px;
}

.required {
  font:0.8em Verdana !important;
  color:#f68622;
}

.explain {
  color:#808080;
}

.b {
  font-weight:bold;
  font-size:12px;
}

.democss {
  font:11px/12px Arial, Helvetica, sans-serif;
  color:#333;
}

.democss p {
  width: 298px;
  clear: left;
  padding:4px;
  padding-left: 122px;
  text-align:left;
  height: 1％;
}

.democss label {
  float: left;
  margin-left: -122px;
  width: 110px;
  padding:4px 4px 0;
  text-align:right;
}

.democss input {
  width:180px;
}

.democss select#content {
  width:185px;
}

.democss input.submit {
  width:70px;
}

div#submit {
  width:298px;
  text-align:left;
  padding:4px;
  padding-left:122px;
}

* html .democss input,* html .democss select{
  margin-left: -3px; 
}

* html div#submit input{
  margin-left: 0px;
}

具体演示:

运行代码框


第一页 上一页 1
2
3 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com