Position方式构建B/S结构软件界面 - 网页制作

　Position方式构建B/S结构软件界面

作者：wiseinfo　时间： 2007-12-25　文档类型：原创　来自：蓝色理想

第 1 页 Position方式构建B/S结构软件界面 [1]
第 2 页 Position方式构建B/S结构软件界面 [2]
第 3 页 Position方式构建B/S结构软件界面 [3]
第 4 页 Position方式构建B/S结构软件界面 [4]
第 5 页 Position方式构建B/S结构软件界面 [5]

代码1-7

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

应用 position方式

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

代码1-8

运行代码框
<?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">  </style> </head> <body> <div id="mainDiv"> <div id="leftDiv"></div> <div id="middleDiv"></div> <div id="rightDiv"></div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这段通过 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WiseInfo</title> <style type="text/css">  </style> </head> <body> <div id="mainDiv"> <div id="leftDiv"></div> <div id="middleDiv"></div> <div id="rightDiv"></div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

通过对布局结构的组合你还可以通过 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WiseInfo</title> <style type="text/css">  </style> </head> <body> <div id="mainDiv"> <div id="leftDiv"></div> <div id="rightDiv"> <div id="topDiv"></div> <div id="centerDiv"></div> <div id="bottomDiv"></div> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

出处：蓝色理想
责任编辑：moby

上一页 Position方式构建B/S结构软件界面 [3] 下一页 Position方式构建B/S结构软件界面 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

(100-1)% 的内容是导航


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule