使用CSS的dl、dd、dt制作标准表单

[作者:月可|来源:赛酷网|时间:2008-03-28| 收藏投稿 ]【大中小】

虽然追求div重构并不意味要抛弃table，但更多时候不妨用用css里的dl、dd、dt元素来制作表单。

内容部分：

<dl>
<dt>网站名称：</dt>
<dd><input name="text" type="text" value="赛酷网" size="50" /> <span class="red">*</span></dd>
<dt>网站类别：</dt>
<dd><select name="select"><option>电脑网络</option></select>
<select name="select"><option>建站资讯</option></select> <span class="red">*</span></dd>
<dt>网站介绍：</dt>
<dd><textarea name="textarea" cols="100" rows="9">　　赛酷网由一批具有丰富的网络应用经验的专家投资创立，公司拥有一批资深的技术人员、电子商务和网络营销专家，赛酷网日均IP2万以上，是云南最大的建站门户，同时作为国内较大、知名度很高的技术及资源服务站点，依托自身完善的服务体系，强大的技术支持力量以及丰富的经验、信息资源和市场运作实力，赛酷网已为上万的用户提供建站相关服务，深受业界广大朋友欢迎。 </textarea> <span class="red">*</span>
</dd>
</dl>

CSS部分：

dl{padding-left:14px;}
dt{float:left;font-weight:bold;padding:12px 0 4px;color:#333333;}
dd{ text-align:left;height:auto;padding:8px 0;}
.red {color:#ff0000}
input,select{ vertical-align:middle;color:#666666; background: #ffffff; font:12px Arial, Helvetica, sans-serif;}
textarea{color:#666666; background: #ffffff; font:12px Arial, Helvetica, sans-serif;line-height:150%;overflow: auto;}

演示：http://www.syku.net/demo/demo10/

Tags：

顶一下

上一篇：DIV CSS中常用的列表元素ul ol li dl dt dd释义

下一篇：div+css实例分享：非常不错的页面制作方法