点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

使用css负边距创建自适应宽度的流体布局的实现方法

来源：动视网责编：小采时间：2020-11-27 18:48:20

使用css负边距创建自适应宽度的流体布局的实现方法

使用css负边距创建自适应宽度的流体布局的实现方法:这篇文章主要介绍了关于使用css负边距创建自适应宽度的流体布局的实现方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下合理使用负边距技术，可以帮助我们创建很多有意思的布局，比如自适应浏览器宽度的流体布局。国外关于使用负边距创建

推荐度：

点击下载本文 文档为doc格式

导读使用css负边距创建自适应宽度的流体布局的实现方法:这篇文章主要介绍了关于使用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;
}

定义mainer右边距为-250px，使得右边得以空出侧边栏的宽度，放置侧边栏。加上样式表页面请查看测试页面二。OK，现在我们看到左侧的内容区域已经为侧边栏空出了相应的空间，使得侧边栏放置在了它应该出现的位置。

提示：您可以先修改部分代码再运行

【去除重叠部分】

我们这时会发现，左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个p层，来将左侧文字部分设置一个足够大的右边距，使其不与侧边栏重叠。并将左侧内容部分与侧边栏部分设置不同背景色，以示区分。

引用:

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

增加的CSS

引用:

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

查看

提示：您可以先修改部分代码再运行

【自适应高度】

这时候我们又发现了一个问题：如果左侧长度继续加长，那么，右侧侧边栏的下部会出现空白。我们希望可以实现视觉上的左右两栏自适应等高。

这里我们可以给外层的mainer p设置一个右对齐纵向重复的背静图片，图片的宽度我们设置为250px，即同侧边栏宽度相同。

CSS部分我们加上

引用:

#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}

多数时候我们并不想设置全部宽度为浏览器的宽度，多数时候我们会设置小于屏幕宽度的百分比。这种情况下，我们可以在左侧内容及右侧侧边栏外再套一个p层，并在侧边栏下加上一个清除浮动的层，来达到我们的目的。这个时候我们的XHTML会是下面这个样子。

引用:

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

相应的CSS

引用:

#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}

查看

提示：您可以先修改部分代码再运行

Ryan Brill 在他的文章里说，外层的wrapper与里面的mainer两个p都应该设置背景 background，以便解决IE里的一个BUG。但我这里只设置了mainer p的背景，在IE6、IE7、FF里并未发现错误。可能他指的是IE5.x，这里忽略。

【进阶，三栏布局】

掌握了以上的方法，我们会发现制作一个三栏的布局也是很简单的！OK。下面我们把上面的例子变下，我们需要一个三栏的布局，2侧为固定宽度，中部为自适应宽度。这仅需要增加一点p。

引用:

 <p id=”header” class=”mid”>顶部区域</p>
 <p id=”wrapper” class=”mid”>
 <p id=”mainer”>
 <p id=”main”>
 <p id=”leftBar”>
 <h2>栏目标题</h2>
 <ul>
 <li>文章标题</li>
 <li>文章标题</li>
 <li>文章标题</li>
 </ul>
 </p>
 <p id=”inmain”>
 <h1>使用负边距创建自适应宽度的流体布局</h1>
 <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
 <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
 <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
 <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
 </p>
 </p>
 </p>
 <p id=”sideBar”>
 <h2>最新文章</h2>
 <ul>
 <li>最新文章一</li>
 <li>最新文章二</li>
 <li>最新文章三</li>
 </ul>
 </p>
 <p class=”clear”> </p>
 </p>
 <p id=”footer” class=”mid”>底部区域</p>

以及另外一个背景图片

CSS部分增加：

引用:

#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}

现在来看看我们的页面。

提示：您可以先修改部分代码再运行

使用css负边距创建自适应宽度的流体布局的实现方法

推荐度：

点击下载本文 文档为doc格式

标签：布局 css 布局的

热门焦点

使用css负边距创建自适应宽度的流体布局的实现方法

使用css负边距创建自适应宽度的流体布局的实现方法

使用css负边距创建自适应宽度的流体布局的实现方法

最新推荐

猜你喜欢

热门推荐