精华内容
下载资源
问答
  • 双飞翼布局
    2021-06-29 05:25:26

    # 双飞翼布局

    最常见的双飞翼布局实现方法。

    ## 需求

    双飞翼布局左中右三列布局,渲染顺序中间列书写在前保证提前渲染,左右两列定宽,中间列自适应剩余宽度。

    双飞翼布局与圣杯布局的不同之处,圣杯布局的的左中右三列容器,中间middle多了一个子容器存在,**通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度**。

    ## 关键点

    * 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置,通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度

    * 双飞翼布局的关键点父元素不需要设置 padding

    * 双飞翼布局的关键点 margin-left 取值为百分比时,是以其父元素的宽度为基准的

    ## 实现

    ```

    双飞翼布局

    body {

    margin: 0;

    }

    div {

    height: 150px;

    }

    .container {

    overflow: hidden;

    }

    .left, .right, .middle {

    margin-bottom: -9999px;

    padding-bottom: 9999px;

    }

    .left {

    float: left;

    margin-left: -100%;

    width: 300px;

    background: orange;

    }

    .right {

    float: left;

    margin-left: -200px;

    width: 200px;

    background: orange;

    }

    .middle {

    float: left;

    width: 100%;

    background: yellow;

    }

    .middle .inner {

    margin-left: 300px;

    }

    123

    ```

    # 参考资料

    [CSS Inspiration -- CSS灵感](https://chokcoco.github.io/CSS-Inspiration/#/./layout/double-wing-layout)

    京城一灯

    更多相关内容
  • 双飞翼布局和圣杯布局  网页开发中,经常会遇见左中右垂直三栏的布局方式,两侧结构宽度固定,中间自适应,有时候需要优先加载中间区域,那么便在DOM结构上便有所要求,需要中间区域在前,左右区域在后。  首先三...
  • 说起网站布局,之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样,把各种需要的组件一摆,然后设个宽高给个定位不就...而今天我们的主题,“双飞翼布局”与“圣杯布局”就是一个两边固定,中间宽度自适应,并
  • 主要介绍了css多种方式实现双飞翼布局的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css实现三栏布局---双飞翼布局和圣杯布局

    圣杯布局

    两侧宽度固定,中间宽度自适应的三栏布局

    • 两侧宽度固定,中间宽度自适应
    • 中间一栏需要先渲染,所以dom结构上优先
    • 一个额外的div标签

    圣杯布局的dom结构

    <div id="header">HEADER</div>
    <div id="container">
      <div id="center" class="column">center</div>
      <div id="left" class="column">left100</div>
      <div id="right" class="column">right150</div>
    </div>
    <div id="footer">FOOTER</div>
    

    初始的css,给每个块设置颜色区分,左边栏设置宽度为100px,右边栏宽度为150px。

    div{
      text-align:center;
    }
    #header{
      width: 100%;
      background-color: #c9c9c9;
    }
    #footer{
      width: 100%;
      background-color: #c9c9c9;
      clear:both;
    }
    #center{
      width:100%; 
      background-color: pink;
    }
    #left{
      width: 100px;
      background-color: green;
    }
    #right{
      width: 150px;
      background-color: red;
    }
    .column{
      float:left;
    }
    

    初始结构

    根据左右栏设置的宽度,给容器container设置内边距,因为center栏width:100%,参考的是父容器的宽度。中间栏的宽度随着父容器设置内边距而缩小,效果如下图。

    #container{
      padding-left:100px;
      padding-right:150px;
    }
    

    父容器设置内边距之后

    么接下来就是将左右栏放到center两边,三栏都浮动,使用外边距负值来移动。

    因为浮动,上一行空间不够,left和right被挤下来了。

    个人是这样理解:

    1.首先 ****浮动原理:****将盒子移到一边,直到碰到左边缘或者右边缘碰到包含块或者另一个浮动框的边缘。

    2.所以left实际是紧贴center的最右边。

    给左栏设置margin-left: -100%; 这里的100%是参照父元素宽度,也就是center的宽度,所以现在左栏跑到center最左边,如下图

    #left{
      width: 100px;
      background-color: green;
      margin-left: -100%;
    }
    

    左栏外边距负值

    现在左边栏离左边还有100px的距离(container的内边距所致),这里设置定位+偏移即可。

    #left{
      position: relative;
      right:100px;
      width: 100px;
      background-color: green;
      margin-left: -100%;
    }
    

    左边栏完成

    最后剩下右边栏,此时右边栏是紧贴center这个浮动边框的边缘,这里右边栏有两种方法。

    1.可以设置margin-left负值 + 定位 (与上面左栏同理可以实现)。

    2.也可以直接设置margin-right 。

    这里实现第二种方法

    #right{
      width: 150px;
      background-color: red;
      margin-right:-150px;
    }
    

    为什么margin-right:-150px可以呢?

    个人理解是:原本右边栏就是因为上一行宽度不够,被挤下来了,所以使用margin-right:-150px,右边栏此时宽度可以理解为被压缩为0.

    所以就能和center在同一行,刚好之前设置padding预留了距离,就实现了效果。

    右边栏压缩

    最终效果:
    最终效果.png

    最后附上完整的css

    body {
        min-width: 350px;
      /*最后保证布局正常,给body设置最小宽度 */
    }
    div{
      text-align:center;
    }
    #header{
      width: 100%;
      background-color: #c9c9c9;
    }
    #footer{
      width: 100%;
      background-color: #c9c9c9;
      clear:both;
    }
    #container{
      padding-left:100px;
      padding-right:150px;
    }
    #center{
      width:100%; 
      background-color: pink;
    }
    #left{
      position: relative;
      right:100px;
      width: 100px;
      background-color: green;
      margin-left: -100%;
    }
    #right{
    /*   position: relative;
      left:150px; */
      width: 150px;
      background-color: red;
    /*   margin-left: -150px; */
      margin-right:-150px;
    }
    .column{
      float:left;
    }
    
    

    双飞翼布局

    双飞翼布局和圣杯布局结构略有差异,如下

     <div id="header">header</div>
      <div id="container" class="column">
        <div id="center">center</div>
      </div>
      <div id="left" class="column">left100 </div>
      <div id="right" class="column">column150</div>
      <div id="footer">footer</div>
    

    完整css如下所示,思路其实和圣杯布局差不多。不同的是将center单独用container包裹。并对container设置浮动而不是center。

    1、center继承container的宽度,然后center设置外边距,留出左右两栏的空间。

    2、左栏紧贴container浮动盒子的最右侧,因为空间不够被挤下来,所以设置margin-left:-100%; 即可

    3、至此右边栏紧贴container浮动盒子的最右侧,只需要移动右栏自身即可,所以margin-left:-150px;

    #container {
      width: 100%;
    }
    
    .column {
      float: left;
    }
    
    #center {
      margin-left: 100px;
      margin-right: 150px;
      background-color: pink;
    }
    
    #left {
      width: 100px; 
      background-color: green;
      margin-left:-100%;
    }
    
    #right {
      width: 150px; 
      background-color: red;
      margin-left:-150px;
    }
    
    #footer {
      clear: both;
      background-color: #c9c9c9;
    }
    #header{
      background-color: #c9c9c9;
    }
    

    总结:

    两种布局都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局

    • 两侧宽度固定,中间宽度自适应
    • 中间部分在DOM结构上优先,以便先行渲染
    • 允许三列中的任意一列成为最高列
    • 实现中间自适应都参考到父盒子的width,使用到float+margin来实现

    优缺点

    但是都不可避免的新增一个

    便签来控制center宽度。

    圣杯布局还是用了定位+位移,代码较复杂。但是dom结构清晰

    双飞翼布局,不需要使用定位,换来dom结构的不友好。

    其他实现方式:

    1、clac()calc()支持到IE9

    在双飞翼布局的思路,去掉多余的div,直接设置center浮动

    <div id="header"></div>
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
    <div id="footer"></div>
    
    #center {
      margin-left: 100px;
      margin-right: 150px;
      width: calc(100% - 250px);
    }
    

    2、flex

    flex的dom结构和圣杯布局一样

    <div id="container1">
      <div id="center1">center</div>
      <div id="left1">left100</div>
      <div id="right1">right150</div>
    </div>
    

    主要使用order:-1,实现左栏靠左。

    #container1{
      display:flex;
    }
    #center1{
        flex:1;
       background-color: pink;
    }
    #left1{
      flex:0 0 100px;
      background-color: green;
      order:-1;
    }
    #right1{
      flex:0 0 150px;
       background-color: red;
    }
    

    相关文章:https://www.jianshu.com/p/81ef7e7094e8

    展开全文
  • 实现双飞翼布局

    2021-12-06 22:42:35
    现如今,很多web端的应用,他们的布局方式都是圣杯布局和双飞翼布局,既然用到的这么多,那么,双飞翼布局是如何实现的呢?带着这个问题,咱们一起把他说道说道 双飞翼布局的实现方式一、(position+margin+float...

            说到圣杯布局和双飞翼布局,始终都是面试的高频考点,问题方式也大同小异,比如,实现一个左右固定,中间自适应的布局;实现一个中间部分优先加载的布局……

            现如今,很多web端的应用,他们的布局方式都是圣杯布局和双飞翼布局,既然用到的这么多,那么,双飞翼布局是如何实现的呢?带着这个问题,咱们一起把他说道说道

    双飞翼布局的实现方式一、(position+margin+float)

            首先我们从上面简介部分得知,双飞翼布局是一个两边固定,中间自适应的布局,并且中间部分还可以优先加载,那么从此条消息中,我们可以构想出一个HTML结构,结构如下

    <body>
        <div class="box">
          <div class="header">header</div>
          <div class="main">
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">right</div>
          </div>
          <div class="footer">footer</div>
        </div>
      </body>

    下面我们来一步步实现css部分

            1. 首先我们把基础的东西写好 ,在这里为了样式的好看,将box容器的宽度调整到了80%,并用margin-left给他实现了居中(其中实现居中的方式有很多很多很多种,对居中不太熟悉的同学可以自行百度下)

    .box {
      width: 80%;
      margin-left: 10%;
    }
    .header {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aqua;
      font-weight: 600;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aquamarine;
      font-weight: 600;
    }
    
    .main {
      height: 150px;
    }
    
    .center {
      width: 100%;
      height: 150px;
      background-color: red;
    }
    
    .left {
      width: 150px;
      height: 150px;
      background-color: royalblue;
    }
    .right {
      width: 150px;
      height: 150px;
      background-color: sandybrown;
    }
    

    效果图:

    注意:center的宽度一定要设置为100%

     2. 让center,left,right都设置为左浮动。这时因为center设置了宽度100%,所以left和right被“挤”到了下面

    .box {
      width: 80%;
      margin-left: 10%;
    }
    .header {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aqua;
      font-weight: 600;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aquamarine;
      font-weight: 600;
    }
    
    .main {
      height: 150px;
    }
    
    .center {
      float: left;
      width: 100%;
      height: 150px;
      background-color: red;
    }
    
    .left {
      float: left;
      width: 150px;
      height: 150px;
      background-color: royalblue;
    }
    .right {
      float: left;
      width: 150px;
      height: 150px;
      background-color: sandybrown;
    }
    

    效果图:

    3. 现在我们项让left和right变到上面去,即跟center在同一行,但是呢,center的宽度为100% ,没有left和right的空间了,怎么办呢?我们可以先通过给main加padding,把left和right的空间预留出来,这里有一个需要注意的点。如果一个元素,同时设置了width和padding的话,盒子的总宽度会增加,什么意思呢,看下面这张图

    代码:

    .main {
      height: 150px;
      width: 100%;
      padding: 0 150px;
    }
    /* 这里相对于上面的代码,我只对main进行了更改 */

    效果图:

     但是呢,如果只存在padding,没有width的话,效果图是这样的

    对于padding和width的关系。不懂的同学可以自行百度查一下(博主有点懒。。。。),到这里,是不是发现,我们已经预留出来了right和left的位置!!

    4. 我们将left和right移动到我们预留出来的位置,这里用到了-margin

     

    .box {
      width: 80%;
      margin-left: 10%;
    }
    .header {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aqua;
      font-weight: 600;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aquamarine;
      font-weight: 600;
    }
    
    .main {
      height: 150px;
      padding: 0 150px;
    }
    
    .center {
      float: left;
      width: 100%;
      height: 150px;
      background-color: red;
    }
    
    .left {
      float: left;
      margin-left: -100%;
      width: 150px;
      height: 150px;
      background-color: royalblue;
    }
      float: left;
      margin-left: -150px;
      width: 150px;
      height: 150px;
      background-color: sandybrown;
    }
    

    效果图:

    这里,同学有没有发现一个问题,left和right把center的左右两端挡住了(center这个文案不见了),思考下怎么解决,答案马上揭晓

     是的!!!就是position属性,给他加定位!!!分别向左向右移动自身大小!!!

     最终代码如下

    .box {
      width: 80%;
      margin-left: 10%;
    }
    .header {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aqua;
      font-weight: 600;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aquamarine;
      font-weight: 600;
    }
    
    .main {
      height: 150px;
      padding: 0 150px;
    }
    
    .center {
      float: left;
      width: 100%;
      height: 150px;
      background-color: red;
    }
    
    .left {
      position: relative;
      left: -150px;
      float: left;
      margin-left: -100%;
      width: 150px;
      height: 150px;
      background-color: royalblue;
    }
    .right {
      position: relative;
      left: 150px;
      float: left;
      margin-left: -150px;
      width: 150px;
      height: 150px;
      background-color: sandybrown;
    }
    

    效果图:

    到这里,一个两边固定,中间自适应,并且中间优先加载的双飞翼布局就完成了!!!!!!

     

    双飞翼布局的实现方式二、(flex)

            其实,flex布局很简单,因为flex本身的定义就是弹性盒,他有一个属性flex:1,就是专门解决自适应问题的,如果对flex不熟悉的同学可以戳   flex:1是什么?_CSDN_156的博客-CSDN博客   这篇文章(别问为什么这里有链接,问就是博主给自己做宣传哈哈哈哈哈哈~),废话不多说,代码如下

    .box {
      width: 80%;
      margin-left: 10%;
    }
    .header {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aqua;
      font-weight: 600;
    }
    .footer {
      clear: both;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: aquamarine;
      font-weight: 600;
    }
    
    .main {
      height: 150px;
      display: flex;
    }
    
    .center {
      flex: 1;
      display: flex;
      background-color: red;
    }
    
    .left {
      /* order order默认为0,不起作用,从小到大排序,1在前,以此类推 */
      order: -1;
      flex-basis: 150px;
      background-color: royalblue;
    }
    
    .right {
      flex-basis: 150px;
      background-color: rgb(195, 196, 195);
    }
    

    效果图:

    最后!有哪位好心的同学能教教我CSDN怎么放GIF的动图呢,可以私信教教我!!感激不尽

    the last, 创作不易,如果这篇文章对您有些许帮助,请留下您的赞~感激不尽!!!

    深夜创作,临表涕零,不知所言~~ 

    展开全文
  • 圣杯布局与双飞翼布局

    圣杯布局与双飞翼布局

    • 圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)

    圣杯布局-Example

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="referrer" content="origin" />
        <meta property="og:description" content="圣杯布局" />
        <meta http-equiv="Cache-Control" content="no-transform" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>圣杯布局</title>
    </head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
    
        html,
        body {
            padding: 0;
            margin: 0;
        }
    
        body {
            min-width: 550px;
        }
    
        * {
            margin: 0;
            padding: 0;
        }
    
        .header,
        .footer {
            background: gray;
            width: 100%;
        }
    
        .footer {
            clear: both;
        }
    
        .main {
            height: 200px;
            padding: 0 150px 0 200px;
            background: greenyellow;
            *zoom: 1;
        }
    
        .left,
        .center,
        .right {
            float: left;
        }
    
        .center {
            width: 100%;
            height: 200px;
            background: red;
        }
    
        .left {
            width: 200px;
            height: 200px;
            background: yellow;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
    
        .right {
            width: 150px;
            height: 200px;
            background: gainsboro;
            margin-left: -150px;
            position: relative;
            left: 150px;
            }
    </style>
    
    <body>
        <div class="header">
            头部
        </div>
        <div class="main">
            <div class="center">中间中间中间中间中间中间中间后</div>
            <div class="left">左边</div>
            <div class="right">右边</div>
        </div>
        <div class="footer">
            底部
        </div>
    </body>
    
    </html>
    

    双飞翼布局-Example

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="referrer" content="origin" />
        <meta property="og:description" content="双飞翼布局" />
        <meta http-equiv="Cache-Control" content="no-transform" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>双飞翼布局</title>
    </head>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    
        .main>div {
            float: left;
        }
    
        .left {
            width: 200px;
            background: red;
            margin-left: -100%;
        }
    
        .right {
            width: 200px;
            background: blue;
            margin-left: -200px;
        }
    
        .middle {
            width: 100%;
            background: yellow;
    
        }
    
        .content {
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
    <body>
        <div class="main">
            <div class="middle">
                <div class="content">
                    中间
                </div>
            </div>
            <div class="left">
                左边
            </div>
            <div class="right">
                右边
            </div>
        </div>
    </body>
    </html>
    

    优点

      1. 兼容性好,兼容若有主流浏览器,包括万恶的IE6
      1. 可以实现主要内容的优先加载

    额外知识点

    • 其实三列布局的方式还有很多 ,但也有各自的缺点
    • 1.如果左右两列用position: absolute定位布局做外层设计需要有个包含块设置(否则是相对浏览器可视区域)这样会层级,页面控制相对麻烦
    • 2.用浮动布局的话, 中间层要做到先加载实现不了
    • 3.flex布局低版本浏览器有些还不支持

    Thinking in JackDan

    展开全文
  • 双飞翼布局,就是两端固定宽高,中间自适应的三栏布局 先来张图,左边和右边的灰色块是固定宽高的,中间绿色的区域是宽高自适应 方式一:通过flex弹性布局来实现 看代码 //HTML结构,div2是中间的自适应区域 ... &...
  • 双飞翼布局详解

    千次阅读 2022-03-21 22:40:04
    双飞翼布局为了让中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该div里用margin-left和margin-right为左右两栏div留出位置。 css代码: .header,.footer{ height: 200px; width: 100...
  • 双飞翼布局分为 左,中,右三个部分。 左右宽度固定,中间部分自适应三个部分通过按顺序向左浮动实现。 效果: 设置父元素相对布局,用来实现内部元素的绝对布局。 效果: 将注释内的内容加上: 作用是 1.盒模型的...
  • 按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。 圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 1.将三者都设置 float...
  • 主流布局--双飞翼布局

    千次阅读 2021-01-13 20:33:50
    主流布局–双飞翼布局 什么是双飞翼布局双飞翼布局最早是淘宝团队提出的,是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。 HTML <div class="parent"> <div class="center">...
  • 双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式,最近在整理三栏布局实现方式的笔记,决定但拉出来一篇,记一下这两个经典布局。 1、圣杯布局 浮动、负边距、相对定位、不添加额外标签 效果图 ...
  • Flex布局 (弹性盒布局) 1、flex弹性盒布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列...
  • 本质:三列布局,左右两边固定,中间自适应且优先加载 优先加载:主区域标签写在最前面 float + margin负值+relative/添加盒子 前期准备 1.三个区域的盒子向左浮动:三栏在一行显示 问题:出现高度塌陷 原因:父元素的...
  • 前端双飞翼布局

    2022-01-03 15:34:26
    双飞翼布局,圣杯布局都是会在面试的时候会问到的,我们重点来说一下双飞翼布局吧 1,首先我们先看一下盒子的是怎么摆放的,这个圣杯布局不同的是,是center,right,left盒子是同级的,在center盒子里单独设置...
  • html布局双飞翼布局

    2022-02-02 19:45:04
    initial-scale=1.0"> 双飞翼自适应布局title> <style> body{ margin: 0; padding: 0; } .container{ width: 100%; overflow: hidden;/*清除浮动 */ } .common{ float: left; height: 200px; } .center{ background-...
  • CSS 三列布局 - 双飞翼布局 双飞翼布局是在圣杯布局上做了优化,解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上,再在内容区添加一层新的盒子,该盒子通过外边距将内容与两边的浮动元素分隔开...
  • 这是一道经典的面试题,常用的方法是:圣杯布局、双飞翼布局。相信看完这篇文章,你就能很清楚的知道什么是圣杯和双飞翼了。圣杯布局首先,我们先定义HTML结构:中间的左边的右边的再来开始我们的布局,首先给这三个...
  • 本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。圣杯布局、双飞翼布局效果图从效果图来看圣杯布局、双飞翼布局效果是一样...
  • 双飞翼布局(css)

    2021-10-27 21:43:11
    1. DOM结构 双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center,另外将.column类从center移至container上。 2. CSS代码 按照与圣杯布局相同的思路,首先设置各列的宽度与浮动,并且为左右两列预留出...
  • css实现双飞翼布局

    2022-05-23 14:22:00
    css实现双飞翼布局-布局从上到下分为 header、container、footer,然后 container 部分定为三栏布局。这种布局方式同样分为 left、center、right。给 center 部分包裹了一个 center-inbox 通过设置 margin 主动地把...
  • 浮动实现双飞翼布局

    2022-01-18 15:13:24
    浮动实现双飞翼布局
  • 文章目录引言圣杯布局圣杯布局DOM结构圣杯布局样式圣杯布局总结双飞翼布局双飞翼布局DOM结构双飞翼布局样式双飞翼布局总结总结 引言 圣杯布局和双飞翼布局都是比较经典的三栏布局,两种布局的页面效果基本相同。两种...
  • 双飞翼布局,左右固定,中间自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,536
精华内容 2,214
关键字:

双飞翼布局

友情链接: threebody.zip