网页设计
搜索
分类

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

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

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

具体演示:

运行代码框


对于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

第一页 上一页 1 2
3
标签：form,布局,table
0
投稿

猜你喜欢

  • JavaScript库jQuery入门简介

    2007-10-17 11:43:00

  • Select 控件Combox加强版(IE Only)

    2008-07-23 13:26:00

  • js实现input+select组合 抛砖引玉

    2010-08-02 12:34:00

  • 数据库手边系列：SQL Server数据表信息

    2009-05-24 18:26:00

  • XML to DDL的项目关键：与数据库同步

    2008-05-29 14:19:00

  • 在asp中使用js的encodeURIComponent方法

    2012-11-30 20:05:53

  • DreamweaverMX制作导航下拉菜单

    2010-07-02 16:29:00

  • 在Dreamweaver MX中应用“占位图形”

    2009-07-10 13:16:00

  • oracle 触发器 实现出入库

    2009-07-23 14:56:00

  • 安装Oracle加载数据库错误areasQueries的解决

    2010-07-27 13:02:00

  • Oracle收购TimesTen 提高数据库软件性能

    2010-07-21 13:03:00

  • Oracle常见错误诊断

    2010-07-27 12:56:00

  • 用 ASP 创建 GUID

    2009-04-19 18:43:00

  • 如何得到数据库中所有表名 表字段及字段中文描述

    2012-01-05 18:56:44

  • asp使用XMLHTTP下载远程数据输出到浏览器

    2007-11-04 10:34:00

  • 让你的主页声色并茂—巧为网页添加背景音乐

    2010-09-02 12:35:00

  • Win7 x64 IIS运行ASP+Access故障完美解决方法(转)

    2012-03-27 18:30:35

  • DW MX 2004新功能:加密FTP

    2009-09-13 18:42:00

  • asp中InstrRev的语法

    2008-01-22 18:14:00

  • XML卷之实战锦囊（2）：动态查询

    2008-09-05 17:20:00
    • asp之家 网络编程 m.aspxhome.com