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

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

，来将左侧文字部分设置一个足够大的右边距，使其不与侧边栏重叠。并将左侧内容部分与侧边栏部分设置不同背景色，以示区分。

<div id="mainer">
<div id="main">
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>
</div>
</div>

增加的CSS

#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}

查看测试页面三

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

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

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

分享到：更多

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

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

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

随机推荐