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

wgahjl

wgahjl

2016-02-19 19:43

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

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

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

  XHTML部分:

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

  CSS部分:

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

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

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

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

用 Fireworks 做一个信笺

电脑网络
用 Fireworks 做一个信笺

lol偷钱流符文搭配推荐

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

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

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

CSS网页设计实例:15个用CSS设计的网页表单实例

Web开发
CSS网页设计实例:15个用CSS设计的网页表单实例

lolAD刺客新符文搭配推荐

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

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

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

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

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