当前位置:网站优化>> div css>>css中dl、dd、dt的应用实例

css中dl、dd、dt的应用实例

浏览: 发表时间:2011-6-2 来源: 保定龙跃网络返回

昨天做了个表单,依旧用table来布局,因为个人感觉table布局表单是不错的(追求div重构,不等于完全抛弃table)。
  今天早上起来,想想还是换种方式来做表单的布局。于是便选种了dl、dd、dt,如下:
  XHTML部分:
  <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">  广州骏宝实业有限公司创始于1990年,是集科研、制造、销售、服务于一体,拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模化经济实体。骏宝公司生产基地约占地 30000平方米,拥有精良的设备,强大的生产能力。公司按照现代化企业的规范组织和管理,坚持诚信、创新、勤奋、进取的企业精神,不断发展壮大。
  骏宝公司人才荟萃,现有职工326人,拥有研发 … </textarea> <span class="red">*</span>
  </dd>
  </dl>CSS部分:
  dl{padding-left:14px;}
  dt{float:left;font-weight:bold;padding:12px 0 4px;}
  dd{ text-align:left;height:auto;padding:8px 0;}
  input,select{ vertical-align:middle;color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;}
  textarea{color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;line-height:150%;overflow: auto}说明:对于dl、dt、dd的设置建议不要用高度(height)和行高(line-height),在FF会产生错位,由于IE和FF是否自适应造成,建议使用dt、dd的padding属性来定位!

【责任编辑:龙跃网络】标签:经验分享  (Top) 返回页面顶端
网络实名:保定网站建设 | 保定网站优化 | 保定百度推广 | 保定seo | 网站排名优化 | 保定龙跃网络
邮箱:bd_tj998@163.com   联系电话:0312-6791616
联系地址:河北省保定市高开区创业中心B座225室 客服QQ1:790514402 客服QQ2:176277600点击这里给我发消息点击这里给我发消息
Copyright © 2010-2011 www.0312wz.cn All Rights Reserved  版权所有保定龙跃网络-