_padding-left前面加_是啥意思？谢谢

引用:

原帖由 cbc009 于 2007-12-25 13:16 发表
_padding-left前面加_是啥意思？谢谢

IE6可读，IE7与FF不可读，也就是针对IE6设置的hack吧。。。

引用:

原帖由 welcome58 于 2007-12-25 08:28 发表
赞一个，楼主这种精神是值得学习的，希望这贴可以引起更多的Ｂ／Ｓ结构讨论
看完楼主所写的内容，想想我也曾遇到过一些相似的，我的软件也可以说是Ｂ／Ｓ结构的，属于×××管理系统，为了系统更像Ｃ／Ｓ的结构 ...

１．采用框架结构，还是采用楼主说的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结构 软件界面 代码重用 与 数据交换 的部分，对于这部分也想和大家共同讨论一下就胡咧咧了一些。由于事先的功课做的不好可能说的不是很清楚也有很多错误的地方那个请大家原谅。

引用:

原帖由 ShakeSpace2 于 2007-12-25 17:25 发表

IE6可读，IE7与FF不可读，也就是针对IE6设置的hack吧。。。

谢谢

很好的一片文章

引用:

原帖由 welcome58 于 2007-12-25 08:28 发表
赞一个，楼主这种精神是值得学习的，希望这贴可以引起更多的Ｂ／Ｓ结构讨论
看完楼主所写的内容，想想我也曾遇到过一些相似的，我的软件也可以说是Ｂ／Ｓ结构的，属于×××管理系统，为了系统更像Ｃ／Ｓ的结构 ...

２．楼主文中提到“尽量避免 单页内N个滚动条”，我们应该如何避免呢？

通常在界面设计的过程中就应估计到这样问题的存在，改善设计尽量避免。至于如何避免就是个经验问题了，比如分析数据的必要显示等。

如果避免不了那么可以使用 定义不同样式的系统滚动条 或干脆 自己设计一个非系统的滚动条 。
　
　
３．相信楼主也遇到过，很从界面在窗口最大化或者大于一定宽度时，界面是比较正常的，但如果窗口过小，界面中的元素就会出现错位、换行等问题，我想知道楼主认为在窗口过小的情况下，界面应该如何响应呢。

当然遇到，这是一定要在考虑之中的。使用 min-width  min-height 这两个 CSS 属性来帮助 非IE6.0 浏览器设置最小宽度和高度。而对于 IE6.0 通常让我很头疼，用JavaScript吧！我没找到别的办法。

谢谢楼主认真的回答！
看完楼主的回答很受益，也让我感觉到工作内还是需要多思考，经验也是相当重要的。

目前来说，我还是用FRAME，可能更安全保险吧。

试图用float做个类似的界面来反驳楼主，结果失败~ 技艺不精啊

引用:

原帖由 mycggo 于 2007-12-26 11:24 发表
目前来说，我还是用FRAME，可能更安全保险吧。

Frame是最不安全的。只是大家常用而已。任何旧技术相对来说都要比新技术安全，因为毕竟被使用那么长时间了，有人多人遇到了问题也找到了补救的办法，所以说它安全。任何的新技术相对来说都要比旧技术有风险，毕竟是新方向，验证是需要过程的。

引用:

原帖由 zhutianyi 于 2007-12-26 11:26 发表
试图用float做个类似的界面来反驳楼主，结果失败~ 技艺不精啊

呵呵，不必要反驳，也不是你技艺不精，根本就是2个东西，我之前说了如果做比喻就是 砖砌墙 和 画油画 之间的关系！你要用 砖砌墙 来反驳 画油画 吗？反正我是不会再考虑把 油画染料堆成一面墙 这样的做法了。各取其用。

好文章，很受益！
常做B/S系统，有类似困扰，最近就在搞这方面，今天感觉突然开阔好多，谢谢！

楼主 好样的~！ 对POSITION 有新的认识！

我们都是来自五湖四海，为了一个共同的革命目标，走到一起来了 。

许三多说的啊

