Position方式构建Browser/Server结构

2007-12-26 00:09:22 来源:

网页教学网

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

共4页: 上一页 [1] [2] [3] 4 下一页

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

上一篇：Browser/Server结构浏览器和服务器结构介绍

下一篇：写给喜欢用DW编写CSS人的一些建议

文章评论

共有 0 位网友发表了评论查看完整内容

网页教学网

Position方式构建Browser/Server结构

相关文章

文章评论

阅读排行

专题教程

推荐文章

最新更新