收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 148839|回复: 280

[教程] Html+CSS 构建 B/S结构软件界面 -- 布局篇 -- position方式

  [复制链接]
发表于 2007-12-23 05:24:18 | 显示全部楼层 |阅读模式
Html+CSS网页构建(Web Page Building) 中的应用已经不是什么新鲜事了。轻盈的 Div布局 方式替换了笨重 Table布局 方式。而在 Div布局 方面多数人使用的是 float方式 ,Div 在 float 的控制下忽左忽右好不自在。但我们今天要说的不是 网页构建 ,而是 B/S结构 软件界面构建。所以我想介绍另外一种方式 position方式 。我个人比较喜欢这种方式,虽然很多人认为把 Div 的 position属性 设置为 absolute 后用 top属性 和 left属性 在页面中随意定位进行布局是一种极端菜鸟的方式,但在 B/S结构 软件界面构建过程中这种 position方式 的灵活绝对会给你带来意想不到的效果。当然我所说所写 position方式 还存在很多的不足之处,这只是为了抛砖引玉,来给大家打开一个话题。

闲话:

既然我们是在说 B/S结构 软件界面的构建,那就先来介绍一下 B/S结构 吧!

B/S结构(Browser/Server结构)浏览器和服务器结构 。它是随着Internet技术的兴起,对 C/S结构(Client/Server结构) 的一种变化或者改进的结构。在这种结构下,用户工作界面是通过浏览器来实现(也就是说 B/S结构 软件界面可以被理解为是建立在现有浏览器所能解释的 Html;CSS;Scrip等基础之上特殊的网页),这也就使得其具有了 C/S结构 所不能比拟的跨平台性等优势…… (详见: http://baike.baidu.com/view/679018.html

说完 B/S结构 让我们来说说既然 B/S结构 软件界面(其实就是一种特殊用途的网页)和普通网页有什么根本性的区别呢?

一、整页滚动。我个人不建议在 B/S结构 软件界面中使用整页滚动。因为浏览器滚动条的实在是为了当初方便阅读那些绵长的文章,这样的阅读习惯也促使了之后的网页也变得绵长。不过作为网页这也没什么不好(你完全可以将这理解为现实生活中把小说印在卫生纸上来供人们阅读,拉动滚动条就好像是向上抽出更长的卫生纸),但作为软件界面,其强调的更多是控制而不是阅读,整页滚动条就显得不那么合适宜了。在我的观念中软件界面设计时应尽可能的将一类操作在一个界面上显示出来,而不是还有一部分(也许这是更重的功能)隐藏在下面需要拉动滚动条(试想某个核大国的总统在按动核按钮后才发现滚动条,而下边的页面是警告说对方遭受核打击后很快会进行核报复…… 所以我们要坚决反对使用核武器 :p) 。即便是受到屏幕尺寸的制约也尽可能的使用局部滚动条或者干脆使用 Step-by-step方式 来解决。你什么时候看见操作系统(不论是糟糕的Win或是优秀的Mac)中在设置的界面中使用滚动条(有一个例外是iPhone,它在很多的设置界面中都使用了滚动条,但它有让人叫绝手指控制滚动的方式来弥补这一点)

二、尺寸适应。分辨率一直是困扰网页设计者的问题,在网页设计中大多还是集中在页面宽度的问题上。适应800px还是1024px,这就好像当年哈密雷特口中的 "To be or not to be",近年来随着显示器的变革这个问题还在愈演愈烈,除了刚刚说的2种分辨率,也许很多设计师脑中已经开始考虑1280px这个宽屏分辨率甚至更高的分辨率。当然也有的设计师干脆就只为800px,说这也是个不错的兼容性考虑,可惜我那1920px的显示器啊整天闲着两边。在 B/S结构 软件界面中从来没有这么简单的办法,因为复杂的功能可能有着大量的操作设置数据显示,一丝一毫的空间都不容的浪费。并且上一条也指出我们不想用整页滚动条来解决问题,这带来的不单是显示面积的限制,还有就是我们需要考虑的是宽度和高度双重尺寸适应问题。不单单是显示器分辨率,当浏览器不是最大化时界面同样要适应(Mac系统根本就不存在最大化),也就是说界面要时时应对浏览器窗口尺寸大小而调整。所以利用一切可能的手段使页面可以自动适应浏览器窗口尺寸就成为了棘手但却是必须去做的事情。又由于这个问题同时又衍生出的新问题是软件界面在自动适应时不同区域不会是等比缩放尺寸的,势必有些区域随之放大缩小而有些区域固定不变。这一点可以参照 C/S结构 软件界面,以大家常用的网页制作工具Dreamweaver为例,主要的代码显示区域是随窗口尺寸的调整而调整,但上边的菜单及功能按钮区域、下边的属性及结果区域、右边的功能区域都是固定不变的或者单方向调整的(只调整宽度或者高度)

三、布局结构。在布局上 B/S结构 软件界面和网页设计上有相同的地方,结构无非就是"上-中-下" "左-中-右",更复杂的结构也可由这2种衍生出来。但由于上一条后半段的所指出的问题,在布局时我一般倾向于将区域分成两类来对待:一类是主区域,页面中一般只有一个主区域,用来显示主要数据,当应对浏览器窗口尺寸变化时界面主区域随之变化尺寸;另一类是辅区域,页面中可以有多个辅区域,当应对浏览器窗口尺寸变化时界面辅区域固定不变或单方向调整。另外还有被我之前迫害了半天的滚动条。在 B/S结构 软件界面中我建议尽量在同一界面上只使用一个滚动条或一对滚动条(X轴和Y轴),因为在同一界面上出现的多个滚动条会让用户感到茫然。如果其他区域有滚动显示的需求时尽量用一些其他的方式来替代系统提供的滚动条。这唯一的滚动条一般被使用在主区域中,因为主区域即作为应对浏览器窗口尺寸变化而变化的区域,就表明了它可能对显示内容有较大量的要求,在低分辨率或窗口尺寸较小下的情况下滚动条会帮助其来完成任务。有了这些只是X轴和Y轴的问题解决了,有时在 B/S结构 软件界面实现中还要涉及Z轴的问题,这是网页设计中一般较少见的。

开篇还没写什么呢就写了这么多的闲话,我这个人就是这个优点:比较能跑题!闲话还是留着以后再说,先转入正文吧!



解释 position方式

position方式 在根本上是利用了 Html+CSS盒模型,在这里我就不过多的解释 盒模型 了。但要说的是由于不同浏览器或相同浏览器不同版本(且不说哪个浏览器的好坏,但同浏览器不同版本的极大差别只有某公司的某种浏览器的6.0版本和7.0版本才有这样的如黄色粘稠物一样的问题)之间的兼容性问题我们是采用了2种方式利用 盒模型 的。这2种方式分别来自 IE6.0 的 非标准盒模型 及 Firefox 为代表的 标准盒模型

说道解释 盒模型 我们不能不提一下 DOCTYPE,因为 DOCTYPE 对浏览器解释 盒模型 有着非常大的影响。尤其体现在 IE6.0 的 非标准盒模型 的解释上。这其中的差异我就不多说了,这样的文章远有比我写的好的。在这里我只说一下我的做法:

代码1-1

 提示:您可以先修改部分代码再运行


 
 
很多人可能会说我的 DOCTYPE 写的有问题,因为按照标准 DOCTYPE 必须要书写在文件的首行。这可不是我发明的写法,最早看到这种写法是在 Adobe.com(最近改版的版本已经放弃了这样的写法) 。第一行是声明 XML文档 编码为UTF-8,第二行是声明 DOCTYPE 类型 为 xhtml1-Strict 。其实这算是 DOCTYPE 的一种Hack写法,由于 DOCTYPE 没有写在第一行 IE6.0 及以下版本浏览器不解释,而 IE7.0\Firefox\Opera\Safari 却可以解释。我测试了很久发现这确实是一种不错的选择,因为 DOCTYPE 没让IE6.0变得更好反而更糟。所以我之后的 盒模型 都是基于这种 DOCTYPE 写法基础来解释的。

先来说 IE6.0 的 非标准盒模型,让人郁闷的是这个 非标零件 因为他的广泛使用却成为了我们必须考虑的标准。IE6.0在解释 双盒嵌套 (<div><div></div></div>) 中,子Div宽度被设置为100% 时其真实宽度为 父Div 宽度 – 父Div 边线宽度 - 父Div 内补丁宽度。父Div 真实宽度为设置宽度。

代码1-2

 提示:您可以先修改部分代码再运行


 
 
以上边代码为例(见代码1-2)父Div testDiv1 的真实宽度为设置的宽度600px,子Div testDiv2 的真实宽度为600px - padding-left:100px - padding-right:100px = 400px
这代码对我们有什么意义呢?看一下 代码1-2 的页面(IE6.0浏览器),从左到右分别是 黄-蓝-黄,这有没有点像是”左-中-右”的布局结构呢?让我们修改一下代码再看看。

代码1-3

 提示:您可以先修改部分代码再运行


 
 
看一下 代码1-3 的页面(IE6.0浏览器),从上倒下分别是 黄-蓝-黄,这有没有点像是”上-中-下”的布局结构呢?可能你会想我是不是疯了!这个谁不知道啊!这是最简单不过的代码了……

让我们来让这些代码变得更有意义吧!在这之前我们需要先要引入一段基础代码。这段代码是我在做 B/S结构 软件界面时所倾向于的做法。它可以帮助我们将页面格式化为无整页滚动条,并根据浏览器窗口尺寸时时自动适应。

代码1-4

 提示:您可以先修改部分代码再运行


 
 
看一下 代码1-4 的页面,并试着改变你浏览器的窗口尺寸。你会发现你得到了一个我许诺给你的。这段代码兼容 IE6.0\IE7.0\Firefox\Opera\Safari 。其实这个是我对 body标签 利用 position方式 的重构。你也可以记住这种方法,因为接下来我们很多时候都会用这种方法。

好了,让我们利用这段基础代码使之前再简单不过的代码变得有意义吧!'

代码1-5

 提示:您可以先修改部分代码再运行


 
 
看一下 代码1-5 的页面(IE6.0浏览器), 展现在你面前的是一个标准的”左-中-右”布局结构。mainDiv父DivmiddleDiv子Div 也是 主区域middleDiv 利用了其 父Divpadding属性 来为两边的 leftDiv rightDiv 子Div 也是 辅区域 Div留出空白。mainDiv 相对 Body 宽度值是100%,middleDiv 相对  mainDiv 宽度值是100%,这就使得 middleDiv 的宽度相对浏览器窗口尺寸是自动调整的,高度亦同。leftDiv rightDiv 分别利用 left:0px;right:0px; 来相对定位居左或居右对齐。试着改变你浏览器的窗口尺寸,看看效果吧!

你可能会说:”这算什么? float方式 也可以啊!CSS的代码还比这个简单呢!”

那让我们来修改一下代码吧!这样可以实现的”上-中-下”布局结构,并且相对浏览器窗口尺寸是自动调整。这是 float方式 不能实现的。

代码1-6

 提示:您可以先修改部分代码再运行


 
 
这里要说明的是在 代码1-6 中的 bottom:-1px; 这是因为IE6.0浏览器对CSS解释错误而产生的手动修复,当 子Div 使用 bottom属性 并且其 父Div 的高度 真实值 为单数时, 子DivBottom属性 在浏览器表现出的 真实值设置值 大1px。

不知道你看明白这些代码了没有,这些就是我所谓的 position方式 来实现的结构布局。你可能要说:”拽什么拽啊!你看看你的方式在Firefox中的样子吧!” 别急啊!之前不是说了么由于兼容性问题我们是采用了2种方式利用 盒模型 。现在让我们来说另外一种吧!

Firefox 为代表的 标准盒模型 这才是未来的王道。现在的 IE7.0\Opera\Safari 都可以非常好的遵循 标准盒模型标准盒模型 在解释 双盒嵌套 (<div><div></div></div>) 中,子Div 宽度被设置为100% 时其真实宽度为 父Div 的设置宽度。父Div 真实宽度为设置宽度 + 父Div 内补丁宽度 + 父Div 边线宽度。也就是说 父Div 的盒被撑大了。并且在 标准盒模型 中通常 height属性 是无效的。那我们有什么办法能解决这样的问题呢?看下边这段代码。

代码1-7

 提示:您可以先修改部分代码再运行


 
 
看一下 代码1-7 的页面(Firefox浏览器),发现 mainDiv 并没有被 padding 和 border 撑大了。这正是利用了 body>#mainDiv 这一种CSS的Hack写法来解决了问题。具体的我就不多说了,想必大家一眼就能看明白(其实就相当于你告诉浏览器说:我要做一个盒子,盒子大小你看着办,但盒子的左边和右边都要距离墙0px远) 。但 padding属性 还是在很多时候影响了 position方式 ,所以我们尽量不在 标准盒模型 的布局中使用它。可回想一下在 非标准盒模型padding属性 可是非常重要的一部分。那么为了兼容2种模型,我们使用另一种CSS的Hack写法,在CSS属性前边加”_”来使这一属性只有IE6.0才能识别并解释,而 标准盒模型 的浏览器都不能解释这一CSS属性。


未完待续……

[[i] 本帖最后由 wiseinfo 于 2007-12-23 05:59 编辑 ]

评分

参与人数 1威望 +5 收起 理由
greengnn + 5 辛苦了,加分鼓励,现在很多B/S结构的 ...

查看全部评分

 楼主| 发表于 2007-12-23 05:47:54 | 显示全部楼层

Html+CSS 构建 B/S结构软件界面 -- 布局篇 -- position方式

应用 position方式

综合我们上边说过的方法来整理一下代码让我们看看 position方式 能带给我们的效果吧!

代码1-8

 提示:您可以先修改部分代码再运行


 
 
这段通过 position方式 构建出的代码可以完美的运行在 IE6.0\IE7.0\Firefox\Opera\Safari 浏览器中来实现布局结构。如果有天你想要对你的软件界面进行又改了那你也通过单纯修改CSS样式表的方式来

修改布局结构而不用变动丁点Html代码。

代码1-9

 提示:您可以先修改部分代码再运行


 
 
通过对布局结构的组合你还可以通过 position方式 构建出更复杂的结构。

代码1-10

 提示:您可以先修改部分代码再运行


 
闲话:

其实笔者也就是我,不是一个专业的 构建师(Web Page Builder),而是一个研究系统&界面易用性的策划。所以没有很多时间来阅读和研究 Html+CSS 构建方面的文章,很多的东西都是我在闭门造车。如果我所写的东西其中有很大的漏洞请您即时给予指出并帮助我一起来找到解决办法,而不要嘲讽,毕竟 我们都是来自五湖四海,为了一个共同的革命目标,走到一起来了 。我们现在所使用的 Html++CSS 构建方法都是源自国外,而我们少有对基础方法的研究,我只是想做一些微薄的事情……

另外我的文章中几处提到了 MS-Win 这个人,其实我对 MS-Win 并没有敌意(这是本文唯一一句言不由衷的话)。我们不能否认 MS-Win 在计算机个人应用中所做的贡献,但我认为 MS-Win 他没有追求完美的精神。明明做了很多事但却少有尽善尽美。小的时候爸爸教育我说:”如果人家要你搬沙袋,不是说让你从这里搬到那里就完了,而是搬到那里还要好好的垒起来。这其中还要动脑筋想想,想想如何让沙袋不容易倾倒,并且尽量要占用较小的面积…… ” 所以我更喜欢 AP-Mac 做我的伙伴,虽然 AP-Mac 没有搬很多的 ”沙袋”,但他将 ”沙袋” 垒的很好。

对于 position方式float方式 的比较,我想说 position方式 不是为了替代 float方式,它们分别有自己的适应范围,比如对于像设计导航这样的多个元素布局时还是 float方式 更有效,因为 position方式 布局时如果不使用嵌套一次基本只能控制3-4个元素进行布局。而对于像框架搭建这类的布局时我个人认为,position方式float方式 更方便。

另外在使用 position方式 的过程中,你可能会遇到很多奇怪的问题,但这多数都会集中在对 position属性 的使用上。对于 position属性 在赋予不同值时的理解是很难的,我曾想要把它写出文章来共同讨论,可我发现想要讲述清楚更难(这难道就叫只可意会不能言传) 。所以我还是有机会更深入研究后再出来胡说吧。


给出便于阅读的 PPT版本 http://wiseinfo.cc/docs/Html+CSS ... terface__Layout.PDF

-----------------------------------------------------------------------------------------------------------------------
[ 为提供基于该方法继续优化的解决方案供大家参考,应楼主要求,由14px编辑添加以下内容 ]
[ 编辑日期:2009-06-06 ]

优化主要目的:解决IE6中采用quirks模式存在弊端的模式。
优化主要方法:利用IE6中<html>标签的盒模型bug添置top与bottom的空白区域。
优化后的演示:

 提示:您可以先修改部分代码再运行


详细分析帖子:http://bbs.blueidea.com/thread-2928157-1-1.html
-----------------------------------------------------------------------------------------------------------------------

[[i] 本帖最后由 14px 于 2009-6-6 19:51 编辑 ]
回复 支持 1 反对 0

使用道具 举报

发表于 2007-12-23 12:49:37 | 显示全部楼层
嗯,不错,最近在看CSS~ 
回复 支持 反对

使用道具 举报

发表于 2007-12-23 13:09:02 | 显示全部楼层
好东东!
回复 支持 反对

使用道具 举报

发表于 2007-12-23 13:09:02 | 显示全部楼层
对于position也是有一些不足的地方的。
针对LZ的代码10部分动了下,或者说是在centerDiv中加入了超过这个高度后的情况

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2007-12-23 13:12:43 | 显示全部楼层
不错,好好学习中.
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-23 14:05:39 | 显示全部楼层
原帖由 [i]phantom 于 2007-12-23 13:09 发表
对于position也是有一些不足的地方的。
针对LZ的代码10部分动了下,或者说是在centerDiv中加入了超过这个高度后的情况


你要说的是什么呢?难道说会撑大?变通一下吧兄弟!看看这个代码


 提示:您可以先修改部分代码再运行




我上边说了,centerDiv 是作为主区域出现的。可以被自动缩放,于此同时他也应该是那个我所说的加滚动条的区域。想想Dreamweaver的代码区不是也用的滚动条吗?看看我在第一段闲话中说的后半部分。
回复 支持 反对

使用道具 举报

发表于 2007-12-23 14:16:48 | 显示全部楼层
真有意思:

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-23 14:32:14 | 显示全部楼层
建议大家在看这篇文章时都做一下作业。呵呵!我想这里的人大部分都都好久没有写过作业了。就是自己写一段用 position方式 构建的布局结构。然后找出问题与不足,并想想解决办法。这样能让你更好的理解 position方式 。并且我们可以一起对 position方式 所存在的问题进行讨论。

另外这个也许不是独立的一章。写这个只是一时的冲动,不过写下来发现其实还有好多想要说的。想要问问如果写一篇关于 “构建B/S结构软件界面” 的书有人愿意看吗?主要想说“B/S结构软件界面设计方法” “易用性” “标准化” “Html+CSS” “JvavScript&AJAX” 等几个部分。可是我又不是个善于写作的人。呵呵!没长兴…… 并且最大的担心就是像很多国内人写的书一样落了俗套,里面充斥着大量无用的东西,每本书都要花几个章节来介绍基础知识,而让人觉得恨不得要把买回来的书的前半部分撕掉。
回复 支持 反对

使用道具 举报

发表于 2007-12-23 15:13:20 | 显示全部楼层
太长了。。吃完饭回来继续研究。先MARK
回复 支持 反对

使用道具 举报

发表于 2007-12-23 15:32:00 | 显示全部楼层
原帖由 [i]wiseinfo 于 2007-12-23 05:24 发表
但我们今天要说的不是 网页构建 ,而是 B/S结构 软件界面构建...


大家讨论时请注意楼主这句话,呵呵~

我来反比一下:在构建网页,而不是B/S结构界面时一般还是使用 float 作为布局方法。
回复 支持 反对

使用道具 举报

发表于 2007-12-23 16:42:54 | 显示全部楼层
当然在centerDiv中加上overflow后可以实现滚动,可主要的话,滚动条是针对这个centerDiv的,那如果,或者我想要的是页面body的滚动条呢。
简单说,就是说我希望这个centerDiv是自适应高度的呢?那应该要如何操作?

[[i] 本帖最后由 phantom 于 2007-12-23 22:32 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-12-23 17:00:41 | 显示全部楼层

回复 #13 phantom 的帖子

怎么不看看12楼的菜鸟发言?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-23 18:36:21 | 显示全部楼层
原帖由 [i]phantom 于 2007-12-23 16:42 发表

当然在centerDiv中加上overflow后可以实现滚动,可主要的话,滚动条是针对这个centerDiv的,那如果,或者我想要的是页面body的滚动条呢。
简单说,就是说我希望这个centerDiv是自适应高度的呢?那应该要 ...


首先我所举 position方式 的实例是在解决我闲话中所描述的问题。我的目的就是要不出现整体滚动条。

position方式 不能解决所有布局问题,你所描述的问题也许用 float方式 更合适,因为 float方式 在布局时不需要考虑页面高度问题。

如果用一个现实模型来描述 float方式 和 position方式。

可以把 float方式 比作用砖砌墙,砖与砖的位置不会叠加是实体的。所以可以很容易的盖起一面墙,但却很难改变墙的大小。

可以把 position方式 比作画油画,染料可以被层层叠加是虚体的。所以可以很容易随画布改变而改变大小,但却很难堆砌出一面墙。


如果你非要 position方式 来做这个的话,我正在尝试另外一种 position方式 写法也许能实现这个,但现在还没有结果。


另:把你贴之中引用我帖子的那部分修改一下,无用的信息占用了很大的面积。后边的人不好阅读啊!兄弟!
回复 支持 反对

使用道具 举报

发表于 2007-12-23 22:34:02 | 显示全部楼层
TO: fkueaps
   呵呵,俺错了捏。

to: wiseinfo
    你说的对。呵呵,需求不同吧。
回复 支持 反对

使用道具 举报

发表于 2007-12-24 11:20:02 | 显示全部楼层
aoao以前作过这个东西

http://labs.aoao.org.cn/demo/layout/100x100/

原理一样
回复 支持 反对

使用道具 举报

发表于 2007-12-24 11:27:43 | 显示全部楼层
先收下,再慢慢看
回复 支持 反对

使用道具 举报

发表于 2007-12-24 11:33:29 | 显示全部楼层
好文章!做个记号,有空好好研究下!
回复 支持 反对

使用道具 举报

发表于 2007-12-24 12:23:36 | 显示全部楼层
这个东西真的需要好好研究一下 期待楼主的教程
回复 支持 反对

使用道具 举报

发表于 2007-12-24 13:59:05 | 显示全部楼层
个人觉得
*{margin:0;padding:0}
这种写法非常不可取
回复 支持 反对

使用道具 举报

发表于 2007-12-24 14:34:48 | 显示全部楼层
个人不喜欢B/S模式·或者是 单页内N个滚动条烦躁死人
个人原因 个人原因
个人认为 position:aboulute 和 overflow:hidden
是一种欺骗浏览器的方式
不太喜欢
坚挺float下布局
大不了加些JS
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-24 15:14:27 | 显示全部楼层
原帖由 [i]Nickyu 于 2007-12-24 13:59 发表
个人觉得
*{margin:0;padding:0}
这种写法非常不可取


不可取在什么地方呢?我认为最大的问题在于很多被定义好的CSS常量被抹掉了,需要自己从新定义。

而这个问题同时也是个优势,因为不同浏览器这类常量有时候是不同的,会影响到兼容性。并且这被定义好的CSS常量也许并不适合我。

另外这段代码并不影响 position方式 的本身,完全可以将其去掉。这么写完全是我自己的一种习惯。
 
 
原帖由 [i]amilim 于 2007-12-24 14:34 发表
个人不喜欢B/S模式·或者是 单页内N个滚动条烦躁死人
个人原因 个人原因
个人认为 position:aboulute 和 overflow:hidden
是一种欺骗浏览器的方式
不太喜欢
坚挺float下布局
大不了加些JS


呵呵!你说了很多不喜欢,如果单纯是个人原因没有任何理由的话完全没必要在这里说。你所说的欺骗浏览器是什么意思?按照你的说法那么当初CSS就不应该有这2个属性了。

如果你要反驳别人,最起码的尊重是弄清楚别人说了什么。不理解你说的将 B/S模式 和 单页内N个滚动条 说到一起去是为了什么?我也在文章中提到了尽量避免 单页内N个滚动条 这种情况出现。

我从没有说过要替代 float方式。2种方式都是要视情况选择,如果情况需要甚至需要2种办法共同使用。


我不抵触反对的声音,因为对于一种新方法、新模式、新思想而言,反对的声音比赞同的声音更有意义。但作为讨论和研究的基础,如果你提出反对的声音就要给出理由,不然的话有何意义吗?
回复 支持 反对

使用道具 举报

发表于 2007-12-24 16:00:22 | 显示全部楼层
写的很好~很有用~支持一下~我也在做类似的工作~
回复 支持 反对

使用道具 举报

发表于 2007-12-24 16:28:33 | 显示全部楼层
我认为楼主的这种思路:可取
毕竟我自己现在从事的就是软件B/S界面设计这个行业,深深体会到它与主流网页设计的不同
网页设计要求信息的大量展示,而B/S软件更注重用户控制与体验
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-24 16:59:42 | 显示全部楼层
看到不少人还是在抵触的心理去看待 B/S结构!但我觉得这种抵触是在不理解 B/S结构 真正内涵的基础上的!并不是你把网页做成什么个样子就是 B/S结构 。从含义上来说只要是基于 Browser/Server结构 就是 B/S结构,我们的 经典论坛 即是 B/S结构,你抵触 经典论坛 的模式吗?难道你更喜欢90年代甚至更早的 新闻组?大家用客户端收发电子邮件的方式来讨论问题?

我所说的不使用整页滚动并在布局上自动适应的方式只是 B/S结构 的界面解决的一个小分支。让 B/S结构 看起来或使用起来更像是传统的 C/S结构 的软件界面,而不是一个网页。当然我并不是说网页不好,我之前也说了,用什么界面方式是由需求决定的。比如论坛这种形式就比较适合像是现在的网页一样整页滚动条的方式,因为论坛是用来阅读的。而行事历(例如Google Calendar)就比较适合像是传统的 C/S结构 的软件界面,因为行事历是用来操作设置的。

但就总体来说我认为 B/S结构 更具有优势,这种优势带来的不是取代而是共存。因为 B/S结构 的 跨平台、无需部署、共享数据 等优势都更适应于现代软件需求。并且 B/S结构 也在不断的进化,像 RIA 这类 B/S结构 的新分支使得 B/S结构 吸取了  C/S结构 在 数据交换 、数据显示、操作方式 等多方面的优点,使其更加完美化。

下边的图片是我在1年前做项目时给客户的PPT中的截屏

[[i] 本帖最后由 wiseinfo 于 2007-12-24 17:02 编辑 ]

界面实现技术选择

界面实现技术选择
回复 支持 反对

使用道具 举报

发表于 2007-12-24 17:26:27 | 显示全部楼层
值得研究一下 mark
回复 支持 反对

使用道具 举报

发表于 2007-12-24 17:47:09 | 显示全部楼层
楼主的思路没错,但我到了也没看懂想表达什么意思?

用一句话概况一下好吗?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-25 04:50:28 | 显示全部楼层
原帖由 [i]coolfeng 于 2007-12-24 17:47 发表
楼主的思路没错,但我到了也没看懂想表达什么意思?

用一句话概况一下好吗?



说实话我真的没有像 老子 一样的能力把一些高深的道理用一句话概括(当然我说的也并不是什么高深的道理)

我写这个东西花了我三个晚上,每个晚上至少2个小时。你可能要说这太慢了。但那是因为我是逐字逐句的书写、检查、修改。

因为我的写作能力确实很差(这个不能怪我,要怪也要怪万恶的教育),我担心写出来的东西不能被理解。

我起码反复看了近20遍这些内容,并且用 下划线 文字颜色 来区分内容帮助阅读。最后怕由于论坛行排版与间距的问题不方便阅读,我又制作了PDF文档。

重申一遍,我真的没有能力用一句话来概括出来让你明白。如果有人可以请告诉我,我也省了好多时间……
回复 支持 反对

使用道具 举报

发表于 2007-12-25 08:28:24 | 显示全部楼层
赞一个,楼主这种精神是值得学习的,希望这贴可以引起更多的B/S结构讨论
看完楼主所写的内容,想想我也曾遇到过一些相似的,我的软件也可以说是B/S结构的,属于×××管理系统,为了系统更像C/S的结构,我们采用的是框架结构的,只有主区域也可能出现滚动条。
其实我更想问楼主的是:
1.采用框架结构,还是采用楼主说的position方式来布局,各有什么优缺点呢?
2.楼主文中提到“尽量避免 单页内N个滚动条”,我们应该如何避免呢?
3.相信楼主也遇到过,很从界面在窗口最大化或者大于一定宽度时,界面是比较正常的,但如果窗口过小,界面中的元素就会出现错位、换行等问题,我想知道楼主认为在窗口过小的情况下,界面应该如何响应呢。
回复 支持 反对

使用道具 举报

发表于 2007-12-25 13:16:52 | 显示全部楼层
_padding-left前面加_是啥意思?谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2018-7-23 19:12 , Processed in 0.140625 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表