一个简单又不简单的标准化表单设计实例。Update 05-15

简介:

首先给出结构,请注意,是结构固定在先,表现设计在后。

 1  < body >
 2       < div  id ="PopPage" >
 3           < h3 > 新增联系人 </ h3 >
 4           < div >
 5               < label > 姓名 </ label >
 6               < input  type ="text"   />
 7           </ div >
 8           < div >
 9               < label > 姓名 </ label >
10               < input  type ="text"   />
11           </ div >
12           < div >
13               < label > 姓名 </ label >
14               < input  type ="text"   />
15           </ div >
16           <!--  以次类推,我就不写了  -->
17           < div  class ="buttonarea" >
18               < input  type ="button"  value ="添加"   />
19               < input  type ="button"  value ="重填"   />
20           </ div >
21       </ div >
22  </ body >

下面是设计师提供的设计稿:

o_20060511.png

说明:有几个限制。
1、不能在body上定义背景图片。
2、结构不允许改变,也就是增加额外标签。
3、要求适应分辨率,因为此类页面不仅仅作为宽度固定的弹出页面,同时也要作为宽度不固定的内页。(表单内容会改变)
算了,不列了,要说限制可能还能写一些出来,但没意思了,干脆这样说:如何仅依赖css实现容度更高的整体布局。大家有兴趣可以试试看,三天后周日再给出我的Css和思路。当然不是标准答案,看看谁的容度最大。^_^

2006 5 11 Create

《重构之美-走在Web标准化设计的路上[复杂表单:Reload]》


本文转自爆牙齿博客园博客,原文链接:http://yuntian.cnblogs.com/archive/2006/05/11/397207.html,如需转载请自行联系原作者

相关文章
|
11天前
|
敏捷开发
【sgCreateTableData】自定义小工具:敏捷开发→自动化生成表格数据数组[基于el-table]
【sgCreateTableData】自定义小工具:敏捷开发→自动化生成表格数据数组[基于el-table]
|
4月前
|
数据管理
产品更新|子表单/关联表单、数据导入导出、版本权益等多项能力升级!
本期功能更新已全量发布,可直接在宜搭内体验。
323 2
产品更新|子表单/关联表单、数据导入导出、版本权益等多项能力升级!
|
11月前
|
JavaScript 前端开发 机器人
(简易)测试数据构造平台: 26 边角料功能快速完成 - 联系管理
(简易)测试数据构造平台: 26 边角料功能快速完成 - 联系管理
|
11月前
|
JavaScript 前端开发 数据库
(简易)测试数据构造平台:36 - 复杂工具(页面自动获取数据模块)
(简易)测试数据构造平台:36 - 复杂工具(页面自动获取数据模块)
|
开发者
【示例中心案例分享】表单中级联组件配置表单数据源
宜搭的级联组件不像下拉选择一样可配置关联其他选项,但是每次手动配置级联选项又很痛苦,我们如何借助宜搭的 OpenApi 去实现这个功能呢?我们的三方开发者 「苏灏」带来了他的案例。
391 1
|
前端开发 JavaScript 数据库
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
(简易)测试数据构造平台: 14 (工具列表删除功能前端)
|
JSON JavaScript 数据格式
(简易)测试数据构造平台: 16 (工具列表新增)
(简易)测试数据构造平台: 16 (工具列表新增)
(简易)测试数据构造平台: 16 (工具列表新增)
【TP5项目统一规范】修改之前的获取数据信息
【TP5项目统一规范】修改之前的获取数据信息
176 0
【TP5项目统一规范】修改之前的获取数据信息
|
前端开发
【TP5项目统一规范】添加数据
【TP5项目统一规范】添加数据
114 0
【TP5项目统一规范】添加数据
|
前端开发 JavaScript
【TP5项目统一规范】删除数据
【TP5项目统一规范】删除数据
216 0
【TP5项目统一规范】删除数据