设为首页 友情链接
在线留言 发表文章
加入收藏 广告联系

刺猬首页

| 专案技术 | 网络技术 | 图形图象 | 网络编程 | 网页设计 | 操作系统 | 服务器 | 技术白皮书 | 在线实验室 | 刺猬论坛 |
小说专版  | 数据库 | 设计赏析 | 存储频道 | 网络安全 | 私服架设 |  Solaris | 网站评估 | PC维护技巧 | 下载中心 | 博 客 |
专   题: | Linux | java | cisco | 防病毒 | 刀片 | SOA | iscsi | ASP.NET | SQL | Oracle |
您现在的位置: 刺猬宫 >> 网页设计 >> 网页制作技巧 >> 教程正文 用户登录 新用户注册
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
制作网页技巧:“注册”…
网页设计开发如何处理网…
网站导航在网页设计中应…
网页制作研究:网页上用…
网页制作技巧:加速网页…
网站易用性 43条网页设计…
巧妙用文字给你设计的网…
入门:Dreamweaver8设计…
用Dreamweaver合理为为网…
使用Dreamweaver8在网页…
  [组图]网页制作技巧:输入表单的三种布局           
网页制作技巧:输入表单的三种布局
 

关于输入表单的三种常用布局,大家应该都比较熟悉了,

第一种是这样,称为右对齐/左对齐,左边的标签右对齐,右边的输入框左对齐(来自yahoo):

网页制作技巧:输入表单的三种布局

第二种是左对齐/左对齐,左边的标签左对齐,右边的输入框左对齐(来自Google):

网页制作技巧:输入表单的三种布局

另一种方式是标签在上,输入框在下(来自豆瓣):

网页制作技巧:输入表单的三种布局

(以上源页面版权归各网站所有,红色或绿色的指示线为作者添加。)

这三种方式各有什么不同呢?

从视觉流来看,右对齐/左对齐强调的是标签和输入框这一对元素之间的关系(从左到右,它们在距离上最接近),缺点是,如果左边的标签长短差别很大,就会造成参差不齐很难看的页面;左对齐/左对齐的布局削弱了这种标签-输入框的对应关系,但是很方便从上到下浏览所有的输入标签,当然,如果左边的标签长短差别大,也会造成距离过远,难看的页面;上下布局则兼顾了标签和输入框之间的关系,以及从上到下的很好的逻辑顺序,它的缺点是,不适合输入框太多的情况。

左右两种布局在中文界面上也许可以取得一致,即,让所有的标签长度一致,在左对齐的同时也右对齐,中文真是一门奇妙的语言,在英文页面上,就很难做到这一点了。

 问题:

  1. 什么时候应该采用右左布局,什么时候应该采用左右布局?
  2. 为什么我说上下布局不适合输入框太多的情况?

西贝的回答:

  1. 右左布局:当输入框为多个并且类别相同,字段长短较一致时,建议采用右左布局;
  2. 左右布局:当输入框多,但类别不一致时采用;
  3. 上下布局:当输入框较少,但是引发的提示或帮助较多时,建议采用;不适合输入框多的情况,因为页  面占用较大,跨度较大;连贯性不强,但是易于区分;

频道声明:本频道的文章除部分特别声明禁止转载的专稿外,可以自由转载.但请务必注明出出处和原始作者 文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。

原始作者:佚名 录入时间:2007-6-29 11:45:34
信息来源:不详 投稿信箱:itqoo@126.com
教程录入:itqoo    责任编辑:itqoo 
  • 上一个教程:

  • 下一个教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    - 关于我们 - 合作伙伴 - 友情链接 - 广告刊登 - 投稿热线 - 在线留言版权声明联系方式 -
    IT公社版权所有 粤ICP备05127012号
    Copyrigh@2005-2006 itqoo.com.Inc All Rights Reserved  推荐分辨率 1024*768
    联系站长:E-Mail:itqoo@126.com     MSN:urchincc@hotmail.com    QQ:点击这里给我发消息
    特别感谢:亿太网络提供空间支持