zoukankan      html  css  js  c++  java
  • 三栏布局

    <!-- <!DOCTYPE html>
    <html lang="en">
    
    <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>
            body {
                margin: 0;
                 100%;
            }
            
            header,
            footer {
                position: absolute;
                top: 0px;
                background: red;
                height: 100%;
            }
            
            header {
                left: 0;
                 100px;
            }
            
            footer {
                right: 0px;
                 200px;
            }
            
            section {
                margin: 0px 100px 200px 0px;
                height: 100%;
                background: blue;
            }
        </style>
    </head>
    
    <body>
        <header>Left</header>
        <section>Main</section>
        <footer>Right</footer>
    </body>
    
    </html> -->
    
    <!-- <!DOCTYPE html>
    <html lang="en">
    
    <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>
            html {
                height: 100%;
                padding: 0;
                margin: 0
            }
            
            body {
                padding-left: 100px;
                padding-right: 200px;
            }
            
            header {
                background: red;
                 100px;
                float: left;
                margin-left: -100%;
                position: relative;
                left: -100px;
                height: 100%;
            }
            
            footer {
                background: red;
                 200px;
                height: 100%;
                float: left;
                margin-left: -200px;
                position: relative;
                right: -200px;
            }
            
            section {
                background: blue;
                 100%;
                height: 100%;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <header>Left</header>
        <section>Main</section>
        <footer>Right</footer>
    </body>
    
    </html> -->
    
    <!-- <!DOCTYPE html>
    <html lang="en">
    
    <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>
            html {
                height: 100%;
                padding: 0;
                margin: 0
            }
            
            body {
                padding-left: 100px;
                padding-right: 200px;
            }
            
            header {
                background: red;
                 100px;
                float: left;
                margin-left: -100%;
                position: relative;
                left: -100px;
                height: 100%;
            }
            
            footer {
                background: red;
                 200px;
                height: 100%;
                float: left;
                margin-left: -200px;
                position: relative;
                right: -200px;
            }
            
            section {
                background: blue;
                 100%;
                height: 100%;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <header>Left</header>
        <section>Main</section>
        <footer>Right</footer>
    </body>
    
    </html> -->
    
    <!DOCTYPE html>
    <html lang="en">
    
    <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>
            html,
            body {
                height: 100%;
                padding: 0;
                margin: 0
            }
            
            header {
                background: red;
                width: 100px;
                float: left;
                height: 100%;
            }
            
            footer {
                background: red;
                width: 200px;
                float: right;
                height: 100%;
            }
            
            section {
                background: blue;
                height: 100%;
                margin: 0px 100px 200px 0px;
            }
        </style>
    </head>
    
    <body>
        <header>Left</header>
        <footer>Right</footer>
        <section>Main</section>
    </body>
    
    </html>
  • 相关阅读:
    关于接口、抽象、普通类之间的选择
    对象与运行时内存
    maven
    ClassLoader
    股票数据调用示例代码php
    猫否股票策略十三篇-1.选股不重要,重在选时
    老枪的59条制胜法则
    今日趁利好出货又套人无数
    判断趋势的最佳指标---趋势大师(源码、主图、附图、说明、无未来、通达信)
    泰禾集团最近走势诡异,小心被机构戏耍了
  • 原文地址:https://www.cnblogs.com/cisum/p/7987438.html
Copyright © 2011-2022 走看看