精华内容
下载资源
问答
  • css双飞翼布局

    2020-02-26 23:03:31
    效果图 双飞翼布局的实现 left、center、right三种都设置左浮动 设置center宽度为100% 设置负边距,left设置负边距为100%,right设置负边距为自身宽度 ...这就是比较经典的css双飞翼布局了。 ...

    效果图

    在这里插入图片描述

    双飞翼布局的实现

    1. left、center、right三种都设置左浮动
    2. 设置center宽度为100%
    3. 设置负边距,left设置负边距为100%,right设置负边距为自身宽度
    4. 设置content的margin值为左右两个侧栏留出空间,margin值大小为left和right宽度
      在这里插入图片描述
      在这里插入图片描述
      这就是比较经典的css双飞翼布局了。
    展开全文
  • CSS双飞翼布局

    2019-09-18 06:45:39
    CSS双飞翼布局 此CSS是为了实现三列布局:左右固定,中间自适应;且浏览器会自上而下先出现中间部分。 html: <body> <!-- 使得浏览器先出来center --> <div class="box"...

    CSS双飞翼布局


    此CSS是为了实现三列布局:左右固定,中间自适应;且浏览器会自上而下先出现中间部分。

    html:
    

    <body>
    <!-- 使得浏览器先出来center -->
    <div class="box">
        <div class="center">
            <!-- 创建一个div 开造 -->
            <div class="inner"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    


    CSS:
    

    <style>
        .box {
            width: 100%;
            height: 300px;
            background: darkblue;
            margin: 0 auto;
        }
    
        .center {
            width: 100%;
            height: 100%;
            float: left;
        }
    
        .inner {
            /* width: 100px;
            height: 100%;
            background: darkmagenta; */
            margin: 0;
        }
    
        .left {
            width: 100px;
            height: 100%;
            background: darkgoldenrod;
            float: left;
            margin-left: -100%;
        }
    
        .right {
            width: 100px;
            height: 100%;
            background: darkred;
            float: left;
            margin-left: -100px;
        }
    </style>
    

    最后效果出来是这样的
    此处输入图片的描述

    据说认真阅读并点赞的你,代码敲的最6哦~ 有兴趣的小伙伴可以加我微信,一起讨论;V-x: dandanshen987

    有一天,当你明白"小白" +"勤奋"的时候,你就会成为大牛

    转载于:https://my.oschina.net/u/4130326/blog/3047774

    展开全文
  • 主要介绍了浅谈css双飞翼布局和圣杯布局,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css 双飞翼布局

    2018-02-06 15:01:06
    三栏布局--双飞翼布局 title > < style > * { margin : 0 ; padding : 0 ; } . container { width : 600 px ; height : 200 px ; margin : 0 auto ; box-sizing : border-box ; ...

     原理:1. 三个盒子的都浮动

                2.中间盒子套一个盒子(父元素),width=100%,铺满一行

                3.左侧盒子margin-left=-100%;右侧盒子margin-right=-(右侧盒子的宽度)px,这样将三个哦盒子拉到一排上。

              4.中间盒子的子元素margin-left:左侧盒子的宽度,margin-right:右侧盒子的宽度。


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局--双飞翼布局</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                width: 600px;
                height: 200px;
                margin: 0 auto;
                box-sizing: border-box;
                border: 1px solid red;
            }
            .middle ,.left ,.right{
                float: left;
            }
            .middle{
                width: 100%;
    
            }
            .middle_inner{
                height: 150px;
                background-color: gold;
                margin-left: 100px;
                margin-right: 100px;
            }
            .left{
                width: 100px;
                height: 170px;
                margin-left: -100%;
                background-color: purple;
            }
            .right{
                width: 100px;
                height: 170px;
                margin-left: -100px;
                background-color: pink;
            }
    
        </style>
    </head>
    <body>
    
       <div class="container">
           <div class="middle">
               <div class="middle_inner">中间布局</div>
           </div>
           <div class="left">左侧布局</div>
           <div class="right">右侧布局</div>
       </div>
    
    </body>
    </html>

    展开全文
  • 本篇文章主要介绍介绍了CSS双飞翼布局的两种方式实现示例,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下
  • CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解 网上搜索双飞翼布局和圣杯布局都会有许多不错的文章,在这里给大家推荐一篇博客双飞翼布局和圣杯布局解析!! 补充一点细节的东西!!! 如何理解margin-left:...

    CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解

    注:本文转载自CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解

    网上搜索双飞翼布局和圣杯布局都会有许多不错的文章,在这里给大家推荐一篇博客双飞翼布局和圣杯布局解析!!

    我认为:
    margin-left 以 父元素 左边框 为参照
    margin-right 以 父元素 右边框 为参照
    然后下图中的 margin-left:100% 和 margin-left:300px 都是以当时的左侧边框为参照物的
    w hade

    存疑↓↓↓↓↓
    这里的100%是相对于父元素(container)来说的,(margin-left的意思是子元素的左边框距离父元素右边框的距离,我这里没考虑padding,border等因素哈),如图:

    示意图
    如何理解margin-left:-100%及margin-left:300px;如何理解margin-left:-100%及margin-left:300px;

    展开全文
  • CSS双飞翼布局实例

    2016-08-15 14:36:10
    双飞翼布局 body {background-color: #ffffff; font-size:14px; padding:0; margin:0;} .header, .footer{ padding: 20px 3px; background: #cccccc; text-align: center; } .su
  • 双飞翼布局中,有几点不是很懂,求大神点拨。 1.设置.inner margin-left很好理解,就是要让#inner里面的内容从网页中间开始显示,但是为什么要设置 margin-right呢?(我去掉对布局好像也没影响) 2.对于1 我...
  • 双飞翼布局 双飞翼布局,是一种页面布局的形象的表达。具体表现形式为 两边顶宽,中间自适应宽度的三栏布局,中间栏要放在HTML文档流的最前,优先渲染 实现方式 float 浮动流 页面基本布局很简单,总共有三栏...
  • 双飞翼布局,就是两端固定宽高,中间自适应的三栏布局 先来张图,左边和右边的灰色块是固定宽高的,中间绿色的区域是宽高自适应 方式一:通过flex弹性布局来实现 看代码 //HTML结构,div2是中间的自适应区域 ... &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 663
精华内容 265
关键字:

css双飞翼布局