用CSS floats创建三栏页布局

2016-02-19 17:45 8 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的用CSS floats创建三栏页布局懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。
 
绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。

现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难;但是得到液态布局就有点困难了。因此,本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。

基本方法

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

基本的布局包含五个div,即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽,中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定,因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中,甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

三栏布局的一个例子

请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。下面是XHTML代码:
body
div id="header"
    h1Header/h1
/div
div id="left"
    Port side text...
/div
div id="right"
    Starboard side text...
/div
div id="middle"
    Middle column text...
/div
div id="footer"
    Footer text...
/div
/body
下面是CSS代码:
body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}

来源:http://www.tulaoshi.com/n/20160219/1615981.html

延伸阅读
标签: Web开发
CSS文件的链接方式 ·附加链接:外部CSS文件 ·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 CSS规则定义有三种: 1)类比如“.RedText”、“.BlueText”和“.BigText”等等 2)标签针对原有HTML标签做的重新CSS定义 3)高级伪类、定义了ID的元素,以及综合性定义 CSS规则的应用 ...
标签: Web开发
现在编写xhtml,我们强烈不推荐此种方法,应该是id,class综合应用。此文章只是讲述一种思维,并非建站过程中的方法! 用标准件的方式来组装网页DIV布局。我把class分为2种:布局class;风格class。 布局class是骨架,风格class是衣服。 举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。...
标签: Web开发
TW的正文页之前为了考虑小显示器小风辨率的用户,宽度用了850px,现在用大分辨率的用户越来越多,为了跟首页统一,都要改成950px。因为2年前做页面的时候就用了CSS布局,所以,虽然正文页有几十万个页面,但只修改了一个css文件和几个相关的图片,就都变了。如果当初用了table布局,后果不不堪设想….. 早几年,网上曾兴起过CSS布局和Table布...
标签: Web开发
Source Code to Run html head style type="text/css" !-- body {  margin: 0;  padding: 0;  font-size:12px; } #layout{  background-color: #FFFFFF;  border: 0;  width: 400px;  margin: 0 auto; } .list{  margin: 0px 10px 20px;  text-align: left; } .list ul{  list-style-ty...
标签: Web开发
今天网页教学网将向大家讲解如何通过设计一个HTML/CSS的基本结构,来创造一个简单且常用的三列式固定页面布局。 我们的讲解会包含一些标准元素,如Logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense 120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。 HTML...

经验教程

442

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部