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

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

时间: 2024-11-16 11:50:12

CSS实战:用dl、dd、dt做一个网页表单的相关文章

CSS设计符合Web标准的网页表单的几个技巧

本文总结了用div CSS进行网页表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: <textarea name=textarea wrap=virt

用DIV+CSS布局网页表单的一个例子

css|网页 这是一个例了,不知道有没有更好的解决办法,贴上来,随便看吧! CSS: body{font-size:12px; line-height:1.9; text-align:center;}#info{border:1px solid #006699; background:#F9EBBB; text-align:left; margin:10px auto; width:300px; padding:10px 10px 10px 110px;}#info label{ width:1

DIV+CSS标准制作网页表单的select例子

css|select|标准|网页 大家都见过用CSS定义的各色的input按钮,但对于select却无法用定义input的简单方式来实现.下面提供另外一种css定义的方式来让你的select炫起来. CSS部分: .select * {  margin: 0;  padding: 0;} .select {  border:1px solid #cccccc;  float: left;  display: inline;  } .select div {  border:1px solid #

CSS实例教程:制作漂亮的网页表单

初中级练习,高手朋友们可以飘过.要求达到如下图所示的效果,各位不妨试一试~   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang=

精华:用CSS布局网页表单form的例子

css|精华|网页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type&

标准制作网页:用CSS的dl、dd、dt做表单

css|标准|网页 昨天做了个表单,依旧用table来布局,因为个人感觉table布局表单是不错的(追求div重构,不等于完全抛弃table). 今天早上起来,想想还是换种方式来做表单的布局.于是便选种了dl.dd.dt,如下: XHTML部分:<dl> <dt>公司名称:</dt> <dd><input name="text" type="text" value="广州骏宝实业有限公司" s

css dt dl dd实例教程

   <dl id="msgdl">                  <dd>                     <span id="commentname">                     <?php                    echo $rs['gx_title'];               ?>                     </span>         

DD DT DL标签使用示例

我们平时常用的是< ul>< li>标签,不过dd.dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版. <dl>< /dl>< dt>< /dt>< dd>< /dd> <dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目,< dd>< /dd>用来创建列表中最下层项目,<

用div+css样式做一个如图的表单

问题描述 用div+css样式做一个如图的表单 解决方案 DIV居中样式的CSSDIV+CSS input样式简单控制关于表单按钮的css样式大全 解决方案二: 什么地方有问题吗??????? 解决方案三: 你一个一个div,然后里面依次放你的控件就是了,有什么问题?