请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 310|回复: 14

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

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-22 22:25:08 | 显示全部楼层 |阅读模式

昨天做了个表单,依旧用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属性来定位!

回复

使用道具 举报

7

主题

832

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2016-3-10 12:46:30 | 显示全部楼层
我是路过的,轻轻飘过
回复 支持 反对

使用道具 举报

2

主题

916

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-3-14 20:34:39 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

0

主题

700

帖子

57

积分

注册会员

Rank: 2

积分
57
发表于 2016-7-2 17:16:16 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

0

主题

895

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2016-10-11 16:04:18 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

5

主题

492

帖子

73

积分

注册会员

Rank: 2

积分
73
发表于 2016-11-14 09:40:14 | 显示全部楼层
大神啊!豁然开朗。。。。。。
回复 支持 反对

使用道具 举报

1

主题

891

帖子

20

积分

注册会员

Rank: 2

积分
20
发表于 2016-12-17 20:35:07 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

0

主题

957

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2017-2-4 22:15:03 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

2

主题

939

帖子

108

积分

注册会员

Rank: 2

积分
108
发表于 2017-2-10 17:01:32 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

7

主题

832

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2017-6-8 19:43:51 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 17:59 , Processed in 0.226964 second(s), 31 queries .

快速回复 返回顶部 返回列表