首先给出结构,请注意,是结构固定在先,表现设计在后。
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 >
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 >
下面是设计师提供的设计稿:
说明:有几个限制。
1、不能在body上定义背景图片。
2、结构不允许改变,也就是增加额外标签。
3、要求适应分辨率,因为此类页面不仅仅作为宽度固定的弹出页面,同时也要作为宽度不固定的内页。(表单内容会改变)
算了,不列了,要说限制可能还能写一些出来,但没意思了,干脆这样说:如何仅依赖css实现容度更高的整体布局。大家有兴趣可以试试看,三天后周日再给出我的Css和思路。当然不是标准答案,看看谁的容度最大。^_^
2006 5 11 Create
《重构之美-走在Web标准化设计的路上[复杂表单:Reload]》
本文转自爆牙齿博客园博客,原文链接:http://yuntian.cnblogs.com/archive/2006/05/11/397207.html,如需转载请自行联系原作者