CSS 经典三列布局
一 圣杯布局
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 经典三列布局的更多相关文章
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- HTML5+CSS实现三列布局自适应
利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...
- CSS实现三列布局方法总结
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl
- 纯CSS实现三列布局(两边固定，中间自适应)
看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- 三列布局，读《css那些事儿》
1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...
随机推荐
- Java : Spring基础 AOP
简单的JDK动态代理例子(JDK动态代理是用了接口实现的方式)(ICar是接口, GoogleCar是被代理对象, MyCC是处理方法的类): public class TestCar { publi ...
- ZYNQ的Linux Linaro系统镜像制作SD卡启动
ZYNQ的Linux Linaro系统镜像制作SD卡启动 0. 概述 ZYNQ生成uboot的时候和正常的ARM设备不太一样,ZYNQ属于二次辅助启动uboot然后由uboot启动内核,大概意思就是 ...
- NoSQL入门第三天——Redis配置文件与持久化
一.解析Redis配置文件redis.conf (Linux下配置多于编码) 1.它在哪 由于我是在root的家目录下载安装的,默认的安装位置就是: conf就在这里: 根据经验,出厂的conf永远不 ...
- Android开发——Context类的各种细节问题
0. 前言 Context相信所有的Android开发人员基本上每天都在接触,因为它太常见了.但实际上Context有太多小的细节并不被大家所关注,那么今天我们就来学习一下那些你所不知道的细节. ...
- 北京Uber优步司机奖励政策（10月12日~10月18日）
用户组:优步北京人民优步A组(适用于10月12日-10月18日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万 ...
- javaweb(六)——Servlet开发(二)
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
- 「专题训练」Boredom（CodeForces Round #260 Div.1 A）
题意(Codeforces-455A) 给你\(n\)个数,你每次可以选择删除去一个数\(x\)获得\(x\)分,但是所有为\(x+1\)和\(x-1\)的数都得删去.问最大获得分数. 分析 这是一条 ...
- selenium自动化之显式等待和EC（expected_conditions）模块
很多人都有这种经历,selenium脚本当前运行没问题,过了一段时间再运行就报错了,然后过几天又好了.其中的原因估计60%的人都知道,是因为元素加载这块有问题.通常的解决方案就是加上sleep或者隐式 ...
- Appium Inspector定位元素与录制简单脚本
本次以微信为例, 使用Appium自带的Inspector定位工具定位元素, 以及进行最最最简单脚本的录制: capabilities = { "platformName": &q ...
- tpo-08 C2 A strategy for attracting customers
第 1 段 1.Listen to a conversation between a student and a business professor. 听一段学生和教授的对话. 第 2 段 1.So ...