| 网站首页 | Photoshop资源 | Photoshop学院 | Photoshop展示 | 设计素材 | 设计学院 | 留言本 | 返回总部 | 
您现在的位置: Photoshop资源站 >> 设计学院 >> 网站设计 >> DivCSS教程 >> 正文
  使用CSS的dl、dd、dt制作标准表单           ★★★ 【字体:
使用CSS的dl、dd、dt制作标准表单
作者:佚名    教程来源:onegreen.org    点击数:    更新时间:2008-6-20    

虽然追求div重构并不意味要抛弃table,但更多时候不妨用用css里的dl、dd、dt元素来制作表单。

 

内容部分:

<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">  赛酷网由一批具有丰富的网络应用经验的专家投资创立,公司拥有一批资深的技术人员、电子商务和网络营销专家,赛酷网日均IP2万以上,是云南最大的建站门户,同时作为国内较大、知名度很高的技术及资源服务站点,依托自身完善的服务体系,强大的技术支持力量以及丰富的经验、信息资源和市场运作实力,赛酷网已为上万的用户提供建站相关服务,深受业界广大朋友欢迎。  </textarea> <span class="red">*</span>
</dd>
</dl>

 

CSS部分:

dl{padding-left:14px;}
dt{float:left;font-weight:bold;padding:12px 0 4px;color:#333333;}
dd{ text-align:left;height:auto;padding:8px 0;}
.red {color:#ff0000}
input,select{ vertical-align:middle;color:#666666; background: #ffffff; font:12px Arial, Helvetica, sans-serif;}
textarea{color:#666666; background: #ffffff; font:12px Arial, Helvetica, sans-serif;line-height:150%;overflow: auto;}

 

演示:http://www.syku.net/demo/demo10/


教程录入:onegreen    责任编辑:onegreen 
  • 上一篇教程:

  • 下一篇教程:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    CSS3新增background-clip及background-
    使用dl,dt,dd制作CSS垂直菜单
    掌握CSS缩写技巧
    div+css实例分享:非常不错的页面制作方
    滚动条CSS样式集合
    Div+CSS教程:如何闭合浮动元素?
    CSS经验之谈:灵活运用注释带来的益处
    CSS经验之谈:保持CSS文件整洁与样式统
    CSS加载方式对页面优化的影响
    CSS2.1的完全支持 严格地遵守Web标准 I