用CSS floats创建三栏页布局
三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。
绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据用户浏览器窗口宽度自动伸缩）布局的网页。
现在，我们都开始抛弃基于表格的布局技术，许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难；但是得到液态布局就有点困难了。因此，本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。
基本方法
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。
三栏布局的一个例子
请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。
下面是XHTML代码：
<body>
<div id="header">
<h1>Header</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;
}
相关推荐
-
用CSS floats创建三栏页布局
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法.用绝对定位的方法从
-
div布局的自由伸展三栏式版面的代码
自由伸展的三栏式版面 自由伸展的三栏式版面(Three Column Stretch)(页首) #leftbox { position: absolute; left: 10px; width: 180px(150px?); } 这个栏段的背景是利用 body 卷标设定的图片,以垂直方向重复贴上所产生的.图片的宽度和中间栏段的左边界(margin)相等,高度为20px,这样可以减少图片重复的次数,加快演算上色的速度. 这一栏的内容(#leftbox)以绝对位置(absolutely positi
-
Android分页中显示出下面翻页的导航栏的布局实例代码
当页面条目过多的时候需要分页,要在布局中显示出分页的相关布局,使用android:layout_weight="11" activity_call_safe.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay
-
vue.js通过路由实现经典的三栏布局实例代码
经典的三栏布局效果图如下: 三栏布局 •将布局的各个区块定义成组件 <template id="header"> <div class="header bg-primary text-center"> <h3>头部区域</h3> </div> </template> <template id="left"> <div class="left bg-
-
HTML+CSS+JavaScript创建一个简单的井字游戏
目录 实现 HTML 添加 CSS 实现 Javascript 部分 演示地址 实现 HTML 首先在 head 部分,我将包含我们稍后创建的 css 和 javascript 文件.我还添加了名为 Itim 的 Google 字体. <link rel="stylesheet" href="style.css" rel="external nofollow" > <link rel="preconnect"
-
js改变css样式的三种方法推荐
共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s
-
Ionic2创建App启动页左右滑动欢迎界面
摘要: 每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy! 效果如下 本文例子和上图稍有不同,主要功能如下: 每滑动一下展示一张全屏图片: 滑动到最后一页才出现启动按钮: 欢迎界面只在第一次安装启动时出现. 下面就让我们一步一步实现这个功能: 1.创建应用: 使用Ionic2创建应用非常简单,只需在V1的命令后跟上--v2即可,如下: ionic start ionic2-welcome
-
MySQL 创建三张关系表实操
目录 1.创建学生表 2.创建科目表 3.创建分数表 4.插入数据 5.查询全部分数 6.查询学生的平均分 7.总分排行榜 1.创建学生表 create table tbl_stu ( id int not null primary key auto_increment, name varchar(45) not null )engine=innodb default charset=utf8; 2.创建科目表 create table tbl_sub ( id int not null pri
-
创建Go工程化项目布局详解
目录 正文 /cmd /internal /pkg /docs,/example,/pkg,/third_parth,/tools 基础库项目布局 kit包应该具备的特点 应用程序项目布局 /api /configs /test 不应该包含/src目录 /internal /biz /data /service 布局示意图 数据流向 正文 如果你尝试学习Go,或者你正在为自己建立一个Poc或者一个玩具项目,这个项目布局是没有啥必要的,从一些简单的事情开始(一个main文件绰绰有余).当有更多的人
-
使用html+css+js实现导航栏滚动渐变效果
目录 实现: 1.定义导航栏的文字标签: 2.导航栏整体的样式: 3.北极光这个logo的样式: 4.给北极光logo定位一个图片在文字左边: 5.右边导航标签的一些样式,样式等都不做详细说明了,毕竟每个人的都不一样~: 6.当页面有滚动后导航栏的样式,padding上下变小,字体颜色变,有了蓝背景色: 7.简单js,实现部分: 第一种: 第二种:直接这样: 完整代码: 先看效果: 实现: 1.定义导航栏的文字标签: <div class="tou"> <sapn c