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

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

发表于: 汉林设计信息网-翰林院营销顾问 · 2011-7-21 ·  1,878 views  ·  0 replies 

前一篇文章我们说了如何利用负边距来实现两栏自适应宽度的网站:CSS实现网站两栏自适应宽度
但是网站并不仅仅是简单的左右分栏,我们经常会用到的 还有三栏。下面我们看看如何来实现三栏自适应宽度。我们会发现制作一个三栏的布局也是很简单的!OK。下面我们把之前的例子变下,我们需要一个三栏的布局,2侧为固定宽度,中部为自适应宽度。这仅需要增加一点DIV。

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

<div id="wrapper">
<div id="mainer">
<div id="main">

<div id="leftBar">
<h2>栏目标题</h2>
<ul>
<li>文章标题</li>
<li>文章标题</li>
<li>文章标题</li>
</ul>
</div>

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

</div>
</div>

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

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

CSS部分增加:

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

 

  完整代码:

<!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: #36C;}
#footer {background-color: #36C;clear: both;}
#mainer {width: 100%;margin-right: -250px;float: left;}
#main {margin-right: 250px;}
#sideBar {float: right;width: 250px;color: #FFF;background-color: #09F;}
#wrapper {width: 92%;}
#leftBar {float: left;width: 150px;}
#inmain {margin-left: 150px;}
</style>
</head>
<body>
<div id="header">顶部区域</div>
<div id="wrapper">
<div id="mainer">
<div id="main">
<div id="leftBar">
<h2>栏目标题</h2>
<ul>
<li>文章标题</li>
<li>文章标题</li>
<li>文章标题</li>
</ul>
</div>
<div id="inmain">
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>
<p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>
<p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>
<p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>
</div>
</div>
</div>
<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div>&nbsp;</div>
</div>
<div id="footer">底部区域</div>
</body>
</html>

好了 ,这样我们就大功告成了,是不是很简单。

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

相关文章

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

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

合理使用负边距技术,可以帮助我们创建很多有意思的布局,...

网站设计页面形式的分析

网站设计页面形式的分析

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

客户说网站要做大气一点

客户说网站要做大气一点

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

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

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

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

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

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

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

设计中的极简主义

设计中的极简主义

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

0 thoughts on “CSS实现网站三栏自适应宽度”

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

Leave a reply