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部分:
<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>
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; }
具体演示:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
对于dl,dt,dd的布局好像有个小BUG,有兴趣的朋友可以实验一下。给dd添加他的宽度属性,我们可以根据相关数据算出dd的宽度为294px,添加上这个宽度属性按理论上是没有问题的,在FF下实验也没有问题,但在IE6下,就惨不忍睹了!
相关阅读(很不错的,强烈推荐):
设计类: 《浅议 Web 表单设计》: http://www.blueidea.com/design/doc/2007/4471.asp
制作类: 《轻松玩转花样表单 》:http://www.blueidea.com/tech/web/2003/377.asp 《熟悉常用表单格式的五点技巧 》:http://www.blueidea.com/tech/web/2003/929.asp 《重新认识表格和一个访问无障碍的数据表格例子》:http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=60 《用css制作表单并体验亲和力 》:http://www.blueidea.com/tech/site/2006/3359.asp
经典论坛讨论: http://bbs.blueidea.com/thread-2715374-1-1.html
本文链接:http://www.blueidea.com/tech/web/2007/4472.asp
出处:蓝色理想
责任编辑:blue
上一页 使用label布局 下一页
◎进入论坛网页制作、网站综合版块参加讨论
|