超越起点 追随自由

我看不见,我的明天,但今天,绝不重复昨天;顺风是滑翔,逆风才是飞翔,火烧过才能化凤凰!

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  294 随笔 :: 16 文章 :: 1118 评论 :: 24 Trackbacks

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

 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>

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

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

2006 5 11 Create

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

2006 5 15 Update

posted on 2006-05-11 12:30 爆牙齿 阅读(4354) 评论(29)  编辑 收藏 所属分类: 4、奋斗《重构之美》

评论

#1楼  2006-05-11 14:54 Leonic      
label标记中的文字个数不一定,要做到两端对齐有点困难。文本框最好指定class,否则的话跨浏览器不一定支持。左右两栏如果没有用层分栏隔开的话也很麻烦。
个人觉得,用这种方式做复杂表单,那是给自己找事。
  回复  引用  查看    

#2楼  2006-05-11 15:08 bing717 [未注册用户]
三天后再来
  回复  引用    

呵呵,还留什么悬念?有什么本事就拿出来!
  回复  引用  查看    

#4楼  2006-05-11 15:40 浮云      
关注
  回复  引用  查看    

#5楼 [楼主] 2006-05-11 15:56 爆牙齿      
@Leonic
那么你把中间的表单内容去掉再试试看。
我说了,表单部分会变,或许是两列可能是一列也许是三列,大概还会有类DataGrid数据列表。先考虑整体再细节。^_^

@徐灿钊Asp.net专栏
不是买关子,只是希望大家想想,而不是复制粘贴修改。我说了嘛,简单又不简单,如果我直接给出css那就是简单了。

其实我发错地儿了,程序员完全没必要钻研Css的,费力不讨好的。
  回复  引用  查看    

#6楼  2006-05-11 16:28 =兔子=      
三天后来
  回复  引用  查看    

#7楼  2006-05-11 17:00 cw [未注册用户]
很简单的要求啊!

我设计过比这更复杂的样式...

无非是要对DIV的样式要有深入了解, 不然几呼无从下手...
  回复  引用    

#8楼  2006-05-11 17:35 Night_Cat [未注册用户]
三天后来
  回复  引用    

#9楼  2006-05-11 17:45 Leonic      
@爆牙齿: 你是说整体布局?那就不难了。等会就来。

  回复  引用  查看    

#10楼 [楼主] 2006-05-11 18:17 爆牙齿      
@Leonic
我相信你能想出来。
如果你想出来了,那么能不能保留意见别发出来或者通过留言给我,给别人思考和琢磨的机会,谢谢。^_^
  回复  引用  查看    

#11楼  2006-05-11 18:55 nuthell [未注册用户]
@ 爆牙齿

按我的思路,我是设定几个class..安实际情况给不同的div添加class
  回复  引用    

#12楼  2006-05-11 20:47 birdshome      
折腾啊
  回复  引用  查看    

#13楼  2006-05-11 20:55 鄙视 [未注册用户]
style:
float:left
float:right
好像可以搞定
  回复  引用    

#14楼  2006-05-11 21:01 垃圾猪      
中间两个间的空格你不要告诉也是CSS控制的,而且是一种样式,还不是两个字的两个字的样式,三个字三个字的样式
  回复  引用  查看    

#15楼  2006-05-11 22:53 onestab [未注册用户]
#PopPage {width:100%;background:#EEF;text-align:center; border:1px solid black;font-size:11pt;}
#PopPage div {width:48%;float:left;margin:.2em 0}
#PopPage div label {width:30%; text-align:right;float:left;margin-right:1em;}
#PopPage div input {width:10em; background:white;margin-right:0; }
input {border:1px solid #CCE}
#PopPage div.buttonarea {width:100%;clear:both;float:none}
#PopPage div.buttonarea input {width:3em;}

大致如此了,IE,Firefox 均可。
  回复  引用    

#16楼  2006-05-12 00:49 edison1024      
“大便蛔虫”?!!这个web disigner有个性啊。。。。
  回复  引用  查看    

#17楼  2006-05-12 13:57 大力      
你那个表单名字太难听啦。。。。/
  回复  引用  查看    

#18楼  2006-05-12 15:48 Anders Liu (lover_P)      
嗯,明天过来学习~
  回复  引用  查看    

#19楼  2006-05-12 20:41 nuthell [未注册用户]
比较上来讲~~从两个地方来突破:

1 预先设定 几套不同样式的class

2 在宽度设定上,大规模的采用 %比
  回复  引用    

#20楼 [楼主] 2006-05-13 09:18 爆牙齿      
@onestab
其他我先保持沉默,先问一个关键问题:
请问我的“大便蛔虫的表单主标题”呢?你怎能无视它的存在?
简单又不简单。
  回复  引用  查看    

#21楼  2006-05-13 23:49 onestab [未注册用户]
大便蛔虫的表单主标题 如果不用背景图片或js,如何实现?
  回复  引用    

#22楼  2006-05-14 14:13 guest [未注册用户]
追求效果,做了点补充
#PopPage H3
{
height: 35px;
font-size: 12px;
color: #84370C;
text-align: center;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr= '#D1D8DF' ,endColorStr= '#E2E6EB' ,gradientType= '0' );
border-bottom: #c0c0c0 1px solid;
}
#PopPage div.buttonarea
{
width: 100%;
clear: both;
float: none;
}
#PopPage div.buttonarea
{
border-top: #c0c0c0 1px solid;
text-align: center;
padding-top: 10px;
height: 50px;
}
#PopPage div.buttonarea input
{
border: 1px solid #c0c0c0;
width: 80px;
height: 22px;
}
  回复  引用    

#23楼  2006-05-15 09:46 Anders Liu (lover_P)      
Microsoft.Gradient在非IE浏览器上没有任何效果阿……
  回复  引用  查看    

#24楼  2006-05-15 15:22 saf [未注册用户]
还是没能达到最终的那个效果的.
  回复  引用    

#25楼  2006-05-17 06:42 anymore [未注册用户]
是啊, 如果不能兼容其他浏览器,就谈不上所谓的标准化设计。
  回复  引用    

#26楼  2006-05-21 16:07 zxfly [未注册用户]
我的想法:
给PopPage设置百分比宽度,背景图片:
background:#AEB4C5 url(路径) center 18px no-repeat;
然后padding-top,或者h3设置margin-top也行
laebl设置固定宽度左浮动,(文字两边对齐俺不会……)
然后PopPage的子div再设置百分比宽度,左浮动,当PopPage宽度不够容纳更多子div的时候,子div就会换行
今天已经星期日了……

  回复  引用    

#27楼  2006-05-21 16:09 zxfly [未注册用户]
而且还延时一周……
  回复  引用    

#28楼  2006-10-30 01:05 kenlixin [未注册用户]
奇怪呀奇怪呀,标准化表单没有form tag?
只看到一堆div。
  回复  引用    

#29楼  2007-03-11 20:50 avk [未注册用户]
我仔细阅读了你的文章"重构之美-走在Web标准化设计的路上",你给出的答案在IE7下无法显示???,咋的了????
  回复  引用