Html+CSS 构建 B/S结构软件界面 -- 布局篇 -- position方式
Html+CSS 构建 B/S结构软件界面 -- 布局篇 -- position方式
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&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&提示：您可以先修改部分代码再运行　 　 很多人可能会说我的 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&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
#testDiv1{ width:600 height:400 padding: 0px 100 background-color:#FFFF99;
#testDiv2{ width:100%; height:100%; background-color:#00CCFF;
&div id=&testDiv1&& &div id=&testDiv2&& &/div&
&提示：您可以先修改部分代码再运行　 　 以上边代码为例（见代码1-2），父Div testDiv1 的真实宽度为设置的宽度600px，子Div testDiv2 的真实宽度为600px - padding-left:100px - padding-right:100px = 400px 这代码对我们有什么意义呢？看一下 代码1-2 的页面（IE6.0浏览器），从左到右分别是 黄-蓝-黄，这有没有点像是”左-中-右”的布局结构呢？让我们修改一下代码再看看。
代码1-3&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
#testDiv1{ width:600 height:400 padding: 40px 0 background-color:#FFFF99;
#testDiv2{ width:100%; height:100%; background-color:#00CCFF;
&div id=&testDiv1&& &div id=&testDiv2&& &/div&
&提示：您可以先修改部分代码再运行　 　 看一下 代码1-3 的页面（IE6.0浏览器），从上倒下分别是 黄-蓝-黄，这有没有点像是”上-中-下”的布局结构呢？可能你会想我是不是疯了！这个谁不知道啊！这是最简单不过的代码了……
让我们来让这些代码变得更有意义吧！在这之前我们需要先要引入一段基础代码。这段代码是我在做 B/S结构 软件界面时所倾向于的做法。它可以帮助我们将页面格式化为无整页滚动条，并根据浏览器窗口尺寸时时自动适应。
代码1-4&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body{ height:100%; overflow:
html&body{ /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #808080;
&提示：您可以先修改部分代码再运行　 　 看一下 代码1-4 的页面，并试着改变你浏览器的窗口尺寸。你会发现你得到了一个我许诺给你的。这段代码兼容 IE6.0\IE7.0\Firefox\Opera\Safari 。其实这个是我对 body标签 利用 position方式 的重构。你也可以记住这种方法，因为接下来我们很多时候都会用这种方法。
好了，让我们利用这段基础代码使之前再简单不过的代码变得有意义吧！'
代码1-5&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body{ height:100%; overflow:
html&body{ /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #
#mainDiv { width: 100%; height: 100%; padding:0px 160px
#middleDiv{ width: 100%; height: 100%; background-color:#00CCFF;
#leftDiv{ width:156 height:100%; background-color:#99FF33; position: top:0 left:0
#rightDiv{ width:156 height:100%; background-color:#6633FF; position: top:0 right:0
&div id=&mainDiv&& &div id=&leftDiv&&&/div& &div id=&middleDiv&&&/div& &div id=&rightDiv&&&/div&
&提示：您可以先修改部分代码再运行　 　 看一下 代码1-5 的页面（IE6.0浏览器）， 展现在你面前的是一个标准的”左-中-右”布局结构。mainDiv 是 父Div，middleDiv 是 子Div 也是 主区域，middleDiv 利用了其 父Div 的 padding属性 来为两边的 leftDiv rightDiv 子Div 也是 辅区域 Div留出空白。mainDiv 相对 Body 宽度值是100%，middleDiv 相对&&mainDiv 宽度值是100%，这就使得 middleDiv 的宽度相对浏览器窗口尺寸是自动调整的，高度亦同。leftDiv rightDiv 分别利用 left:0 和 right:0 来相对定位居左或居右对齐。试着改变你浏览器的窗口尺寸，看看效果吧！
你可能会说：”这算什么？ float方式 也可以啊！CSS的代码还比这个简单呢！”
那让我们来修改一下代码吧！这样可以实现的”上-中-下”布局结构，并且相对浏览器窗口尺寸是自动调整。这是 float方式 不能实现的。
代码1-6&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body{ height:100%; overflow:
html&body{ /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #
#mainDiv { width: 100%; height: 100%; padding:60px 0px
#centerDiv{ width: 100%; height: 100%; background-color:#00CCFF;
#topDiv{ width:100%; height:56 background-color:#99FF33; position: top:0
#bottomDiv{ width:100%; height:56 background-color:#6633FF; position: bottom:0 bottom:-1 /*-- for IE6.0 --*/
&div id=&mainDiv&& &div id=&topDiv&&&/div& &div id=&centerDiv&&&/div& &div id=&bottomDiv&&&/div&
&提示：您可以先修改部分代码再运行　 　 这里要说明的是在 代码1-6 中的 bottom:-1 这是因为IE6.0浏览器对CSS解释错误而产生的手动修复，当 子Div 使用 bottom属性 并且其 父Div 的高度 真实值 为单数时， 子Div 的 Bottom属性 在浏览器表现出的 真实值 比 设置值 大1px。
不知道你看明白这些代码了没有，这些就是我所谓的 position方式 来实现的结构布局。你可能要说：”拽什么拽啊！你看看你的方式在Firefox中的样子吧！” 别急啊！之前不是说了么由于兼容性问题我们是采用了2种方式利用 盒模型 。现在让我们来说另外一种吧！
Firefox 为代表的 标准盒模型 这才是未来的王道。现在的 IE7.0\Opera\Safari 都可以非常好的遵循 标准盒模型 。标准盒模型 在解释 双盒嵌套 （&div&&div&&/div&&/div&） 中，子Div 宽度被设置为100% 时其真实宽度为 父Div 的设置宽度。父Div 真实宽度为设置宽度 + 父Div 内补丁宽度 + 父Div 边线宽度。也就是说 父Div 的盒被撑大了。并且在 标准盒模型 中通常 height属性 是无效的。那我们有什么办法能解决这样的问题呢？看下边这段代码。
代码1-7&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body{ height:100%; overflow:
html&body{ /*-- for !IE --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #808080;
#mainDiv { width: 100%; height: 100%; padding:20 background-color: # border: 10px solid #808080;
body&#mainDiv{ /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
&div id=&mainDiv&&
&提示：您可以先修改部分代码再运行　 　 看一下 代码1-7 的页面（Firefox浏览器），发现 mainDiv 并没有被 padding 和 border 撑大了。这正是利用了 body&#mainDiv 这一种CSS的Hack写法来解决了问题。具体的我就不多说了，想必大家一眼就能看明白（其实就相当于你告诉浏览器说：我要做一个盒子，盒子大小你看着办，但盒子的左边和右边都要距离墙0px远） 。但 padding属性 还是在很多时候影响了 position方式 ，所以我们尽量不在 标准盒模型 的布局中使用它。可回想一下在 非标准盒模型 中 padding属性 可是非常重要的一部分。那么为了兼容2种模型，我们使用另一种CSS的Hack写法，在CSS属性前边加”_”来使这一属性只有IE6.0才能识别并解释，而 标准盒模型 的浏览器都不能解释这一CSS属性。
未完待续……
[ 本帖最后由 wiseinfo 于
05:59 编辑 ]
昵称: wiseinfo &时间:
　 　 这段通过 position方式 构建出的代码可以完美的运行在 IE6.0\IE7.0\Firefox\Opera\Safari 浏览器中来实现布局结构。如果有天你想要对你的软件界面进行又改了那你也通过单纯修改CSS样式表的方式来
修改布局结构而不用变动丁点Html代码。
代码1-9&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body{ height:100%; overflow:
html&body{ /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #
#mainDiv { width: 100%; height: 100%; _padding-right:320
#middleDiv{ width: 100%; height: 100%; background-color:#00CCFF;
#mainDiv&#middleDiv{ width: position: left:0 right:320
#leftDiv{ width:156 height:100%; background-color:#99FF33; position: top:0 right:160
#rightDiv{ width:156 height:100%; background-color:#6633FF; position: top:0 right:0
&div id=&mainDiv&& &div id=&leftDiv&&&/div& &div id=&middleDiv&&&/div& &div id=&rightDiv&&&/div&
&提示：您可以先修改部分代码再运行　 　 通过对布局结构的组合你还可以通过 position方式 构建出更复杂的结构。
代码1-10&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body { height:100%; overflow:
html&body { /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #
#mainDiv { width: 100%; height: 100%; _padding-left:160
#rightDiv { width: 100%; height: 100%; _padding:100px 0
#mainDiv&#rightDiv { width: position: left:160 right:0
#leftDiv { width:156 height:100%; background-color:#99FF33; position: top:0 left:0
#centerDiv { width: 100%; height: 100%; background-color:#00CCFF;
#rightDiv&#centerDiv { height: position: top:100 bottom:100
#topDiv{ height:96 width:100%; background-color:#9933FF; position: top:0
#bottomDiv{ height:96 width:100%; background-color:#FF9900; position: bottom:0 _bottom:-1 /*-- for IE6.0 --*/
&div id=&mainDiv&& &div id=&leftDiv&&&/div& &div id=&rightDiv&& &div id=&topDiv&&&/div& &div id=&centerDiv&&&/div& &div id=&bottomDiv&&&/div& &/div&
&提示：您可以先修改部分代码再运行　引用:闲话：
其实笔者也就是我，不是一个专业的 构建师（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版本
----------------------------------------------------------------------------------------------------------------------- [ 为提供基于该方法继续优化的解决方案供大家参考，应楼主要求，由14px编辑添加以下内容 ] [ 编辑日期： ]
优化主要目的：解决IE6中采用quirks模式存在弊端的模式。 优化主要方法：利用IE6中&html&标签的盒模型bug添置top与bottom的空白区域。 优化后的演示：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &meta name=&author& content=&Chomo& /& &link rel=&start& href=&http://www.14px.com& title=&Home& /& &title&div仿框架布局 - iframe无法适应高度的bug也一起被修复了&/title& &style type=&text/css&& * { margin:0; padding:0; list-style:} html { height:100%; overflow: background:#} body { height:100%; overflow: background:#} div { background:#f60; line-height:1.6;} .top { position: left:10 top:10 right:10 height:50} .side { position: left:10 top:70 bottom:70 width:200 overflow:} .main { position: left:220 top:70 bottom:70 right:10 overflow:} .bottom { position: left:10 bottom:10 right:10 height:50} .main iframe { width:100%; height:100%;} /*---ie6---*/ html { *padding:70px 10} .top { *height:50 *margin-top:-60 *margin-bottom:10 *position: *top:0; *right:0; *bottom:0; *left:0;} .side { *height:100%; *float: *width:200 *position: *top:0; *right:0; *bottom:0; *left:0;} .main { *height:100%; *margin-left:210 _margin-left:207 *position: *top:0; *right:0; *bottom:0; *left:0;} .bottom { *height:50 *margin-top:10 *position: *top:0; *right:0; *bottom:0; *left:0;} &/style& &/head& &body& &div class=&top&&看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。&/div& &div class=&side&& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /& &/div& &div class=&main&& &iframe frameborder=&0& src=&http://www.g.cn/&&&/iframe& &/div& &div class=&bottom&&&/div& &/body&
&提示：您可以先修改部分代码再运行详细分析帖子：http://bbs.blueidea.com/thread--1.html -----------------------------------------------------------------------------------------------------------------------
[ 本帖最后由 14px 于
19:51 编辑 ]
昵称: wiseinfo &时间:
昵称: wyjysblue &时间:
昵称: ruinsky &时间:
昵称: sunshijiu &时间:
昵称: phantom &时间:
昵称: guantuming &时间:
你要说的是什么呢？难道说会撑大？变通一下吧兄弟！看看这个代码&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body { height:100%; overflow:
html&body { /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #
#mainDiv { width: 100%; height: 100%; _padding-left:160
#rightDiv { width: 100%; height: 100%; _padding:100px 0
#mainDiv&#rightDiv { width: position: left:160 right:0
#leftDiv { width:156 height:100%; background-color:#99FF33; position: top:0 left:0
#centerDiv { width: 100%; height: 100%; background-color:#00CCFF; overflow:
#rightDiv&#centerDiv { height: position: top:100 bottom:100
#topDiv{ height:96 width:100%; background-color:#9933FF; position: top:0
#bottomDiv{ height:96 width:100%; background-color:#FF9900; position: bottom:0 _bottom:-1 /*-- for IE6.0 --*/
&div id=&mainDiv&& &div id=&leftDiv&&&/div& &div id=&rightDiv&& &div id=&topDiv&&&/div& &div id=&centerDiv&&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&换行&br /&&/div& &div id=&bottomDiv&&&/div& &/div&
&提示：您可以先修改部分代码再运行我上边说了，centerDiv 是作为主区域出现的。可以被自动缩放，于此同时他也应该是那个我所说的加滚动条的区域。想想Dreamweaver的代码区不是也用的滚动条吗？看看我在第一段闲话中说的后半部分。
昵称: wiseinfo &时间:
昵称: sunshijiu &时间:
昵称: wiseinfo &时间:
昵称: wisky &时间:
大家讨论时请注意楼主这句话，呵呵～
我来反比一下：在构建网页，而不是B/S结构界面时一般还是使用 float 作为布局方法。
昵称: fkueaps &时间:
昵称: phantom &时间:
昵称: fkueaps &时间:
首先我所举 position方式 的实例是在解决我闲话中所描述的问题。我的目的就是要不出现整体滚动条。
position方式 不能解决所有布局问题，你所描述的问题也许用 float方式 更合适，因为 float方式 在布局时不需要考虑页面高度问题。
如果用一个现实模型来描述 float方式 和 position方式。
可以把 float方式 比作用砖砌墙，砖与砖的位置不会叠加是实体的。所以可以很容易的盖起一面墙，但却很难改变墙的大小。
可以把 position方式 比作画油画，染料可以被层层叠加是虚体的。所以可以很容易随画布改变而改变大小，但却很难堆砌出一面墙。
如果你非要 position方式 来做这个的话，我正在尝试另外一种 position方式 写法也许能实现这个，但现在还没有结果。
另：把你贴之中引用我帖子的那部分修改一下，无用的信息占用了很大的面积。后边的人不好阅读啊！兄弟！
昵称: wiseinfo &时间:
昵称: phantom &时间:
昵称: DellGrass &时间:
昵称: linfojin &时间:
昵称: 84yemoo &时间:
昵称: hyq1860 &时间:
昵称: Nickyu &时间:
昵称: amilim &时间:
不可取在什么地方呢？我认为最大的问题在于很多被定义好的CSS常量被抹掉了，需要自己从新定义。
而这个问题同时也是个优势，因为不同浏览器这类常量有时候是不同的，会影响到兼容性。并且这被定义好的CSS常量也许并不适合我。
另外这段代码并不影响 position方式 的本身，完全可以将其去掉。这么写完全是我自己的一种习惯。 　 　引用:原帖由 amilim 于
14:34 发表
个人不喜欢B/S模式·或者是 单页内N个滚动条烦躁死人 个人原因 个人原因
个人认为 position:aboulute 和 overflow:hidden 是一种欺骗浏览器的方式 不太喜欢 坚挺float下布局 大不了加些JS 呵呵！你说了很多不喜欢，如果单纯是个人原因没有任何理由的话完全没必要在这里说。你所说的欺骗浏览器是什么意思？按照你的说法那么当初CSS就不应该有这2个属性了。
如果你要反驳别人，最起码的尊重是弄清楚别人说了什么。不理解你说的将 B/S模式 和 单页内N个滚动条 说到一起去是为了什么？我也在文章中提到了尽量避免 单页内N个滚动条 这种情况出现。
我从没有说过要替代 float方式。2种方式都是要视情况选择，如果情况需要甚至需要2种办法共同使用。
我不抵触反对的声音，因为对于一种新方法、新模式、新思想而言，反对的声音比赞同的声音更有意义。但作为讨论和研究的基础，如果你提出反对的声音就要给出理由，不然的话有何意义吗？
昵称: wiseinfo &时间:
昵称: volcanono &时间:
昵称: ShakeSpace2 &时间:
昵称: wiseinfo &时间:
昵称: hansir &时间:
昵称: coolfeng &时间:
说实话我真的没有像 老子 一样的能力把一些高深的道理用一句话概括（当然我说的也并不是什么高深的道理）。
我写这个东西花了我三个晚上，每个晚上至少2个小时。你可能要说这太慢了。但那是因为我是逐字逐句的书写、检查、修改。
因为我的写作能力确实很差（这个不能怪我，要怪也要怪万恶的教育），我担心写出来的东西不能被理解。
我起码反复看了近20遍这些内容，并且用 下划线 文字颜色 来区分内容帮助阅读。最后怕由于论坛行排版与间距的问题不方便阅读，我又制作了PDF文档。
重申一遍，我真的没有能力用一句话来概括出来让你明白。如果有人可以请告诉我，我也省了好多时间……
昵称: wiseinfo &时间:
昵称: welcome58 &时间:
昵称: cbc009 &时间:
IE6可读，IE7与FF不可读，也就是针对IE6设置的hack吧。。。
昵称: ShakeSpace2 &时间:
１．采用框架结构，还是采用楼主说的position方式来布局，各有什么优缺点呢？
frame布局（框架结构） 是早被用来做为 B/S结构 软件界面布局方式之一，并且现在还有很多人在延续这种做法。这是有其原因的，因为在 B/S结构 软件界面中页面与页面之间有很大一部分是公用的，如果用普通页面的构建方式会使得页面代码重复、结构繁琐、逻辑复杂等问题不利于软件的开发，并且这样会使得在使用过程中传输了大量的无用部分代码而降低了响应速度，frame布局 的使用也正是为了解决这些问题。但 frame布局 终究不是完美的解决办法，反而它带来的问题远超过了所带来的优势，例如：框架间的数据交换、代码分散逻辑难以阅读、布局结构无法改变 等等等等（我临时想的一些可能还不具有代表性，但 frame布局 存在的问题早已被广泛认同）。
究其问题本身来研究，我们会发现 frame布局 的布局能力是很低的，没有能力来实现复杂的 B/S结构 软件界面布局，那我们之所以还使用它不是为了它能实现布局，而是在于它实现 区域重用（这些的本质是代码重用）和 区域刷新（这些的本质是功能切换和数据刷新）。后来大家发挥其长处规避其短处，用 页面布局方式（例如：Table布局 、Div布局） + iframe 来解决问题。这时候 iframe 的作用已经不是布局，而是实现 区域刷新 。这种方法相对于 frame布局 已经进步很多，但这也不是完美的解决办法，frame布局 的问题仍然遗留在其中（例如：框架间的数据交换 等）。
再后来有一些人干脆放弃了 frame，他们发现了 SSI方式（Server Side Includes），它在页面代码编辑时实现了 代码重用，使得页面代码编缉时看起和 iframe方式 没什么2样，但却有着 frame 不具有的一些优点。但这也不是完美的解决办法，SSI方式 的问题在于，因为网络传输的是经过服务器加工过的页面代码，这里已经没有了 代码重用 更提不上 区域重用，这使得绝大部分的操作都在刷新整个页面。虽然后来有些人沿着这个思路改进了一些，有了 CSI方式（Client Script Includes），但也没有解决根本性的一些问题。
最终 AJAX 的时代到来了，我们明白了困扰我们多年的问题，我们需要的是 代码重用 和 数据交换，那么就应该将它们分离开来，将 样式代码、显示逻辑、数据 分离开来来解决问题。这已经不是如何布局的问题了，而是另外一个层面的东西。之前我们说用 Div布局 替换 Table布局 是实现了 样式代码 和 页面代码 的分离，而在 页面代码 中 还包含了 显示逻辑、数据 2部分，AJAX 巧妙的利用 JavaScript 与 XML 将这2部分也进行了分离。在我看来这对于 B/S结构 软件界面来说已经近乎于完美的解决方案了。
说了这么多，其实都跑题了。你问的 框架结构 在布局上来说与 Table布局 、Div布局 算是同一层面，在 代码重用 和 数据交换 上来说与&&iframe方式 SSI方式 AJAX 算是同一层面。而 position方式 是 Div布局 的一种方法，所以不能拿着两个来比较。之所以说了这么多是因为你提到的 框架结构 是属于 B/S结构 软件界面 代码重用 与 数据交换 的部分，对于这部分也想和大家共同讨论一下就胡咧咧了一些。由于事先的功课做的不好可能说的不是很清楚也有很多错误的地方那个请大家原谅。
昵称: wiseinfo &时间:
昵称: cbc009 &时间:
昵称: qiestef &时间:
２．楼主文中提到“尽量避免 单页内N个滚动条”，我们应该如何避免呢？
通常在界面设计的过程中就应估计到这样问题的存在，改善设计尽量避免。至于如何避免就是个经验问题了，比如分析数据的必要显示等。
如果避免不了那么可以使用 定义不同样式的系统滚动条 或干脆 自己设计一个非系统的滚动条 。 　 　 ３．相信楼主也遇到过，很从界面在窗口最大化或者大于一定宽度时，界面是比较正常的，但如果窗口过小，界面中的元素就会出现错位、换行等问题，我想知道楼主认为在窗口过小的情况下，界面应该如何响应呢。
当然遇到，这是一定要在考虑之中的。使用 min-width&&min-height 这两个 CSS 属性来帮助 非IE6.0 浏览器设置最小宽度和高度。而对于 IE6.0 通常让我很头疼，用JavaScript吧！我没找到别的办法。
昵称: wiseinfo &时间:
昵称: welcome58 &时间:
昵称: mycggo &时间:
昵称: zhutianyi &时间:
Frame是最不安全的。只是大家常用而已。任何旧技术相对来说都要比新技术安全，因为毕竟被使用那么长时间了，有人多人遇到了问题也找到了补救的办法，所以说它安全。任何的新技术相对来说都要比旧技术有风险，毕竟是新方向，验证是需要过程的。引用:原帖由 zhutianyi 于
11:26 发表
试图用float做个类似的界面来反驳楼主，结果失败~ 技艺不精啊 呵呵，不必要反驳，也不是你技艺不精，根本就是2个东西，我之前说了如果做比喻就是 砖砌墙 和 画油画 之间的关系！你要用 砖砌墙 来反驳 画油画 吗？反正我是不会再考虑把 油画染料堆成一面墙 这样的做法了。各取其用。
昵称: wiseinfo &时间:
昵称: yanan &时间:
昵称: sunjia &时间:
昵称: andytlu &时间:
这是《毛主席语录》中被传播的最广的一句话。你太抬举 三多子 了！
昵称: wiseinfo &时间:
昵称: beenylee &时间:
什么是前台？什么是后台？单纯对于网站而言的，前台既是网站本身，后台既是网站的CMS。如果是对于OA系统呢？那么前台可能是OA系统本身，后台可能是管理OA系统的控制台。那么前台、后台都是可以用 position方式 的。所以用前台、后台来区分是否适合使用是不准确。如果真的要按照点什么来区分是否适合使用，那我更愿意分成：倾向于信息展示；倾向于控制管理；这2种。其中 倾向于控制管理 的更适合使用。但这也是一种不太准确的定义。最好的办法还是学会理解然后灵活的运用。
[ 本帖最后由 wiseinfo 于
11:29 编辑 ]
昵称: wiseinfo &时间:
是我说的太笼统了..确实是类似C/S的网页,这种布局不错.不晓得能不能理解我的意思..
昵称: beenylee &时间:
昵称: ailoveruyi &时间:
昵称: joeke &时间:
您抬举了！说的我都飘飘然了……&&不过写的东西有人愿意看也算是我莫大的荣幸啊！
其实这篇文章应该写在2年前，那时我在为一个项目做界面Demo时开始研究并使用了这种方法。而如今写出来已经和之前的想法有不同了。
我对 Html+CSS 的专研远不及这里太多人了，我只想做点我能做的来引起大家的思考。（其实这一段我写了很多话，但都被我删掉了，还是不要批评我们脆弱的教育体系了）
joeke兄言过了，我可没那么NB。我其实很简单，我的单位更简单，我自己刚刚注册半年小公司，我的用户名正是公司的名字，正筹划做一套办公协同系统，憧憬有天……&&呵呵！不说了……
我原来在 BlueIdea 也有很早期注册的帐号，还发过几篇蛮受欢迎的 Flash AS 方面的文章 ，但密码忘了，也就不找了。
我的代码没有缩写是因为我希望大家更容易读懂。正想着接下来写的文章就是相关这部分呢！说一下 “代码书写的抉择：易读or简写” 方面！
PS. 已经加你MSN了.
突然有兴趣想把公司的LOGO传上来。呵呵！不许说我抄袭IBM！大言不惭的说一句：“记住这个LOGO，有天你可以和同伴炫耀自己是最早见证这LOGO的人哦！”
[ 本帖最后由 wiseinfo 于
06:35 编辑 ]
昵称: wiseinfo &时间:
昵称: joeke &时间:
这个实例中你有个错误的地方是：Jo_Header 、Jo_Nav 、Jo_Main 在同一级。Jo_Header 是顶端的DIV，Jo_Nav 是左边的DIV，Jo_Nav 是右边的DIV，而 position方式 一般不建议在同一级别同时进行 横向 、纵向 的区分，就是因为这样做在IE6.0下会遇到这样的问题。
position方式 在同一级别中要么是 上-中-下 的布局结构，要么是 左-中-右 的布局结构。修改一下代码给你。&?xml version=&1.0& encoding=&UTF-8&?&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&WiseInfo&/title&
&style type=&text/css&&
* { margin:0 padding:0
html, body { height:100%; overflow:
html&body { /*-- for !IE6.0 --*/ width: height: position: top: 0 left: 0 right: 0 bottom: 0
body { border:8px solid # background-color: #
#mainDiv { width: 100%; height: 100%; _padding-top:100
#headDiv { height:96 width:100%; background-color:#808080; overflow: position: top:0
#bodyDiv { width: 100%; height: 100%; _padding-left:160 position:
#mainDiv&#bodyDiv { height: top:100 bottom:0
#leftDiv { width:156 height:100%; background-color:#99FF33; overflow: position: left:0
#rightDiv { width: 100%; height: 100%; _padding:100px 0 position:
#bodyDiv&#rightDiv { width: left:160 right:0
#centerDiv { width: 100%; height: 100%; background-color:#00CCFF; overflow:
#rightDiv&#centerDiv { height: position: top:100 bottom:100
#topDiv { height:96 width:100%; background-color:#9933FF; overflow: position: top:0
#bottomDiv { height:96 width:100%; background-color:#FF9900; overflow: position: bottom:0 _bottom:-1 /*-- for IE6.0 --*/
&div id=&mainDiv&& &div id=&headDiv&&页头区&/div& &div id=&bodyDiv&& &div id=&leftDiv&&主导航区&/div& &div id=&rightDiv&& &div id=&topDiv&&标题区&/div& &div id=&centerDiv&&内容区（自由伸缩） &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &p&测试数据&/p& &/div& &div id=&bottomDiv&&状态区&/div& &/div& &/div&
&提示：您可以先修改部分代码再运行这里边要强调注意的是 3层或3层以上Div嵌套 使用 position方式 时，父Div 的 position属性应为 absolute 。
还有另外我想说的，你这样在每一个Div中都加入了scrollbar的方式，是我不建议的，原因我之前说了。我也有过像你一样的时期，想要用代码解决一切问题，一切可能出现的问题。但不要为了解决一些极端问题而影响了正常用户的使用。
举个例子来说：
使用 640 x 480 这样的屏幕分辨率的用户比率低于2%，并且如果考虑这类用户会影响到其他用户的使用感受的话，那么应为这些用户另外开发界面。
如果这个比率低于0.1%，那么可以不再考虑这些用户的部分需求。当然这个只是我个人的标准，而不是什么 官方建议 。
其实具体按什么样的比率或标准是应根据项目资金决定的，如果你有足够的钱当然应该满足更多的用户。
[ 本帖最后由 wiseinfo 于
12:02 编辑 ]
昵称: wiseinfo &时间:
[ 本帖最后由 joeke 于
21:25 编辑 ]
昵称: joeke &时间:
[ 本帖最后由 joeke 于
00:23 编辑 ]
昵称: joeke &时间:
不过准确的说你已经是在用JS来实现Resize效果了，而不是CSS。不过无所谓了，我极尽所能表述的只是一种方法，而在这方法背后想让大家理解一种思想。也算是抛了我这块砖引出Joeke这块玉了。
PS: 不过，Joeke兄，如果你写代码是给别人来学习的话，你的代码的可读性可不是很好啊！当然我知道平时可能大家都有自己写代码的习惯并且也为了文件大小和执行效率来简写，可是别人想要研究你的代码可是要细细的读了！
我在写这篇文章的时候，最希望看到的是大家都来研究。不是单纯的研究我所谓的 position方式 。而是研究一些非主流或者自己创造出来的方法。不论这新方法的好坏，各自提出意见，如果方法好我们学习它，如果方法有缺陷我们优化它，如果方法不可行我们论证它。我不知道你们是否发现了这样的问题：“有一天一个新手使用了一个非常规的做法，很多人没有真正的思考后就一棒子打死，告诉他有某某方法比你这个方法要好的多。” 是很多问题确实已经有了很好的解决办法，但我们不应该去扼杀新生的解决办法。当然作为一种新生的方法相对旧有的方法来说肯定是有缺陷的，因为旧有的方法已经经过了无数高手的优化使代码进化了。我不知道你们是否有这样的感觉：“我们的民族精神中更注重的是学习而不是创新，从千年以来的儒家思想中我们得到的就是崇拜经典。我女朋友分别在中国和美国读过西方艺术史和艺术鉴赏。在中国上课的时候书中怎么写的或者老师怎么教的你考试的时候就应该这样写，不然没有分，而在美国如果你完全按照书上写的或老师教的来写就没有分。我们的学生得到是学习后的知识，而他们的学生得到的是学习后的创新！” 我认为这正是很大程度上为什么我们现在使用的一些方法几乎都来源于外国。不单单是我们在学习的Web标准化，看看你的周围有多少的领域都是这样。我不否认在工作时使用一些最优秀的方法，但如果在工作之余还只在单纯的学习经典方法，而不去思考一些属于自己的东西的话真的就失败了。就拿 float方式 为例，Div布局 发明之处就是使用 float方式 。经过这么长时间无数的人为在使用它的过程中出现的问题给出解决办法，它已经很完善了。但真的完善到我们不需要研究其他方式了吗？我看到很多人在使用 float方式 时为实现某种 float方式 根本不可能实现的布局方式而苦恼，后来得出的结论是自己错了，为啥要用自己的布局而不找一个更适合 float方式 的布局。 唉！难道我们在经典面前就那么的卑微？如果有时间，我建议大家去读读一本叫做《量子物理史话》的书，可能对物理不太感冒的人不太能理解里边到底说了什么。可是这本书里体现了一种精神，无数的我们所知道的现在的物理学经典都建立在打破了原有经典的基础之上的创新，而能做到这一点的人正是那些学习了经典而不盲从经典研究经典中的问题与不足从而得出自己创新理论的人。我又跑题了，说着这么多我不知道是否有人愿意看。可能有人觉得我是愤青了，那就愤一点点吧！
[ 本帖最后由 wiseinfo 于
04:17 编辑 ]
昵称: wiseinfo &时间:
昵称: joeke &时间:
昵称: alimanman &时间:
昵称: wind3232008 &时间:
昵称: sg803 &时间:
昵称: jaoooo &时间:
昵称: got &时间:
看不懂19楼说啥了？你是说这句话有道理吗？引用:原帖由 84yemoo 于
11:33 发表
好文章！做个记号，有空好好研究下！ ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----引用:原帖由 got 于
13:36 发表
用js可能直观点~~ 一般情况下我做东西的时候能用CSS解决的绝不用JS解决，因为B/S界面如果动态效果多一些或者干脆使用的是AJAX时JS已经够多了，要考虑到效率问题。用CSS解决基本上对效率的影响是非常小的。
[ 本帖最后由 wiseinfo 于
18:35 编辑 ]
昵称: wiseinfo &时间:
昵称: wyjysblue &时间:
昵称: Anna191010 &时间:
我想问一下用了绝对定位之后，是不是就不能用浮动了，不然，全个页面全乱了。
昵称: Anna191010 &时间:
IE7用的是标准盒模型。代码1-6在说的是IE6的非标注盒模型。代码1-7开始才是兼容标准盒模型来进行布局的。我文章中有说明，可能不够清楚吧！引用:原帖由 Anna191010 于
14:37 发表
我想问一下用了绝对定位之后，是不是就不能用浮动了，不然，全个页面全乱了。 绝对不是这样，可以混合使用的，完全是看情况。有时候 position方式 做不到的 float方式来 补充，用的好的话会觉得非常顺手！
[ 本帖最后由 wiseinfo 于
20:02 编辑 ]
昵称: wiseinfo &时间:
昵称: hmj410 &时间:
我真对不起您，我水平有限，我真不应该在您眼前现眼。我这个人很简单，并且也喜欢简单；追求简单，这是我头脑简单化的症状表现。
P.S. 我不是“斑竹”，您抬举我了，一般情况下我猜他们叫我“楼主”，我也不知道为什么。
[ 本帖最后由 wiseinfo 于
22:47 编辑 ]
昵称: wiseinfo &时间:
昵称: chenn &时间:
昵称: faver &时间:
昵称: heavenbs &时间:
昵称: mytharcher &时间:
昵称: windwing &时间:
昵称: feayi &时间:
昵称: agonymoo &时间:
其实你只是没找到窍门。就好像是一层窗户纸，捅破了很容易就看清楚了。你同事说的对，学习HTML&CSS代码是必须的，但这并不是成为一个优秀的Builder的关键。HTML&CSS只是工具，如何用你的思想来更好的使用这些工具才是关键。这个放在下边再说，先说一说如何学习代码。
很多人有个误区，在一开始就要记住所有的 HTML标签 、HTML标签属性 、CSS属性…… 其实并不是这样，这些 标签 、属性 、属性值 什么的有很多很多，并且绝大部分不是很常用。所以你不要去死记硬背这些，手头准备一本工具书（如《HTML & XHTML权威指南》《CSS权威指南 》）像查字典一样来使用它们。我学习这些有8-9年了，到现在我背不下来这些的全部，可我的页面Building比我周围的同事做的都要好。
学习HTML&CSS代码的方法其实是分成2部分：语法 、关键字 。所谓 关键字 其实就是刚刚说过的&&标签 、属性 、属性值 什么的，记住常用的，其余的查字典。所谓 语法 便是这些代码的书写规则了，这个很重要，一定要搞清楚并且理解，这个也不要死记硬背，用一些形象化的 心理模型 。（如：整个网页的HTML代码像是层层嵌套的箱子，这些箱子有并列关系 、有包含关系。那些属性不论是HTML标签属性还是CSS属性都是在形容和描述这些箱子的特性如：大小、薄厚、颜色 等） HTML代码的关键点是它的结构。CSS的关键点是它的选择符。
开始应该试着看一些别人写的代码，尝试能读懂代码。当然这时尽量去看一些常规代码。有很多商业代码是经过了优化处理的，就比较难以理解。然后试着自己开始写些简单的代码，然后由简入繁。我刚刚说过不需要死记硬背，这就造成了你一些 关键字 可能写不出来，不要担心，只要你认识你需要的代码，用 DW 这类软件的代码提示功能就可以找到（现在大家都很幸福了，我最早学的时候只有写字板能用）。
更多的学习代码的我就不说了，还是你自己找一些属于你自己的窍门吧！来说说我说所谓的思想。
不要再使用可视化编辑这样的功能。对于专业的Builder来说现在所谓的可视化编辑实在是垃圾。当然有个别时候还是比较有用的（如给图片画热点这类）。很多没有尝试过 非可视化编辑 即 代码编辑 的人可能会不理解它，可能会说这不像是写程序多数在考虑的是逻辑代码。网页本身是可视化的，用 非可视化编辑 要怎么做？
用你的形象思维呀！其实人类的形象思维是很强大的。很多人说中学时学几何一点都没有用，一般人工作时也用不到。错了，学习几何是在锻炼和加强你的形象思维能力。学画画一段时间的人可能会感觉到，限制你的是你手对画笔的控制能力，因为在画每一笔前你的脑中可能已经有了这一笔落下的形态（当然画熟了以后，就不是这样了，那时限制你的是你的创造力）。Building也是同样的道理，你可以试着在你的脑子中形成一个网页，然后试着将脑中的网页拆成代码写出来，然后看看在浏览器中的效果比较你原来在脑中想的效果，修正你原来的想法。这样锻炼时间久了，你就可以在你的脑子中安装一个 DW 一样的 可视化编辑 软件了！
古代学习武术的人时师傅会让徒弟看着墙壁上的招式来冥想，而通过这样的方法来强化徒弟对动作的熟练程度而提高武术的造诣。这不动而修炼的方法也是现代科学也证实了的，现在体操运动员常通过看比赛录像来冥想，借以改善动作中的错误。这些说远了，呵呵！这些是神经学方面的东西了，其实和我说的关系不大。呵呵！
我想说的是用自己的形象思维是绝对可以快速的帮助你锻炼你在Building过程中的代码编写能力的。
不瞎掰了，写了这么多，希望你能看看，我也算没白费劲。
[ 本帖最后由 wiseinfo 于
01:05 编辑 ]
昵称: wiseinfo &时间:
引用:原帖由 windwing 于
02:55 发表
认真学习，感谢楼主! 界面简洁直观是B/S的首要 引用:原帖由 agonymoo 于
22:47 发表
好文章。可取之处很多！ 感谢你们的留言让我重拾信心，一度那些留言让我觉得写这个对大家没有用呢。
昵称: wiseinfo &时间:
你的很多地方都理解错了，我不明白你为什么要在 mainDiv 里边用 padding:12 这个属性。我说了在使用 position方式 时尽量不要乱用 padding 。如果你想要一个边框完全可以用 border:solid 12 。
你还是再从新看一下我写的代码的结构吧！我可以按照你的布局给出你一个新的代码，可我担心还是没有用。你在CSS样式中完全写乱了，其实你写乱很大的原因我上边也说了，你试着去掉这个自己再改一下。如果再不行的话。我从新详细的给你说一遍。
昵称: wiseinfo &时间:
wiseinfo明白你说的意思了，因为不想嵌套太多，所以没有多启用个层并使用border:12px solid white；的属性，而在mainDiv里面用padding:12本来应该是_padding:12的，解释给IE6的，想直接在mainDiv里空出12px的内边距出来。现在还是多嵌套了一个层，并设置border:12px，搞定了问题了。
我把现在正在做的项目首页效果图发你看看，里面嵌套了N层，我都快昏掉。
(117.67 KB)
昵称: feayi &时间:
昵称: pamde &时间:
嵌套太多是由于你界面设计没有考虑到这方面的原因，如果页面要100%符合原界面设计的话，你还是不应该使用padding的，因为那个白色边框还是有自己的边线的。
我个人给出一些对这个界面设计的意见供你参考：
1、不知道你的界面要求兼容的分辨率是多少，照着一般情况来说应该是以上。那么就有个问题，你的界面的当前功能 有效区域 会很小。看图片中留下的信息像是一个股票信息浏览等功能的软件界面，而这类软件正是对信息展现量要求非常高，也就是需要页面的 有效区域 相对来说较大。B/S软件设计时是需要考虑减去浏览器所占用的屏幕面积的。当然有些人使用隐藏浏览器工具栏这种发法（我一度非常推荐这种方法），但这样其实会很大影响了用户的使用习惯（因为这样就没有了后退工具，这就好像是PhotoShop没有撤销功能），所以在这样做的时候还是要仔细斟酌。下图给出在分辨率情况下包含浏览器工具栏情况下的软件界面 有效区域 。宽度我们去掉浏览器的边框等8px结果约为1016，高度我们去掉系统任务栏高度+浏览器边框+浏览器工具栏高度等128px结果约为640px（其实很多时候比这个还要小）。
(135.52 KB)
这样算下来，你的当前功能 有效区域 仅为 548x498。这对于 股票信息浏览 来说真的小的可怜了。按照我标记的红色点来分别说吧！
1 为主导航，但发现 2 和 1 的内容是一样的。如果 2 是主导航的话应该去掉的，没必要显示2个主导航。如果 2 是次导航的话未免占用了太多的空间，一下子占去了越15.4%的界面宽度。而 3 的位置是空的，如果次导航不是那么重要的话建议可以安排在 3 的位置
4 这个给你带来困扰的嵌套边框在横向和纵向分别占用了约30px的界面宽度和高度。
5 这个位置的图标的含义是什么？估计新用户是很难理解的！
6 这一条客服信息和版权信息占用掉了约40px的高度，而这些也许并不是用户关心的（这不是网站，很少有C/S软件把版权写在界面上，而是在软件菜单的&帮助&项中&关于****&项来详细描述）。而 7 的位置是空白的，如果这些信息真的很重要需要一直显示建议放到这里。
[ 本帖最后由 wiseinfo 于
00:08 编辑 ]
昵称: wiseinfo &时间:
昵称: mosesdesign &时间:
昵称: lajixu &时间:
昵称: jiahualong &时间:
确实没有原来的漂亮了！呵呵！但简洁绝对不等于丑陋！如果追求完美的话可再尝试美化一下吧！一般应该先做IB再做设计，这样布局有了设计时就不要考虑那么多也许会更有效果。
左侧占用的空间还是很大！右边现在还是不到50%的面积！要知道这一部分才是被浏览被使用的啊！
左边第一列的如果是二级导航那么觉得可以放在我给的图片中3的位置横向排列。如果不可以那么你可以自己再想想办法。
那个左向缩进的三角按钮其实意义不是太大。第一是很难被注意到和点选；第二是大部分人不使用这样的功能；
我在原来做过的项目中做过监测，这个的使用率不到10%。我们自己开发的系统我们知道可以这样用，但用户大多不买账。
你可以注意一下知名公司的软件中很少见这种交互方式。绝大多数的侧边栏都是通过工具栏的按钮来开启&关闭的。
左边第二列的每一行3列选项，如果改成2列选项，那么这一列就可以窄一些。引用:原帖由 jiahualong 于
16:36 发表
那个.楼主问一下. 在左边菜单 &港股&右边那个 &小三角& && & 点了之后就会把左边这个给隐藏掉吧? 那,那个小三角要怎么样去处理呢?
比如说.他的层的位置.还有点击后,把左边层隐藏起来的js要怎样写呢? ... 54楼给出答案了已经。但布局也基本是用JS实现的了。
但其实这种方式我个人不是很推荐，上边已经说原因了。
昵称: wiseinfo &时间:
昵称: jiahualong &时间:
昵称: nine71104 &时间:
昵称: llinzzi &时间:
是啊！其实这些都是工具，适合用什么就应该用什么。我们的教育将我们捆绑起来了，我们的思想太教条了。就好像Div布局兴起的时候大家都开始一味的使用Div布局，而一些本应该用表格的地方也不使用表格了。
什么时候教育可以&&教会我们变通让我们灵活的运用所掌握的知识、教会我们创新让我们可以创造属于自己的方法 ，中国才更有希望。引用:原帖由 llinzzi 于
15:21 发表
position用的成败在于参照物了。。如果都是以top&left来定位，可能就垃圾了。 楼主这个帖子整理下可以写书了，写的很详细。 其实里面很多精彩的效果和那个楼主所谓的基础代码关联很大。 总体上感觉不错，楼主 ... IE6.0应该在半年左右推出历史舞台的，position方式 在 IE7.0&&FireFox&&Opera&&Safari 效率都可以接受。
写书不敢说，第一，没有那么多时间啊！第二，写作能力实在太差啊！第三，发现自己想写的内容大部分在市面见到书中都已经有了，不想写重复的东西。
所以再继续学习研究吧！呵呵！有点装大了
昵称: wiseinfo &时间:
昵称: iddison &时间:}