首页 » 建站 » 网站设计 » 正文

CSS实现网站两栏自适应宽度

发表于: 翰林院营销顾问 · 2011-7-20 ·  728 views  ·  1 replies 

合理使用负边距技术,可以帮助我们创建很多有意思的布局,比如自适应浏览器宽度的流体布局。随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。目前国内门户很多都进行了改版,采用目前的主流960px的宽度。

个人认为,对于不太复杂的网站,采用百分比进行架构是个不错的主意。毕竟现在的显示器动不动就是23寸的有木有!!自适应布局的应用面还是蛮多的,比如论坛页面、博客页面等。这里我讲的,主要也就是对于博客的应用。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。

这里需要的用到的技术就是CSS:负边距。

如上图所示,这是个典型的两栏布局,我们来做一个初步的架构。

<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,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,现在我们看到左侧的内容区域已经为侧边栏空出了相应的空间,使得侧边栏放置在了它应该出现的位置。

我们这时会发现,左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个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;
}

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

<div id=”header”>顶部区域</div>

<div id=”wrapper”>
<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>
</div>

<div id=”sideBar”>
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div></div>
</div>

<div id=”footer”>底部区域</div>

增加的CSS

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

OK  到这里,我们就已经可以实现两栏的自适应宽度了。完整页面请看这里。两栏自适应页面布局

同样道理,我们可以引申出三栏自适应。这点,我下次再来说。

本文链接: http://www.hanlinweb.com/css-layout-two-section.html
0 like+
«上一篇: :下一篇»

相关文章

CSS实现网站三栏自适应宽度

CSS实现网站三栏自适应宽度

前一篇文章我们说了如何利用负边距来实现两栏自适应宽度的...

网站设计页面形式的分析

网站设计页面形式的分析

没有一个好的网站设计基础,就不会取得理想的网站排名效果...

客户说网站要做大气一点

客户说网站要做大气一点

在百度UEO看到篇文章,觉得还满有点意思,分享给大家看看。...

Windows平台上的强大的文本编辑器

Windows平台上的强大的文本编辑器

这里介绍两款灰常强大的软件,就是那些能让你们保持高效率...

全国各省管局备案过程真实性核验注意事项

全国各省管局备案过程真实性核验注意事项

简称 省 份 需要快递 核验单 需要幕布背景 照片 特殊要...

设计中的极简主义

设计中的极简主义

设计中的极简主义已经出现一段时间了,并且现在看起来正在...

One thought on “CSS实现网站两栏自适应宽度”

  1. 还没有任何评论,你来说两句吧

Leave a reply