利用负边距技术制作自适应宽度布局的网页

作者佚名技术来源 CSS技术浏览发布时间 2012-02-28

这是在没有样式表的情况下页面的显示效果。下面我们给它加上基本的样式表

body,p,h1,h2,ul {
margin:0;padding:0;
}
#header {
background-color: #A8A754;
}
#footer {
background-color: #A8A754;
clear: both;
}
#mainer {
width: 100%;
margin-right: -250px;
float: left;
}
#sideBar {
float: right;
width: 250px;
}

定义mainer右边距为-250px，使得右边得以空出侧边栏的宽度，放置侧边栏。加上样式表页面请查看测试页面二。

<!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> <style type="text/css"> <!-- body,p,h1,h2,ul {margin:0;padding:0;} #header {background-color: #A8A754;} #footer {background-color: #A8A754;clear: both;} #mainer {width: 100%;margin-right: -250px;float: left;} #sideBar {float: right;width: 250px;} </style> </head> <body> <div id="header">顶部区域</div> <div id="mainer"> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p> </div> <div id="sideBar"> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </div> <div id="footer">底部区域</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

OK，现在我们看到左侧的内容区域已经为侧边栏空出了相应的空间，使得侧边栏放置在了它应该出现的位置。

【去除重叠部分】

我们这时会发现，左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个DIV层

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 8 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS教程:网页中英文字体的设置下一篇: CSS教程:CSS选择符的用法和实例

关于利用负边距技术制作自适应宽度布局的网页的所有评论

随机推荐