Position方式构建Browser/Server结构(4)

http://www.itjxue.com 2015-07-17 12:12 来源:未知 点击次数:

看一下代码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 全部选择提示：你可先修改部分代码，再按运行]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：绝对值得Web开发者收藏的10个极有用的网站

下一篇：Android程序用户界面:线性布局

Position方式构建Browser/Server结构(4)

(责任编辑：IT教学网)

相关其他WEB语言文章

阅读排行

专题教程

推荐其他WEB语言文章

最新更新其他WEB语言