引用:

原帖由 andytlu 于 2007-12-27 23:28 发表
我们都是来自五湖四海，为了一个共同的革命目标，走到一起来了 。

许三多说的啊

这是《毛主席语录》中被传播的最广的一句话。你太抬举 三多子 了！

标题很吸引我.我是一个程序设计人员,而不是前台美工人员,一向的布局风格也是简洁实用就好.

简单的一句话概括:楼主的布局模式是为后台设计人员准备的.搞前台页面美工人员可以参考,不推荐.

引用:

原帖由 beenylee 于 2007-12-28 20:51 发表
标题很吸引我.我是一个程序设计人员,而不是前台美工人员,一向的布局风格也是简洁实用就好.

简单的一句话概括:楼主的布局模式是为后台设计人员准备的.搞前台页面美工人员可以参考,不推荐.

什么是前台？什么是后台？单纯对于网站而言的，前台既是网站本身，后台既是网站的CMS。如果是对于OA系统呢？那么前台可能是OA系统本身，后台可能是管理OA系统的控制台。那么前台、后台都是可以用 position方式 的。所以用前台、后台来区分是否适合使用是不准确。如果真的要按照点什么来区分是否适合使用，那我更愿意分成：倾向于信息展示；倾向于控制管理；这2种。其中 倾向于控制管理 的更适合使用。但这也是一种不太准确的定义。最好的办法还是学会理解然后灵活的运用。

[ 本帖最后由 wiseinfo 于 2007-12-29 11:29 编辑 ]

引用:

原帖由 wiseinfo 于 2007-12-29 11:27 发表



什么是前台？什么是后台？单纯对于网站而言的，前台既是网站本身，后台既是网站的CMS。如果是对于OA系统呢？那么前台可能是OA系统本身，后台可能是管理OA系统的控制台。那么前台、后台都是可以用 positio ...

是我说的太笼统了..确实是类似C/S的网页,这种布局不错.不晓得能不能理解我的意思..

高手过招，俺这样的新手也暂时只能收藏了，慢慢研究

构建web界面有几年了，但是构建B/S软件界面经验为零。今天刚接了个B/S软件项目，楼主的文章算是老天赐予的新年礼物了，呵呵。

楼主你花了几天时间写这些东西，我觉得很值。我刚刚花了两小时来逐字仔细阅读了楼主的文章以及所有的跟帖。算是我在蓝色看见的难得的好文了，建议加精。不管从专业技术角度，还是楼主的敬业精神，都令我佩服。

如果是WEB界面，我想可能还可以跟楼主切磋切磋，B/S软件方面，看了你的文章，我想基本可以拜你为师了。
建议不管是菜鸟还是大虾，都应该仔细阅读阅读，好好理解。

好一个“研究系统&界面易用性的策划”，我只能说你所在的单位应该不简单。

如果可以，交个朋友吧！  俺是构建界面出身的，刚接手PM工作，有空向你请教请教。

msn: joeke_cn@hotmail.com    email:joeke.cn@gmail.com

PS: 由于楼主“不是专业的Web page builder” ，所以我想大家不必要计较一些CSS的缩写之类的细节。


虽然过了子时了，但是好贴不能沉啊，顶上去：）

[ 本帖最后由 joeke 于 2007-12-30 01:14 编辑 ]

引用:

原帖由 joeke 于 2007-12-30 01:11 发表
构建web界面有几年了，但是构建B/S软件界面经验为零。今天刚接了个B/S软件项目，楼主的文章算是老天赐予的新年礼物了，呵呵。

楼主你花了几天时间写这些东西，我觉得很值。我刚刚花了两小时来逐字仔细阅读了 ...

您抬举了！说的我都飘飘然了……  不过写的东西有人愿意看也算是我莫大的荣幸啊！

其实这篇文章应该写在2年前，那时我在为一个项目做界面Demo时开始研究并使用了这种方法。而如今写出来已经和之前的想法有不同了。

