|
3、使用dl、dt、dd來布局
此屬于發(fā)揮，練習(xí)的方法，當(dāng)然圖一的設(shè)計(jì)圖還可以用其他更多的方法來布局，用dl、dt、dd來布局只為拋磚引玉。
- dl：代表HTML自定義列表
- dt：代表HTML自定義列表組
- dd：HTML自定義列表描述
雖然說dl、dt、dd在語義上并不能很好的表現(xiàn)圖一，但dl、dt、dd的布局特點(diǎn)依舊可以用來進(jìn)行圖一的布局，而且效果還不錯(cuò)，呵呵……
dt主要放label部分，dd主要放input或其他。
注意：和label布局一樣，有IE的3px BUG。
下面我們具體來對圖一的設(shè)計(jì)圖進(jìn)行整體布局：
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;
}
具體演示:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
對于dl,dt,dd的布局好像有個(gè)小BUG，有興趣的朋友可以實(shí)驗(yàn)一下。給dd添加他的寬度屬性，我們可以根據(jù)相關(guān)數(shù)據(jù)算出dd的寬度為294px，添加上這個(gè)寬度屬性按理論上是沒有問題的，在FF下實(shí)驗(yàn)也沒有問題，但在IE6下，就慘不忍睹了！
相關(guān)閱讀（很不錯(cuò)的，強(qiáng)烈推薦）：
設(shè)計(jì)類：
《淺議 Web 表單設(shè)計(jì)》：
http://m.95time.cn/design/doc/2007/4471.asp
制作類：
《輕松玩轉(zhuǎn)花樣表單 》：http://m.95time.cn/tech/web/2003/377.asp
《熟悉常用表單格式的五點(diǎn)技巧 》：http://m.95time.cn/tech/web/2003/929.asp
《重新認(rèn)識(shí)表格和一個(gè)訪問無障礙的數(shù)據(jù)表格例子》：http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=60
《用css制作表單并體驗(yàn)親和力 》：http://m.95time.cn/tech/site/2006/3359.asp
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2715374-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2007/4472.asp 
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁 使用label布局 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 3 頁 使用dl、dt、dd布局
