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>
  • 相关阅读:
    IT常用英文术语解释发音
    大数据公司宣传语 公司文化企业文化
    vue 开发环境搭建,超级简单仅需3步。
    Mvc action间的传值
    获取文件路径
    WebStorm注册码
    webstrom快捷键
    Nuget-使用图形化界面打包自己的类库
    使用StyleCop进行代码审查
    InstallShield Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序)
  • 原文地址:https://www.cnblogs.com/cisum/p/7987438.html
Copyright © 2011-2022 走看看