我对 Html+CSS 的专研远不及这里太多人了，我只想做点我能做的来引起大家的思考。（其实这一段我写了很多话，但都被我删掉了，还是不要批评我们脆弱的教育体系了）


joeke兄言过了，我可没那么NB。我其实很简单，我的单位更简单，我自己刚刚注册半年小公司，我的用户名正是公司的名字，正筹划做一套办公协同系统，憧憬有天……  呵呵！不说了……

我原来在 BlueIdea 也有很早期注册的帐号，还发过几篇蛮受欢迎的 Flash AS 方面的文章 ，但密码忘了，也就不找了。

我的代码没有缩写是因为我希望大家更容易读懂。正想着接下来写的文章就是相关这部分呢！说一下 “代码书写的抉择：易读or简写” 方面！


PS. 已经加你MSN了.


突然有兴趣想把公司的LOGO传上来。呵呵！不许说我抄袭IBM！大言不惭的说一句：“记住这个LOGO，有天你可以和同伴炫耀自己是最早见证这LOGO的人哦！”



[ 本帖最后由 wiseinfo 于 2007-12-30 06:35 编辑 ]

对wiseinfo兄弟介绍的方法小小的实践了一下，发现一个小问题，看看大家有什么好的解决办法没。

对于B/S软件应用，如果不允许全局滚动条，但是考虑页面自动伸缩的话，除了主内容区域是 overflow:auto 外，
我想其他各个部分有时候也是有必要的，这样可以保证页面被缩得较小的时候，还可以通过滚动条来获取隐藏部分内容。

这就需要实现各个模块的区域尺寸正确性（也就是当设置该块为overflow:scroll 时，能看到四个方向完整的滚动箭头）。

下面是我为了测试wiseinfo兄弟的方法，写的一个demo

主要划分为：页头、主导航、标题、内容、状态 5个模块。
其中内容区为自动伸缩区域，其余区域需要在极端状态下能够保持区域尺寸正确性

以下是我的代码，firefox实现全部功能，但是 ie6 “主导航区” 没有实现区域尺寸正确性，看看大家有什么好的解决办法没

