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

<!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. Azure DevOps Server 2019 (TFS）安装教程

    概述 Azure DevOps Server 2019 (之前的名称为TFS),作为微软Azure DevOps 的企业私有(on-premises)服务器,是一个为开发团队提供软件协作开发管理的服务 ...

  2. asp.net core sdk & runtime 镜像[已更新至2.2.0]

    在官方镜像的脚本上, 增加了System.Drawing相关的依赖库 以北京时间为默认的时间 2.2.0 Windows SDK地址: 官方: https://dotnetcli.blob.core. ...

  3. .net项目的mvc简单发布

    基于VS2015 1. 右键要发布的项目的启动项目 2. 弹窗选择自定义,随意输入配置文件名称 3. 下一页选择FileSystem文件系统发布,同时选择将文件系统发布到本地的路径 4. 下一页,选择 ...

  4. Redis .Net

    一.Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,和Memcached类似,它支持存储的value类型相对更多,包括 ...

  5. [leetcode.com]算法题目 - Restore IP Addresses

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  6. CentOS 7 - 安装MySQL 5.7

    CentOS 7的默认yum仓库中并没有MySQL5.7,我们需要手动添加,好在MySQL官方提供了仓库的地址,所以我们能够比较简单地安装MySQL. 本文我们将介绍CentOS 7下MySQL5.7 ...

  7. 【BZOJ1052】 [HAOI2007]覆盖问题

    BZOJ1052 [HAOI2007]覆盖问题 前言 小清新思维题. 最近肯定需要一些思维题挽救我这种碰到题目只会模板的菜鸡. 这题腾空出世? Solution 考虑一下我们二分答案怎么做? 首先转换 ...

  8. Android Dagger 2 无法自动生成 Dagger Component

    给项目升级 gradle(3.0)和 build(27)后发现 Dagger 2 无法自动生成 Dagger Component 类了. 原因竟是我把 : kapt 'com.google.dagge ...

  9. PANIC: Missing emulator engine program for 'x86' CPU.

    获取可用的Android模拟器 1:emulator -list-avds 获取可用的模拟器的名称(只用名称) 2:  android list -avd    获取可用的模拟器(信息详细) 获取iO ...

  10. jdk1.8+SpringAOP注解报java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut select错误的不知原因的解决办法[仅供参考]

    先说办法:如果Aspectweaver-1.*.*jar这三个包版本比较低, 比如1.5.0这一层次的,可以找版本高一点的包替换低版本的包,问题可以得到解决 jar包的下载地址:https://mvn ...