CSS实战:用dl、dd、dt做一个网页表单

wgahjl

wgahjl

2016-02-19 19:43

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享CSS实战:用dl、dd、dt做一个网页表单吧。

  昨天做了个表单,依旧用table来布局,因为个人感觉table布局表单是不错的(追求div重构,不等于完全抛弃table)。

  今天早上起来,想想还是换种方式来做表单的布局。于是便选种了dl、dd、dt,如下:

  XHTML部分:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

dl
dt公司名称:/dt
ddinput name="text" type="text" value="广州骏宝实业有限公司" size="50" / span class="red"*/span/dd
dt公司工业类别:/dt
ddselect name="select"option计算机和消费电子 /option/select
select name="select"option空气调节器/option/select span class="red"*/span/dd
dt公司介绍:/dt
ddtextarea name="textarea" cols="100" rows="9"  广州骏宝实业有限公司创始于1990年,是集科研、制造、销售、服务于一体,拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模化经济实体。骏宝公司生产基地约占地 30000平方米,拥有精良的设备,强大的生产能力。公司按照现代化企业的规范组织和管理,坚持诚信、创新、勤奋、进取的企业精神,不断发展壮大。
   骏宝公司人才荟萃,现有职工326人,拥有研发 ... /textarea span class="red"*/span
/dd
/dl

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  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属性来定位!

展开更多 50%)
分享

猜你喜欢

CSS实战:用dl、dd、dt做一个网页表单

Web开发
CSS实战:用dl、dd、dt做一个网页表单

dl,dt,dd,ul,li,ol区别及应用

Web开发
dl,dt,dd,ul,li,ol区别及应用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

dl,dt,dd标记在网页中要充分利用

Web开发
dl,dt,dd标记在网页中要充分利用

CSS元素div ul dl dt ol简单解释

Web开发
CSS元素div ul dl dt ol简单解释

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

dl、dt、dd 标记来改造163邮箱的广告条

Web开发
dl、dt、dd 标记来改造163邮箱的广告条

用 Fireworks 做一个信笺

电脑网络
用 Fireworks 做一个信笺

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

网页文字应用CSS设计的一些技巧

网页文字应用CSS设计的一些技巧

网页设计 CSS网页制作实用技巧九则

网页设计 CSS网页制作实用技巧九则
下拉加载更多内容 ↓