CSS双飞翼布局实例

深碍√TFBOYSˉ_ 2022-09-25 06:22 166阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {background-color: #ffffff; font-size:14px; padding:0; margin:0;}
        .header,
        .footer{ 
    		padding: 20px 3px;
            background: #cccccc;
            text-align: center;
        }
        .sub,
        .main,
        .extra{ 
            float: left;
            min-height: 130px;
        }
        .sub{
            margin-left: -100%;
            width: 200px;
            background:#44fa44;
        }
        .extra{
            margin-left: -220px;
            width: 220px;
            background:#00bcd4;
        }
        .main{ 
            width: 100%;
        }
        .main-inner{ 
            margin-left: 200px;
            margin-right: 220px;
            min-height: 130px;
            background:#03a9f4;
            word-break: break-all;
        }
        .footer{ 
            clear: both;
        }
    </style>
    </head>
    
    <body>
    <div class="header">header</div>
        <div class="main">
        	<div class="main-inner">main</div>
        </div> 
        <div class="sub">sub</div>
        <div class="extra">extra</div>
        <div class="footer">footer</div>
    </body>
    </html>

![20160815143501609][]

[20160815143501609]: /images/20220718/169e250a49374c779f7e6cd0dc00912e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关双飞翼布局

<style> * { margin: 0; padding: 0; ...

忘是亡心i/ 2024年04月19日 11:33/ 0 赞/ 69 阅读

相关 css经典布局——双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 [《In Search of the Holy Grail》][In Search of

客官°小女子只卖身不卖艺/ 2022年12月06日 04:18/ 0 赞/ 171 阅读

相关 css圣杯布局和双飞翼布局_CSS布局和格式

css圣杯布局和双飞翼布局 While CSS1 didn’t have much to offer for the graphical layout of document

深藏阁楼爱情的钟/ 2022年12月03日 11:25/ 0 赞/ 207 阅读

相关 [CSS]双飞翼布局

题目要求： 1.分为三个部分，左中右，先加载中间 2.左右宽为200px，中间自适应答案源码： <!DOCTYPE html> <html lan

电玩女神/ 2022年11月26日 05:59/ 0 赞/ 162 阅读

相关 CSS双飞翼布局实例

<!doctype html> <html> <head> <meta charset="utf-8"> <title>双飞翼布局</t

深碍√TFBOYSˉ_/ 2022年09月25日 06:22/ 0 赞/ 167 阅读

相关 css-圣杯布局和双飞翼布局

1.圣杯布局：（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第

淩亂°似流年/ 2022年05月29日 12:35/ 0 赞/ 248 阅读

相关 2.3双飞翼布局

圣杯布局的改进版 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

清疚/ 2022年05月08日 12:46/ 0 赞/ 184 阅读

相关 CSS 圣杯布局 / 双飞翼布局的实现

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

爱被打了一巴掌/ 2022年02月02日 06:15/ 0 赞/ 299 阅读

相关 CSS三栏布局：圣杯布局、双飞翼布局

其实三栏布局比较简单，而且方法也有很多。今天了解了一下传统的三栏布局方法：圣杯布局、双飞翼布局，本文简单记录一下。所谓三栏布局，通常是指左右两栏定宽，中间一栏自适应页面宽

爱被打了一巴掌/ 2022年01月17日 11:07/ 0 赞/ 319 阅读

相关双飞翼布局

[圣杯布局][Link 1] [圣杯+伪等高][Link 2] 目录第一步第二步第三步第四步全部代码双飞翼布局+伪等

迷南。/ 2021年08月28日 20:22/ 0 赞/ 375 阅读