使用CSS的dl、dd、dt制作标准表单
- 2022-01-31
- 来源/作者： onegreen.org / 佚名
- 3 次浏览
虽然追求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/
