本文要介绍的教程是关于CSS绝对定位的布局问题,关于CSS绝对定位的好处是,不管网页窗口有多大或多小,其内部显示的内容不会变形,浏览用拖动条代替,在对布局显示要求较高的场合,绝对定位还是有很大好处的。这个使用绝对定位技术的CSS代码会告诉你该如何做。 请看实例演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /> <title>绝对定位css布局实例 - Liehuo.net</title><br /> <style><br /> body<br /> {<br /> margin:0;<br /> }<br /> #header<br /> {<br /> position:absolute;<br /> top:2px;<br /> left:5px;<br /> height:80px;<br /> width:780px;<br /> }<br /> #nav<br /> {<br /> position:absolute;<br /> top:87px;<br /> left:5px;<br /> height:400px;<br /> width:180px;<br /> }<br /> #content<br /> {<br /> position:absolute;<br /> top:87px;<br /> left:195px;<br /> height:400px;<br /> width:590px;<br /> }<br /> #footer<br /> {<br /> position:absolute;<br /> top:492px;<br /> left:5px;<br /> height:80px;<br /> width:780px;<br /> }<br /> div<br /> {<br /> border:2px solid #000000;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="header">header部分-liehuo.net</div><br /> <div id="nav">绝对定位的nav部分-liehuo.net</div><br /> <div id="content">绝对定位的内容部分-liehuo.net</div><br /> <div id="footer">footer部分-liehuo.net</div><br /> </body><br /> </html><br /> <br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 CSS 网页布局实例:横向分栏水平居中的实现CSS3实例效果五则,很实用的WEB开发教程