<?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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>B/S软件界面布局测试</title> <style type="text/css"> html,body{height:100%;margin:0;padding:0;overflow:hidden;font:normal normal 12px arial,simsun,sans-serif;color:#fff;} html>body {position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;}/*-- for !IE6.0 --*/ body {border:8px solid #fff;background-color:#fff;} #Jo_Wapper{width:100%;height:100%;_padding-top:80px; background:red;overflow:hidden; } #Jo_Header{position:absolute;top:0; left:0; width:100%; height:80px; background:green; overflow:scroll;} #Jo_Nav{position:absolute;top:80px; bottom:0; left:0; width:110px; height:auto; _height:100%;background:blue; overflow:scroll;} #Jo_Main{width:100%;height:100%;_margin-left:110px; padding:60px 0; background:gray;} #Jo_Wapper>#Jo_Main{position:absolute; top:80px; right:0; bottom:0; left:110px; height:auto; width:auto; } #Jo_PageTop{position:absolute;top:0;left:0; _top:80px; _left:110px; width:100%; height:60px; background:#c63; overflow:scroll;} #Jo_PageContent{height:100%; background:red; overflow:scroll;} #Jo_Status{position:absolute;bottom:0; width:100%; height:60px; background:orange;overflow:scroll;} </style> </head> <body> <div id="Jo_Wapper"> <div id="Jo_Header"> 页头区 </div> <div id="Jo_Nav"> 主导航区 </div> <div id="Jo_Main"> <div id="Jo_PageTop"> 标题区 </div> <div id="Jo_PageContent"> 内容区（自由伸缩） <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="Jo_Status"> 状态区 </div> </div> </div> </body> </html>
 提示：您可以先修改部分代码再运行

引用:

原帖由 joeke 于 2007-12-31 01:39 发表
对wiseinfo兄弟介绍的方法小小的实践了一下，发现一个小问题，看看大家有什么好的解决办法没。

对于B/S软件应用，如果不允许全局滚动条，但是考虑页面自动伸缩的话，除了主内容区域是 overflow:auto 外，
我 ...

这个实例中你有个错误的地方是：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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WiseInfo</title> <style type="text/css"> <!-- * { margin:0px; padding:0px; } html, body { height:100%; overflow: hidden; } html>body { /*-- for !IE6.0 --*/ width: auto; height: auto; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } body { border:8px solid #ffffff; background-color: #ffffff; } #mainDiv { width: 100%; height: 100%; _padding-top:100px; } #headDiv { height:96px; width:100%; background-color:#808080; overflow:scroll; position:absolute; top:0px; } #bodyDiv { width: 100%; height: 100%; _padding-left:160px; position:absolute; } #mainDiv>#bodyDiv { height:auto; top:100px; bottom:0px; } #leftDiv { width:156px; height:100%; background-color:#99FF33; overflow:scroll; position:absolute; left:0px; } #rightDiv { width: 100%; height: 100%; _padding:100px 0px; position:absolute; } #bodyDiv>#rightDiv { width:auto; left:160px; right:0px; } #centerDiv { width: 100%; height: 100%; background-color:#00CCFF; overflow:scroll; } #rightDiv>#centerDiv { height:auto; position:absolute; top:100px; bottom:100px; } #topDiv { height:96px; width:100%; background-color:#9933FF; overflow:scroll; position:absolute; top:0px; } #bottomDiv { height:96px; width:100%; background-color:#FF9900; overflow:scroll; position:absolute; bottom:0px; _bottom:-1px; /*-- for IE6.0 --*/ } --> </style> </head> <body> <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> </div> </body> </html>
 提示：您可以先修改部分代码再运行

这里边要强调注意的是 3层或3层以上Div嵌套 使用 position方式 时，父Div 的 position属性应为 absolute 。


还有另外我想说的，你这样在每一个Div中都加入了scrollbar的方式，是我不建议的，原因我之前说了。我也有过像你一样的时期，想要用代码解决一切问题，一切可能出现的问题。但不要为了解决一些极端问题而影响了正常用户的使用。

举个例子来说：

使用 640 x 480 这样的屏幕分辨率的用户比率低于2%，并且如果考虑这类用户会影响到其他用户的使用感受的话，那么应为这些用户另外开发界面。

如果这个比率低于0.1%，那么可以不再考虑这些用户的部分需求。当然这个只是我个人的标准，而不是什么 官方建议 。

其实具体按什么样的比率或标准是应根据项目资金决定的，如果你有足够的钱当然应该满足更多的用户。

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

其实实际项目中确实没有必要走极端，但是再技术研究的时候，我这个人还是比较追求完美的，只是尽可能想出更多好的办法来解决问题

白天的时候我又写了一个，基本实现了我的需求，JS部分还没写完整

我这里设置了一个 resize区域，拖动来改变区域大小，不知道这块有没人写过比较成熟的代码，可否拿出来参考下

<?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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网上评卷系统</title> <script type="text/javascript" src="http://www.yf-sm.com/gz/jq.gzjs"></script> <script type="text/javascript"> function initCtrl(){ $('#Jo_Ctrl') .find('.c_head').click(function(e){ $('body').toggleClass("hHeader"); $(this).toggleClass("h"); }) .end().find('.c_nav').click(function(e){ $('body').toggleClass("hNav"); $(this).toggleClass("h"); }); } $(function(){ initCtrl(); }); </script> <style type="text/css"> *{padding:0; margin:0;} html{height:100%; max-height:100%; background:#fff;} body{height:100%; max-height:100%; overflow:hidden; background:#fff;} body,p,th,td,input,select,textarea,button{font:normal normal 12px arial,simsun,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:14px;} ul,ol{list-style:none;} table{text-align:left;} p{line-height:18px;} hr{border:#000 0 solid;border-top:#c3c3c3 1px solid;height:0;} img,fieldset{border:0;} address,em{font-style:normal;} a:link,a:visited{color:#4847ff;text-decoration:none;} a:hover,a:active{color:#4847ff;text-decoration:underline;} #Jo_Header{position:absolute;z-index:21;width:100%;height:80px;} #Jo_Header .inner{height:80px;background-color:#efefef;} #Jo_Ctrl{position:absolute;top:80px;left:113px;z-index:19;width:120px;height:30px;} #Jo_Ctrl .inner{height:30px;background:red;} #Jo_Ctrl h2{display:none; } #Jo_Ctrl li{float:left;width:100%;} #Jo_Ctrl li a{line-height:15px;} #Jo_Ctrl li.h a{color:#fff;} #Jo_Nav{position:absolute;left:0;width:110px;} #Jo_Resize{position:absolute;top:80px;bottom:0;left:110px;width:3px;cursor:e-resize;} #Jo_PageTop{position:absolute;top:80px;right:0;left:113px;z-index:15;height:30px;} #Jo_Status{position:absolute;left:113px;right:0;bottom:0;z-index:14;height:30px;} #Jo_PageContent{position:absolute;left:113px;right:0;} #Jo_PageContent .inner{background:#999;} #Jo_Nav{top:80px;bottom:0;z-index:16;} #Jo_PageContent{top:110px;bottom:30px;z-index:9;} .inner{overflow:auto;height:100%;background:#ccc;} * html #Jo_Nav{height:100%; top:0; bottom:0; border-top:80px solid #fff; border-bottom:0 solid #fff;} * html #Jo_PageContent{height:100%; top:0; bottom:0; border-top:110px solid #fff; border-bottom:30px solid #fff;} * html #Jo_Resize{height:100%; top:0; bottom:0; border-top:80px solid #fff; border-bottom:60px solid #fff;} * html #Jo_PageTop .inner, * html #Jo_Status .inner{height:30px} body.hHeader #Jo_Header{display:none;} body.hHeader #Jo_Ctrl, body.hHeader #Jo_Nav, body.hHeader #Jo_Resize, body.hHeader #Jo_PageTop{top:0;} body.hHeader #Jo_PageContent{top:30px;} * html body.hHeader #Jo_Nav, * html body.hHeader #Jo_Resize{top:0; border-top-width:0;} * html body.hHeader #Jo_PageContent{top:0; border-top-width:30px;} body.hNav #Jo_Nav, body.hNav #Jo_Resize{display:none;} body.hNav #Jo_Ctrl, body.hNav #Jo_PageTop, body.hNav #Jo_PageContent, body.hNav #Jo_Status{left:0;} </style> </head> <body class=""> <div id="Jo_Header"> <div class="inner"> <h1>网上评卷系统</h1> </div> </div> <div id="Jo_Ctrl"> <div class="inner"> <h2>显示/隐藏控制器</h2> <ul> <li class="c_head"><a href="javascript:{};" alt="显示/隐藏页头">显示/隐藏页头</a></li> <li class="c_nav"><a href="javascript:{};" alt="显示/隐藏常用工作区">显示/隐藏常用工作区</a></li> </ul> </div> </div> <div id="Jo_Nav"> <div class="inner"> <h2>常用工作区</h2> <ul> <li class="pSettings"> <h3>个人设置</h3> <ul> <li><a href="">密码设置</a></li> <li><a href="">个人信息</a></li> </ul> </li> <li class="examManage"> <h3>考试管理</h3> <ul> <li><a href="">考试定义</a></li> <li><a href="">考务管理</a></li> </ul> </li> <li class="examForms"> <h3>考试报表</h3> <ul> <li><a href="">报表一</a></li> <li><a href="">报表二</a></li> <li><a href="">报表三</a></li> <li><a href="">报表四</a></li> <li><a href="">报表五</a></li> <li><a href="">报表六</a></li> </ul> </li> <li class="systemInfo"> <h3>系统信息</h3> <ul> <li><a href="">单位设置</a></li> <li><a href="">个人设置</a></li> <li><a href="">系统设置</a></li> </ul> </li> </ul> </div> </div> <div id="Jo_Resize"></div> <div id="Jo_PageTop"> <div class="inner">标题区</div> </div> <div id="Jo_PageContent"> <div class="inner"> <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> <div id="Jo_Status"> <div class="inner">工作状态区</div> </div> </body> </html>
 提示：您可以先修改部分代码再运行

[ 本帖最后由 joeke 于 2008-1-1 21:25 编辑 ]

js功能也基本OK了，测试了FF2 \IE6 ，还没来得及整理成通用插件，先扔上来

因为JQ库是临时gZip了下，放在公网，所以如果要看JS resize效果 需要运行后重新刷一下，不然蓝色的这个代码框似乎暂时没有支持压缩文件的载入，刷新后点红色控制区域应该可以显隐，白色resize条也能正常工作了

<?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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网上评卷系统</title> <script type="text/javascript" src="http://www.yf-sm.com/gz/jq.gzjs"></script> <script type="text/javascript"> jQuery.extend({ stopBubble: function(e){ (e && !$.browser.msie) ? e.stopPropagation() : window.event.cancelBubble = true; }, exsitEl: function(el){ return !!document.getElementById(el); } }); function initCtrl(){ $('#Jo_Ctrl') .find('.c_head').click(function(e){ $('body').toggleClass("hHeader"); $(this).toggleClass("h"); }) .end().find('.c_nav').click(function(e){ $('body').toggleClass("hNav"); $(this).toggleClass("h"); }); } var theResizeObj = null; function resizeObject() { this.target = null; this.mouseOld_X = null; this.mouseOld_Y = null; this.oldWidth = null; this.oldHeight = null; this.xMin = 1; this.yMin = 1; this.xMax = window.screen.availWidth * 0.95; } function resizeStart(ev) { jQuery.stopBubble(ev); var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.id == "Jo_Resize"){ theResizeObj = new resizeObject(); theResizeObj.target = document.getElementById("Jo_Nav"); theResizeObj.mouseOld_X = ev.clientX; theResizeObj.oldWidth = theResizeObj.target.offsetWidth; }else{ theResizeObj = null; } } function resize(ev){ jQuery.stopBubble(ev); var ev = ev || window.event; if(theResizeObj != null){ var newWidth = theResizeObj.oldWidth + ev.clientX - theResizeObj.mouseOld_X; newWidth = Math.min(newWidth, theResizeObj.xMax); newWidth = Math.max(newWidth, theResizeObj.xMin); theResizeObj.target.style.width = newWidth + "px"; $('#Jo_Resize').css('left',newWidth); var _w = parseInt($('#Jo_Resize').width()) + newWidth; $('#Jo_Ctrl,#Jo_PageTop,#Jo_PageContent,#Jo_Status').css('left',_w); } } function resizeStop(ev){ jQuery.stopBubble(ev); if(theResizeObj != null){ theResizeObj = null; } if($.browser.msie){ document.onselectstart = function (){event.returnValue = true; }; } document.onmousedown = null; document.onmousemove = null; document.onmouseup = null; } $(function(){ initCtrl(); $('#Jo_Resize').mousedown(function(e){ if($.browser.msie){ document.onselectstart = function () {event.returnValue = false; }; } $(document) .mousedown(function(e){ resizeStart(e); }) .mousemove(function(e){ resize(e); }) .mouseup(function(e){ resizeStop(e); }); }); }); </script> <style type="text/css"> *{padding:0; margin:0;} html{height:100%; max-height:100%; background:#fff;} body{height:100%; max-height:100%; overflow:hidden; background:#fff;} body,p,th,td,input,select,textarea,button{font:normal normal 12px arial,simsun,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:14px;} ul,ol{list-style:none;} table{text-align:left;} p{line-height:18px;} hr{border:#000 0 solid;border-top:#c3c3c3 1px solid;height:0;} img,fieldset{border:0;} address,em{font-style:normal;} a:link,a:visited{color:#4847ff;text-decoration:none;} a:hover,a:active{color:#4847ff;text-decoration:underline;} #Jo_Header{position:absolute;z-index:21;width:100%;height:80px;} #Jo_Header .inner{height:80px;background-color:#efefef;} #Jo_Ctrl{position:absolute;top:80px;left:113px;z-index:19;width:120px;height:30px;} #Jo_Ctrl .inner{height:30px;background:red;} #Jo_Ctrl h2{display:none; } #Jo_Ctrl li{float:left;width:100%;} #Jo_Ctrl li a{line-height:15px;} #Jo_Ctrl li.h a{color:#fff;} #Jo_Nav{position:absolute;left:0;width:110px;} #Jo_Resize{position:absolute;top:80px;bottom:0;left:110px;width:3px;cursor:e-resize;} #Jo_PageTop{position:absolute;top:80px;right:0;left:113px;z-index:15;height:30px;} #Jo_Status{position:absolute;left:113px;right:0;bottom:0;z-index:14;height:30px;} #Jo_PageContent{position:absolute;left:113px;right:0;} #Jo_PageContent .inner{background:#999;} #Jo_Nav{top:80px;bottom:0;z-index:16;} #Jo_PageContent{top:110px;bottom:30px;z-index:9;} .inner{overflow:auto;height:100%;background:#ccc;} * html #Jo_Nav{height:100%; top:0; bottom:0; border-top:80px solid #fff; border-bottom:0 solid #fff;} * html #Jo_PageContent{height:100%; top:0; bottom:0; border-top:110px solid #fff; border-bottom:30px solid #fff;} * html #Jo_Resize{height:100%; top:0; bottom:0; border-top:80px solid #fff; border-bottom:60px solid #fff;} * html #Jo_PageTop .inner, * html #Jo_Status .inner{height:30px;} body.hHeader #Jo_Header{display:none;} body.hHeader #Jo_Ctrl, body.hHeader #Jo_Nav, body.hHeader #Jo_Resize, body.hHeader #Jo_PageTop{top:0;} body.hHeader #Jo_PageContent{top:30px;} * html body.hHeader #Jo_Nav, * html body.hHeader #Jo_Resize{top:0; border-top-width:0;} * html body.hHeader #Jo_PageContent{top:0; border-top-width:30px;} body.hNav #Jo_Nav, body.hNav #Jo_Resize{display:none;} body.hNav #Jo_Ctrl, body.hNav #Jo_PageTop, body.hNav #Jo_PageContent, body.hNav #Jo_Status{left:0!important;} </style> </head> <body class=""> <div id="Jo_Header"> <div class="inner"> <h1>网上评卷系统</h1> </div> </div> <div id="Jo_Ctrl"> <div class="inner"> <h2>显示/隐藏控制器</h2> <ul> <li class="c_head"><a href="javascript:{};" alt="显示/隐藏页头">显示/隐藏页头</a></li> <li class="c_nav"><a href="javascript:{};" alt="显示/隐藏常用工作区">显示/隐藏常用工作区</a></li> </ul> </div> </div> <div id="Jo_Nav"> <div class="inner"> <h2>常用工作区</h2> <ul> <li class="pSettings"> <h3>个人设置</h3> <ul> <li><a href="">密码设置</a></li> <li><a href="">个人信息</a></li> </ul> </li> <li class="examManage"> <h3>考试管理</h3> <ul> <li><a href="">考试定义</a></li> <li><a href="">考务管理</a></li> </ul> </li> <li class="examForms"> <h3>考试报表</h3> <ul> <li><a href="">报表一</a></li> <li><a href="">报表二</a></li> <li><a href="">报表三</a></li> <li><a href="">报表四</a></li> <li><a href="">报表五</a></li> <li><a href="">报表六</a></li> </ul> </li> <li class="systemInfo"> <h3>系统信息</h3> <ul> <li><a href="">单位设置</a></li> <li><a href="">个人设置</a></li> <li><a href="">系统设置</a></li> </ul> </li> </ul> </div> </div> <div id="Jo_Resize"></div> <div id="Jo_PageTop"> <div class="inner">标题区</div> </div> <div id="Jo_PageContent"> <div class="inner"> <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> <div id="Jo_Status"> <div class="inner">工作状态区</div> </div> </body> </html>
 提示：您可以先修改部分代码再运行

[ 本帖最后由 joeke 于 2008-1-2 00:23 编辑 ]

引用:

原帖由 joeke 于 2008-1-2 00:15 发表
js功能也基本OK了，测试了FF2 \IE6 ，还没来得及整理成通用插件，先扔上来

因为JQ库是临时gZip了下，放在公网，所以如果要看JS resize效果 需要运行后重新刷一下，不然蓝色的这个代码框似乎暂时没有支持压缩 ...

Perfect!

不过准确的说你已经是在用JS来实现Resize效果了，而不是CSS。不过无所谓了，我极尽所能表述的只是一种方法，而在这方法背后想让大家理解一种思想。也算是抛了我这块砖引出Joeke这块玉了。

PS: 不过，Joeke兄，如果你写代码是给别人来学习的话，你的代码的可读性可不是很好啊！当然我知道平时可能大家都有自己写代码的习惯并且也为了文件大小和执行效率来简写，可是别人想要研究你的代码可是要细细的读了！



我在写这篇文章的时候，最希望看到的是大家都来研究。不是单纯的研究我所谓的 position方式 。而是研究一些非主流或者自己创造出来的方法。不论这新方法的好坏，各自提出意见，如果方法好我们学习它，如果方法有缺陷我们优化它，如果方法不可行我们论证它。我不知道你们是否发现了这样的问题：“有一天一个新手使用了一个非常规的做法，很多人没有真正的思考后就一棒子打死，告诉他有某某方法比你这个方法要好的多。” 是很多问题确实已经有了很好的解决办法，但我们不应该去扼杀新生的解决办法。当然作为一种新生的方法相对旧有的方法来说肯定是有缺陷的，因为旧有的方法已经经过了无数高手的优化使代码进化了。我不知道你们是否有这样的感觉：“我们的民族精神中更注重的是学习而不是创新，从千年以来的儒家思想中我们得到的就是崇拜经典。我女朋友分别在中国和美国读过西方艺术史和艺术鉴赏。在中国上课的时候书中怎么写的或者老师怎么教的你考试的时候就应该这样写，不然没有分，而在美国如果你完全按照书上写的或老师教的来写就没有分。我们的学生得到是学习后的知识，而他们的学生得到的是学习后的创新！” 我认为这正是很大程度上为什么我们现在使用的一些方法几乎都来源于外国。不单单是我们在学习的Web标准化，看看你的周围有多少的领域都是这样。我不否认在工作时使用一些最优秀的方法，但如果在工作之余还只在单纯的学习经典方法，而不去思考一些属于自己的东西的话真的就失败了。就拿 float方式 为例，Div布局 发明之处就是使用 float方式 。经过这么长时间无数的人为在使用它的过程中出现的问题给出解决办法，它已经很完善了。但真的完善到我们不需要研究其他方式了吗？我看到很多人在使用 float方式 时为实现某种 float方式 根本不可能实现的布局方式而苦恼，后来得出的结论是自己错了，为啥要用自己的布局而不找一个更适合 float方式 的布局。 唉！难道我们在经典面前就那么的卑微？如果有时间，我建议大家去读读一本叫做《量子物理史话》的书，可能对物理不太感冒的人不太能理解里边到底说了什么。可是这本书里体现了一种精神，无数的我们所知道的现在的物理学经典都建立在打破了原有经典的基础之上的创新，而能做到这一点的人正是那些学习了经典而不盲从经典研究经典中的问题与不足从而得出自己创新理论的人。我又跑题了，说着这么多我不知道是否有人愿意看。可能有人觉得我是愤青了，那就愤一点点吧！

[ 本帖最后由 wiseinfo 于 2008-1-2 04:17 编辑 ]

说得不错，受教了，哈哈