您现在的位置是:网站首页> 编程资料编程资料
负边距创建自适应宽度的流体布局的实现方法_CSS布局实例_CSS_网页制作_
2021-09-09
745人已围观
简介 合理使用负边距技术,可以帮助我们创建很多有意思的布局,比如自适应浏览器宽度的流体布局。
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。目前国内门户很多都进行了改版,采用目前的主流———960px左右的宽度。
我认为,对于不太复杂的网站,采用百分比进行架构是个不错的主意。自适应布局的应用面还是蛮多的,比如论坛页面、博客页面等。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
这里需要的用到的技术关键点就一则:负边距。
【简单的布局】
OK。我们现在开始。假设现在需要给自己的博客重新制作前台,界面的设计已经完成,就差代码架构。我们希望博客的界面可以做到:左侧的主要部分是博客文章 内容,这部分需要在不同分辨率浏览器下自适应宽度;而右侧是侧边栏,这部分我们想做成一个固定250px宽,预期效果图如下:

这是个典型的两栏布局,我们来做一个初步的架构
引用:
顶部区域使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
最新文章
- 最新文章一
- 最新文章二
- 最新文章三
提示:您可以先修改部分代码再运行
引用:
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;
}
提示:您可以先修改部分代码再运行
【去除重叠部分】
我们这时会发现,左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个DIV层,来将左侧文字部分设置一个足够大的右边距,使其不与侧边栏重叠。并将左侧内容部分与侧边栏部分设置不同背景色,以示区分。
引用:
使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
引用:
#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}
提示:您可以先修改部分代码再运行
【自适应高度】
这时候我们又发现了一个问题:如果左侧长度继续加长,那么,右侧侧边栏的下部会出现空白。我们希望可以实现视觉上的左右两栏自适应等高。
这里我们可以给外层的mainer DIV设置一个右对齐纵向重复的背静图片,图片的宽度我们设置为250px,即同侧边栏宽度相同。

CSS部分我们加上
引用:
#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}
引用:
顶部区域
使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
最新文章
- 最新文章一
- 最新文章二
- 最新文章三
引用:
#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}
提示:您可以先修改部分代码再运行
Ryan Brill 在他的文章里说,外层的wrapper与里面的mainer两个DIV都应该设置背景 background,以便解决IE里的一个BUG。但我这里只设置了mainer DIV的背景,在IE6、IE7、FF里并未发现错误。可能他指的是IE5.x,这里忽略。
【进阶,三栏布局】
掌握了以上的方法,我们会发现制作一个三栏的布局也是很简单的!OK。下面我们把上面的例子变下,我们需要一个三栏的布局,2侧为固定宽度,中部为自适应宽度。这仅需要增加一点DIV。
引用:
顶部区域
栏目标题
- 文章标题
- 文章标题
- 文章标题
使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。
最新文章
- 最新文章一
- 最新文章二
- 最新文章三

CSS部分增加:
引用:
#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}
提示:您可以先修改部分代码再运行
相关内容
- css 滑动门技术的介绍及实例分享 _CSS教程_CSS_网页制作_
- css 相对定位 绝对定位 浮动 分析_CSS教程_CSS_网页制作_
- 关于html元素的 width属性无效果的解决方法_CSS教程_CSS_网页制作_
- CSS 折叠的菜单实现代码_CSS教程_CSS_网页制作_
- css 教学实例 漂亮的搜索框_CSS教程_CSS_网页制作_
- css 自动换行 强制换行属性 (firefox+ie)_浏览器兼容教程_CSS_网页制作_
- css word-break word-wrap 前台显示自动换行_CSS教程_CSS_网页制作_
- 纯CSS搞定按钮、链接点击时的虚线_CSS教程_CSS_网页制作_
- CSS 网页布局中易犯的10个小错误小结_CSS布局实例_CSS_网页制作_
- IE7 position:relative的问题_CSS教程_CSS_网页制作_