简单form标准化实例（一）：整体布局_网页制作教程

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页制作 >> 简单form标准化实例(一)：整体布局	打印友好页面

简单form标准化实例（一）：整体布局

作者：Blank 出处：PlanABC

3、使用dl、dt、dd来布局

此属于发挥，练习的方法，当然图一的设计图还可以用其他更多的方法来布局，用dl、dt、dd来布局只为抛砖引玉。

dl：代表HTML自定义列表
dt：代表HTML自定义列表组
dd：HTML自定义列表描述

虽然说dl、dt、dd在语义上并不能很好的表现图一，但dl、dt、dd的布局特点依旧可以用来进行图一的布局，而且效果还不错，呵呵……

dt主要放label部分，dd主要放input或其他。

注意：和label布局一样，有IE的3px BUG。

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

XHTML部分:

<dl>
<dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt>
<dd><input type="text" id="fname" value="" /></dd>
<dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt>
<dd><input type="text" id="lname" value="" /></dd>
<dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt>
<dd><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>
</dd>
<dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt>
<dd><select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</dd>
<dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt>
<dd><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></dd>
<dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt>
<dd><input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</dd>
<dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt>
<dd><input type="password" value="" id="pw2"/></dd>
</dl>

</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 dl {
width:420px;
}

.democss dt {
width: 110px;
float: left;
padding:4px;
padding-top:8px;
text-align:right;
}

.democss dd{
margin:0 0 0 118px;
padding:4px;
text-align:left;
}

.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;
}

具体演示:

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用dl,dt,dd布局的演示</title> <style type="text/css" media="all"> * { 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 dl { width:420px; } .democss dt { width: 110px; float: left; padding:4px; padding-top:8px; text-align:right; } .democss dd{ margin:0 0 0 118px; padding:4px; text-align:left; } .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; } </style> </head> <body> <form id="demoform" class="democss" action=""> <dl> <dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt> <dd><input type="text" id="fname" value="" /></dd> <dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt> <dd><input type="text" id="lname" value="" /></dd> <dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt> <dd><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> </dd> <dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt> <dd><select name="sex" id="sex"> <option value="">[Select] </option> <option value="m">Male</option> <option value="f">Female</option> </select> </dd> <dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt> <dd><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></dd> <dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt> <dd><input type="password" value="" id="pw" /><br /> <span class="explain">Six characters or more; capitalization matters!</span> </dd> <dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt> <dd><input type="password" value="" id="pw2"/></dd> </dl> <div id="submit"> <input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/> </div> </form> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

对于dl,dt,dd的布局好像有个小BUG，有兴趣的朋友可以实验一下。给dd添加他的宽度属性，我们可以根据相关数据算出dd的宽度为294px，添加上这个宽度属性按理论上是没有问题的，在FF下实验也没有问题，但在IE6下，就惨不忍睹了！

第1页：使用table布局

第2页：使用label布局

第3页：使用dl、dt、dd布局

上一篇：简单form标准化实例：语义结构

返回列表

下一篇：访客至上的网页设计秘笈