双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} .main {
background-color: #BCCEDE;
height: 600px;
} .content {
width: 100%;
height: 100px;
} .csv_content {
height: 100px;
background-color: aqua;
} .table_content {
width: 40%;
height: 100px;
float: left;
margin-left: -10px;
background-color: darkcyan;
} .normal_content {
height: 100px;
width: 60%;
float: right;
background-color: #8A2BE2;
} .mrgT10 {
margin-top: 10px;
} .clear {
clear: both;
}
.main_content{
width: 100%;
float: left;
}
/* 双飞翼布局 */
.center{
background: #f66;
margin: 0 210px;
height: 100px;
}
.left{
background:#fcc;
width: 200px;
float: left;
margin-left: -100%;
height: 20px;
}
.right{
background: #0000FF;
width: 200px;
float: left;
margin-left: -200px;
height: 60px;
}
/* 圣杯布局 */
.container{
padding: 0 220px 0 200px;
overflow: hidden;
}
.sb_center, .sb_left, .sb_cright{
position: relative;
float: left;
height: 100px;
}
.sb_center{
width: 100%;
background-color: #0000FF;
}
.sb_left{
margin-left: -100%;
width: 200px;
background-color: #00FFFF;
left: -200px;
}
.sb_cright{
margin-left: -220px;
right: -220px;
width: 220px;
background-color: #FF6666;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="csv_content"> </div>
</div>
<div class="content mrgT10">
<div class="main_content">
<div class="center"> </div>
</div>
<div class="left"> </div>
<div class="right"> </div>
</div>
<div class="content clear mrgT10">
<div class="table_content"> </div>
<div class="normal_content"> </div>
</div>
<div class="clear container mrgT10">
<div class="sb_center"> </div>
<div class="sb_left"> </div>
<div class="sb_cright"> </div>
</div>
</div>
</body>
</html>

css布局记录之双飞翼布局、圣杯布局的更多相关文章

  1. css布局笔记(三)圣杯布局,双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  2. css实现三栏水平布局双飞翼与圣杯布局

    作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...

  3. HTML布局篇之双飞翼(圣杯)布局

    最近在写页面的时候,总是为布局头疼,倒不是不能布出来,就是感觉不系统,没有成一个体系的感觉.所以决定自己写博文,梳理一下思路. 常用的布局方式大致可以分为三种: 浮动布局 Float 负边距(双飞翼) ...

  4. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

  5. CSS_圣杯布局和双飞翼布局

    参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...

  6. css多种方式实现双飞翼布局

    圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...

  7. css3布局篇(双飞翼)

    大家看到好多电商网站都见过经典三列布局,它也叫做圣杯布局 ,是Kevin Cornell在2006年提出的一个布局模型概念,这个在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它 ...

  8. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  9. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

随机推荐

  1. Windows编译Opencv

    下载安装CMake 下载Opencv源码 打开CMake,设置源码路径和生成路径,点击Configure选择要生成的版本.(这里要多次Configure,直到所有红色消失!) 勾选BUILD_open ...

  2. 利用GDI+处理图像的色彩

    首先先介绍一下ColorMatrix结构体:表示颜色的变换关系,定义如下: typedef struct { REAL m[][]; } ColorMatrix; ColorMatrix结构体一般和I ...

  3. ASP 基础一

    ASP是什么? •ASP代表Active Server Pages(动态服务器页面) •需在IIS中运行的程序 我自己的理解就是UI和逻辑代码同在一个页面中,而缺点就是不易维护.code-Behind ...

  4. WPF学习笔记(1):DataGrid单元格实现逐键过滤功能

    最近,开始学习WPF,其UI设计完全颠覆了传统的设计理念,为程序员提供了极大的自由发挥空间,让我为之惊叹,且为之着迷.然而,WPF在国内的热度却并不高,大部分贴子都是2012年以前的,出版的图书也很少 ...

  5. Linux例行工作与系统管理(13)

    Linux 系统的任务是由cron(crond)这个系统服务来控制的,Linux系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另外,由于使用者自己也可以设置计划任务,所以Linux ...

  6. vue.js生命周期钩子函数及缓存

    在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...

  7. FastDFD安装遇到的问题

    如果按照步骤安装最后却发现 sudo service fdfs_trackerd start 启动不了,那么重启一下虚拟机就可以了

  8. python3模块: requests

    Python标准库中提供了:urllib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最简单的任务. 发送G ...

  9. Runtime 全方位装逼指南

    Runtime是什么?见名知意,其概念无非就是“因为 Objective-C 是一门动态语言,所以它需要一个运行时系统……这就是 Runtime 系统”云云.对博主这种菜鸟而言,Runtime 在实际 ...

  10. POJ 2590

    #include<iostream> #include<algorithm> #define MAXN 1000000 using namespace std; unsigne ...