一 圣杯布局

1 html结构

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<link rel="stylesheet" type="text/css" href="css/css.css">

</head>

<body>

	<div class="header">头部</div>

	<div class="container">

		<div class="middle">中间</div>

		<div class="left">左侧</div>

		<div class="right">右侧</div>

	</div>

	<div class="footer">底部</div>

</body>

</html>

2 css

*{padding: 0;margin: 0;list-style: none;}

body{min-height: 700px;}

.header,.footer{background: #ff9999;text-align: center;height: 50px;line-height: 50px;}

.left,.middle,.right{

	position: relative;

	float: left;

	min-height: 530px;

	line-height: 530px;

	text-align: center;

}

.container{

	padding: 0 220px 0 200px;

	overflow: hidden;

}

.left{

	margin-left: -100%;left: -200px;

	width: 200px;

	background-color: #99ffff;

}

.right{

	margin-left: -220px;

	right: -220px;

	width: 220px;

	background: #ccff99;

}

.middle{

	width: 100%;

	background: #ccffff;

	word-break: break-all;

}

.footer{

	clear: both;

}

　

二 双飞翼布局

1 html结构

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<link rel="stylesheet" type="text/css" href="css/sb.css">

</head>

<body>

	<div class="header">header</div>

	<div class="middle">

		<div class="middle-inner">middle</div>

	</div>

	<div class="left">left</div>

	<div class="right">right</div>

	<div class="footer">footer</div>

</body>

</html>

2 css

*{padding: 0px;margin: 0px;}

.header,.footer{

	height: 50px;

	line-height: 50px;

	background: #cf9999;

    border: 1px solid #333;

    text-align: center;

}

.left,.middle,.right{

	float: left;

	min-height: 500px;

	line-height: 500px;

	text-align: center;

}

.left{

	margin-left: -100%;

	width: 200px;

	background: #9999ff;

}

.right{

	margin-left: -220px;

	width: 220px;

	background: #ccffff;

}

.middle{

	width: 100%;

}

.middle-inner{

	margin-left: 200px;

	margin-right: 220px;

	min-height: 500px;

	background-color: #ccff99;

	word-break: break-all;

}

.footer{clear: both;}

　　

三 以上两种 经典布局以双飞翼为最佳，在此基础上进行各种变种，主要体现了浮动和margin负值的巧妙使用

CSS 经典三列布局的更多相关文章

  1. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  2. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  3. HTML5+CSS实现三列布局自适应

    利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...

  4. CSS实现三列布局方法总结

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

  5. 纯CSS实现三列布局(两边固定，中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...

  6. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  7. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  8. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  9. 三列布局，读《css那些事儿》

    1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...

随机推荐

  1. python学习笔记：第11天 闭包及迭代器

    目录 1. 函数名的使用 2. 闭包 3. 迭代器 1. 函数名的使用 其实函数名也是一个变量,但它是一个比较特殊的变量,与小括号配合可以执行函数的变量: 函数名其实和内存一样,也可以使用print查 ...

  2. LeetCode-Algorithms 1. 两数之和

    个人练习记录 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], ...

  3. 关于条件约束问题的无偏差统计——一个偏差控制型生成器（Unbiased Statistics of a Constraint Satisfaction Problem – a Controlled-Bias Generator——by Denis Berthier）

    论文地址:https://hal.archives-ouvertes.fr/hal-00641955 Unbiased Statistics of a Constraint Satisfaction ...

  4. Solr与Lucene的区别

    Lucene是一个优秀的开源搜索库,Solr是在Lucene上封装的完善的搜索引擎.通俗地说,如果Solr是汽车,那么Lucene就是发动机,没有发动机,汽车就没法运转,但对于用户来说只可开车,不能开 ...

  5. HTML基础part1

    HTML基础 Web的本质就是利用浏览器访问socket服务端,socket服务端收到请求回复数据提供给浏览器进行渲染显示. import socket def main(): sock = sock ...

  6. Java设计模式（15）——行为模式之策略模式（Strategy）

    一.概述 概念 UML简图 角色 二.实践 我们先将上述的UML图的抽象情况下的代码写出,然后再给出一个具体的例子 策略接口——当然如果有一些公共的行为,应当使用抽象类! /** * 策略接口 * * ...

  7. mybatis入门(二):增删改查

    mybatis的原理: 1.mybatis是一个持久层框架,是apache下的顶级项目 mybatis托管到googlecode下,目前托管到了github下面 2.mybatis可以将向prepar ...

  8. [AGC011F] Train Service Planning [线段树优化dp+思维]

    思路 模意义 这题真tm有意思 我上下楼梯了半天做出来的qwq 首先,考虑到每K分钟有一辆车,那么可以把所有的操作都放到模$K$意义下进行 这时,我们只需要考虑两边的两辆车就好了. 定义一些称呼: 上 ...

  9. 让pip 使用国内镜像源

    让python的pip使用 国内镜像 国内源: 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/py ...

  10. 限时购校验小工具&dubbo异步调用实现限

    本文来自网易云社区 作者:张伟 背景 限时购是网易考拉目前比较常用的促销形式,但是前期创建一个限时购活动时需要各个BU按照指定的Excel格式进行选品提报,为了保证提报数据准确,运营需要人肉校验很多信 ...