文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院网站建设Div+CssDIV CSS布局网页实例:简单表单form标准化实例
精品推荐
特别推荐
·初学者来看:学习网页技术CSS怎么入门?
·CSS网页设计非常有用技巧
·DIV+CSS的命名规则有利于网站优化
·多个CSS样式表争夺特定选择符的控制权
·学习CSS制作网页总结的一些经验技巧
·CSS初学者应该保持的一种心态
·CSS常见问题和技巧总结
·DIV+CSS常见错误汇总
·设计中常用的十个CSS技巧
·网站配色,CSS主色调配色方案
热点TOP10
·背景图片居中显示(HTML,CSS技巧)
·CSS实例:让页脚保持在未满屏页面的底部
·CSS大师Eric采访实录
·CSS隐藏网页文字的几种常用方法
·国外译文:网页设计如何使用CSS的选择器模式?
·CSS注释、命名、继承性、样式排序等CSS技巧的小结
·CSS条状图表形式的实现方法
·CSS实现带背景图片的文字链接的方法
·CSS和XHTML经验:类目之间的竖线问题引发的讨论
·LI标签中内容超过长度后以省略号显示的方法

DIV CSS布局网页实例:简单表单form标准化实例

日期:2008年6月17日 作者: 查看:[大字体 中字体 小字体]


form无论是在网站的制作中,还是在网站的重构中,我们都会频繁地“碰面”,当“碰面”的次数多了,反而觉得他更让人迷茫,有种熟悉的“陌生”,越来越把握不了他。

下面我们将带大家走进form的世界,一起来熟悉、探讨、掌握他的“脾性”。

DIV CSS布局网页实例:简单表单form标准化实例



对于简单form的设计图(如图一,yahoo注册页面的一部分),我们如何来做整体的布局呢?大体我们可以选用以下3种方式来做布局:

1、使用table来布局

这是大家最常用的方法,虽然现在到处都在谈标准化,甚至更多的在说div+css,但怿飞还是推荐大家使用table来布局form。对于标准,个人的另类理解“更符合逻辑,更效率快捷”。

为什么推荐大家使用呢?table本就是用来显示二维数据,用table来布局form可以说是他的“老本行”。另外重要的一点是,对于复杂的form,table能更有效的进行布局和维护修改,体现了效率和易用。

在布局之前,先温习一下table的部分标签:
table:显示二维数据
summary:定义表格的用途
caption:定义表格的标题,在表格开始的地方使用,仅一次
tr:表格中的一行
th:表头单元格,定义一行或者一列的表头信息
td:数据单元格


下面我们具体来对图一的设计图进行整体布局:

<form id="demoform" class="democss" action="">

<table summary="使用table来布局的演示" id="demo">

<caption>
Registration example form
</caption>

<tr>
<th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th>
<td><input type="text" id="fname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></th>
<td><input type="text" id="lname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></th>
<td>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>

[1] [2] [3] [4] [5] [6] [7] 下一页 




上一篇:DIV+CSS标准制作网页表单的select例子

下一篇:CSS技巧:网页设计关于cellspacing和cellpadding

相关文章:
·为什么iexplore.exe在打开网页时CPU使用会100%?
·Photoshop CS3合成实例:人间天堂
·Windows Vista Ultimate中文旗舰版下载+简单破解(支持迅雷HTTP & BT)
·DataList嵌套实例
·Photoshop十余种漂亮照片边框简单制作技巧
·怎样制作网页?
·简单方法查找黑客老巢
·IE新开窗口最大化最简单有效方法
·Photoshop实例:制作超酷影片画面场景
·FC API(JSR 75)简单讲解
相关软件:
·Dreamweaver 网页设计
·photoshop cs 超梦幻网页创意宝典
·中文版Excel 2003实例与技巧
·CorelDraw12 入门与实例(图文教程 菜鸟先飞系列教材)
·东方网页王III 正式版
·AutoCAD2002入门与实例详解
·企业标准化管理制度大全
·Flash MX 动画制作实例教程
·注册表实例应用视频教程swf
·PhotoShop7 设计百例 + 经典实例教程 + 滤镜教学

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.vipcn.net
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved. 鄂ICP备05000083号Powered by:viphot