一,双飞翼布局

　　左右两边固定，中间可以随着浏览器放大和缩小

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>双飞翼布局</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .main .container {

            width: 100%;

        }

        .main .container .contain {

            background: blue;

            margin-left: 200px;

            margin-right: 200px;

        }

        .main .left {

            width: 200px;

            background: pink;

            margin-left: -100%;

        }

        .main .right {

            width: 200px;

            margin-left: -200px;

            background: red;

        }

        .main>div {

            float: left;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="container">

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

        </div>

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

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

    </div>

</body>

</html>

二，圣杯布局

　　头部和尾部,左边，右边固定，中间可以随浏览器放大和缩小

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>圣杯布局</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .container {

            display: flex;

            flex-direction: column;

            height: 100vh;

        }

        header {

            background: red;

        }

        section {

            background: pink;

            flex: 1;

            display: flex;

        }

        footer {

            background: blue;

        }

        .left,

        .right {

            background: orange;

            flex: 0 0 200px;

        }

        .content {

            background: olivedrab;

            flex: 1;

        }

    </style>

</head>

<body>

    <div class="container">

        <header>头部</header>

        <section>

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

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

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

        </section>

        <footer>尾部</footer>

    </div>

</body>

</html>

css布局 -双飞翼布局&圣杯布局的更多相关文章

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

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

  2. CSS布局方案之圣杯布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

  4. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

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

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  6. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  7. 【布局】圣杯布局&双飞翼布局

    背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...

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

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

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

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

  10. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

随机推荐

  1. 四 SpringMVC与页面之间的参数传递&高级参数的绑定&日期类型的转换

    参数传递: 1 原生方式:使用Servlet  API  , request.getParameter("id"); 2 直接将请求参数作为Controller中的形参: publ ...

  2. 一个Win32程序的进化------转载

    一个Win32程序的进化 转载 weixin_34273046 发布于2017-11-15 10:53:00 阅读数 10 收藏 展开 一．为什么要学Win32     要回答这个问题,我们就要先搞清 ...

  3. 【剑指Offer面试编程题】题目1516：调整数组顺序使奇数位于偶数前面--九度OJ

    题目描述: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 输入: 每个输 ...

  4. Iptables与LVS——从入门到放弃

    防火墙什么是防火墙?防火墙其实就是一个隔离的工具,工作于主机或者网络的边缘,对于进出本主机或者网络的报文根据事先定义好的网络规则做匹配监测.防火墙可以简单地划分为两大类:主机防火墙 网络防火墙     ...

  5. NSString 常见数据类型转换：转NSInteger , NSDate(互转)

    1. NSString转NSInteger, 转int (float, double类似 ) 1.1正常情况 , NSString所包含内容确能转化为int的类型 NSString *sNumber ...

  6. SQL SERVER查询数据库所有的表名/字段

    SELECT * FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME='subject' --表名 1.利用sysobjects系统表 在这个表中,在数据 ...

  7. C# 篇基础知识6——文件和流

    计算机以文件的形式把数据存储在磁盘.光盘等存储设备上.文件的管理和操作是操作系统的一个重要组成部分,.NET 框架提供了一组功能强大的类,可以方便地对文件进行操作和管理. 1.文件操作相关的类 用于文 ...

  8. taro中自定义tabbar实现中间图标凸出效果

    遇到的一个需求是在tabbar上有一个凸起的小图标, 但是微信自带的tabbar是没有这个效果的, 无奈,只能使用自定义tabbar,查找了多方文档后发现大多是原生小程序实现, 关于taro文档的少之 ...

  9. Fiddler抓取HTTP请求。

    参考链接:http://blog.csdn.net/ohmygirl/article/details/17849983/ http://www.cnblogs.com/kingwolf_JavaScr ...

  10. 04.swoole学习笔记--webSocket服务器

    <?php //创建webSocket服务器 $serv=); //获取请求 //on //open 建立连接 $serv:服务器 $request:客户端信息 $serv->on('op ...