zoukankan      html  css  js  c++  java
  • html---三列布局

    三列布局 1一

    1.两边固定 当中自适应
    2.当中列要完整显示
    3.当中列要优先加载

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
    
            <style type="text/css">
                
                *{
                    margin: 0;
                    padding: 0;
                }
                body{
                    /*2*left+right*/
                    min- 600px;
                }
                div{
                    height: 100px;
                }
                #left,#right{
                     200px;
                    background: pink;
                }
                #left{
                    float: left;
                }
                #right{
                    float: right;
                }
                #middle{
                    background: deeppink;
                }
            </style>
        </head>
        <body>
            <div id="middle">middle</div>
            <div id="left">left</div>
            <div id="right">right</div>
        </body>
    </html>

    -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    三列布局2二

    1.两边固定 当中自适应
    2.当中列要完整显示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
    
            <style type="text/css">
                
                *{
                    margin: 0;
                    padding: 0;
                }
                body{
                    /*2*left+right*/
                    min- 600px;
                }
                div{
                    height: 100px;
                }
                #left,#right{
                     200px;
                    background: pink;
                }
                #middle{
                    background: deeppink;
                    padding: 0 200px;
                }
                #left{
                    position: absolute;
                    left: 0;
                    top: 0;                
                }
                #right{
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            </style>
        </head>
        <body style="position: relative;">
            <div id="left">left</div>
            <div id="middle">middle</div>
            <div id="right">right</div>
        </body>
    </html>

  • 相关阅读:
    gzip是一种数据格式,deflate是一种压缩算法
    js 实现图片上传 续
    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
    HTTPS简介----
    回归测试
    HTTP 返回码 400
    js 实现 一张图片的上传
    121. Best Time to Buy and Sell Stock
    119. Pascal's Triangle II
    118. Pascal's Triangle
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11748148.html
Copyright © 2011-2022 走看看