这是个典型的两栏布局,我们来做一个初步的架构
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
查看
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
这是在没有样式表的情况下页面的显示效果。下面我们给它加上基本的样式表
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,使得右边得以空出侧边栏的宽度,放置侧边栏。加上样式表页面请查看。
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
OK,现在我们看到左侧的内容区域已经为侧边栏空出了相应的空间,使得侧边栏放置在了它应该出现的位置。
我们这时会发现,左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个DIV层,来将左侧文字部分设置一个足够大的右边距,使其不与侧边栏重叠。并将左侧内容部分与侧边栏部分设置不同背景色,以示区分。
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;
}
查看
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
这时候我们又发现了一个问题:如果左侧长度继续加长,那么,右侧侧边栏的下部会出现空白。我们希望可以实现视觉上的左右两栏自适应等高。
这里我们可以给外层的mainer DIV设置一个右对齐纵向重复的背静图片,图片的宽度我们设置为250px,即同侧边栏宽度相同。
CSS部分我们加上
#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}
多数时候我们并不想设置全部宽度为浏览器的宽度,多数时候我们会设置小于屏幕宽度的百分比。这种情况下,我们可以在左侧内容及右侧侧边栏外再套一个DIV层,并在侧边栏下加上一个清除浮动的层,来达到我们的目的。这个时候我们的XHTML会是下面这个样子。
div id="header"顶部区域/div
div id="wrapper" class="mid"
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
div id="mainer"
div id="main"
h1使用负边距创建自适应宽度的流体布局/h1
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
/div
/divdiv id="sideBar"
h2最新文章/h2
ul
li最新文章一/li
li最新文章二/li
li最新文章三/li
/ul
/div
div class="clear"/div
/divdiv id="footer"底部区域/div
相应的CSS
#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}
查看
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
Ryan Brill 在他的文章里说,外层的wrapper与里面的mainer两个DIV都应该设置背景 background,以便解决IE里的一个BUG。但我这里只设置了mainer DIV的背景,在IE6、IE7、FF里并未发现错误。可能他指的是IE5.x,这里忽略。
掌握了以上的方法,我们会发现制作一个三栏的布局也是很简单的!OK。下面我们把上面的例子变下,我们需要一个三栏的布局,2侧为固定宽度,中部为自适应宽度。这仅需要增加一点DIV。
div id="header" class="mid"顶部区域/div
div id="wrapper" class="mid"
div id="mainer"
div id="main"div id="leftBar"
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
h2栏目标题/h2
ul
li文章标题/li
li文章标题/li
li文章标题/li
/ul
/divdiv id="inmain"
h1使用负边距创建自适应宽度的流体布局/h1
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
p随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。/p
/div/div
/divdiv id="sideBar"
h2最新文章/h2
ul
li最新文章一/li
li最新文章二/li
li最新文章三/li
/ul
/div
div class="clear" /div
/divdiv id="footer" class="mid"底部区域/div
以及另外一个背景图片
CSS部分增加:
#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}
现在来看看我们的页面,。
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
OK,大功告成~!!具体应用举例吗,俺的博客页面就是 ^ ^