用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。
绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。
基本方法
基本的布局包含五个div,即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽,中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定,因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中,甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。
三栏布局的一个例子
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的float属性创建三栏布局网页的方法相关推荐
- 用CSS的float和clear创建三栏液态布局的方法(转载)
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. ...
- CSS || 三栏布局,两边固定,中间自适应
1 float实现 基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧 原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin ...
- css三栏布局技巧,CSS-三栏布局的常用6种方法
三栏布局一般指左右两栏固定宽度,中间一栏自适应的布局方法,也是许多网站常用的布局方式.如下图: 该示例在一个html文件中编写,为方便起见,预先写好一个通用的css,左右宽度都为100px: 1.浮动 ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
- html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局 三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
- css实现三栏布局的几种方法及优缺点
三栏布局,顾名思义就是两边固定,中间自适应. 三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 我们不妨假定这 ...
- css布局:table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
- CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解 写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
最新文章
- 六类布线六大注意事项
- 阿里巴巴成立云原生技术委员会,云原生升级为阿里技术新战略
- CSS 修饰图片的5种方法
- 《Oracle从入门到精通》读书笔记第四章 SQL语言基础之二
- ssh图示+hibernate图示
- android 设置类PreferenceActivity
- 【你好,windows】windows 7 X86X64 旗舰纯净版2020.3.18
- 简要罗列通过Allegro绘制的PCB封装步骤
- 降了还是涨了?瓶装水市场再秀迷幻操作
- java 两张图片合成
- ES与分布式系统(一)
- isSucess = result == sucess_signal
- AndroidStudio如何删除Modle
- mv命令移动文件夹及其下所有文件
- 做了一个可以查询飞机航班、火车班次的小应用
- rabbitMq系列2:AMPQ协议与RabbitMQ执行过程
- windows远程桌面功能和粘贴拷贝功能
- 【精】EOS智能合约:system系统合约源码分析
- 封装篇——图片模块(Glide)
- 设计模式基础之类与类图
热门文章
- 【Android 逆向】整体加固脱壳 ( DexClassLoader 加载 dex 流程分析 | DexPathList 中根据 File 加载 DexFile | loadDexFile 分析 )
- 【组合数学】指数生成函数 ( 指数生成函数性质 | 指数生成函数求解多重集排列 )
- [Spring cloud 一步步实现广告系统] 9. 主类和配置文件
- C#单例模式的懒汉与饿汉
- String 课后作业2
- 自动化测试有缺点吗?
- 【转】解决从jenkins打开robot framework报告会提示‘Opening Robot Framework log failed ’的问题...
- bootstrap绿色大气后台模板下载[转]
- PowerDesigner 小工具窗
- OpenGL透视投影函数gluPerspective的参数含义之解析(图示)