zoukankan      html  css  js  c++  java
  • 几种常见的css布局_l流体布局、圣杯布局、双飞翼布局

    1.流体布局:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>流体布局</title>
    <style type="text/css">
    .left {
    float: left;
    100px;
    height: 200px;
    background: red;
    }
    .right {
    float: right;
    200px;
    height: 200px;
    background: blue;
    }
    .main {
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background: green;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
    </div>
    </body>
    </html>

    2.圣杯布局:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style type="text/css">
    .container {
    margin-left: 120px;
    margin-right: 220px;
    }
    .main {
    float: left;
    100%;
    height:300px;
    background: green;
    }
    .left {
    position: relative;
    left: -120px;
    float: left;
    height: 300px;
    100px;
    margin-left: -100%;
    background: red;
    }
    .right {
    position: relative;
    right: -220px;
    float: right;
    height: 300px;
    200px;
    margin-left: -200px;
    background: blue;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    </div>
    </body>
    </html>

    3.双飞翼布局:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>双飞翼布局</title>
    <style type="text/css">
    .content {
    float: left;
    100%;
    }
    .main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background: green;
    }
    .main::after {
    content: '';
    display: block;
    font-size:0;
    height: 0;
    zoom: 1;
    clear: both;
    }
    .left {
    float:left;
    height: 200px;
    100px;
    margin-left: -100%;
    background: red;
    }
    .right {
    float: right;
    height: 200px;
    200px;
    margin-left: -200px;
    background: blue;
    }
    </style>
    </head>
    <body>
    <div class="content">
    <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    </body>
    </html>

  • 相关阅读:
    最通俗易懂的技术解读
    laya学习查漏补缺
    vue+webpack实现懒加载的三种方式
    web安全防范策略
    http/1.x、http/2与https的区别、以及http3
    设备检测
    移动端调试利器------微信开源项目
    SqlConnection 在linux 连接 mssql 挂起的问题。
    rabbitmq 启用日志跟踪
    使用脚本把.net core 程序部署到 docker 容器中
  • 原文地址:https://www.cnblogs.com/robot666/p/11249721.html
Copyright © 2011-2022 走看看