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,maximum-scale=1.0,minimum=1.0,user-scalable=no">
    <title>Document</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    html, body {
    height: 100%;
    }

    .header {
    height: 40px;
    position: absolute;
    top: 0;
    background: yellow;
    100%;
    }

    .main {
    background: #ccc;
    position: absolute;
    top: 40px;
    bottom: 60px;
    overflow: auto;
    100%;
    }

    .inner {
    height: 800px;
    }

    .footer {
    100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    background: black;
    }
    </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="main">
    <div class="inner">
    dddddddddddddddd
    dddddddddddddddd
    </div>
    </div>
    <div class="footer"></div>
    </body>
    </html>

    未知布局?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html, body {
    height: 100%;
    }

    .header {
    height: 40px;
    }

    .main {
    height: 400px;
    background: #ccc;
    position: relative;
    }

    .left {
    200px;
    float: left;
    height: 100%;
    background: black;
    margin-left: -100%;
    }

    .middle {
    height: 100%;
    100%;
    background: orange;
    float: left;
    padding: 0 200px;
    box-sizing: border-box;
    }

    .right {
    height: 100%;
    200px;
    float: left;
    background: blue;
    margin-left: -200px;
    }
    .footer {
    height: 60px;
    }
    </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="main">
    <div class="middle">sdfsdfsdfsdfsdfsfsdfsdf</div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <div class="footer"></div>
    </body>
    </html>

    圣杯布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    html, body {
    height: 100%;
    }

    .header {
    height: 40px;
    }

    .main {
    height: 400px;
    background: #ccc;
    padding: 0 200px;
    }

    .left {
    200px;
    float: left;
    height: 100%;
    background: black;
    margin-left: -100%;
    position: relative;
    left: -200px;
    }

    .middle {
    height: 100%;
    100%;
    background: orange;
    float: left;
    }

    .right {
    height: 100%;
    200px;
    float: left;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -200px;
    }
    .footer {
    height: 60px;
    }
    </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="main">
    <div class="middle">sdfsdfsdfsdfsdfsfsdfsdf</div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <div class="footer"></div>
    </body>
    </html>

    双飞翼布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    html, body {
    height: 100%;
    }

    .header {
    height: 40px;
    }

    .main {
    height: 400px;
    background: #ccc;
    }

    .left {
    200px;
    float: left;
    height: 100%;
    background: black;
    margin-left: -100%;
    }

    .middle {
    height: 100%;
    100%;
    background: pink;
    float: left;
    }

    .wrapper {
    background: orange;
    height: 100%;
    padding: 0 200px;
    }

    .right {
    height: 100%;
    200px;
    float: left;
    background: blue;
    margin-left: -200px;
    }
    .footer {
    height: 60px;
    }
    </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="main">
    <div class="middle">
    <div class="wrapper">sssssssssssssssssssssss</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <div class="footer"></div>
    </body>
    </html>

  • 相关阅读:
    C# 关键字 default
    nopCommerce_3.00-Nop.Core.Caching
    汉字转拼音
    ASP.NET MVC性能调试工具-MvcMiniProfiler
    开源项目
    UVA 11374 Airport Express 最短路
    UVA 10319 Manhattan 2-sat
    UVA 1357 Cells
    UVA 610 Street Directions 双连通分量
    UVA 11504 Dominos 强连通分量
  • 原文地址:https://www.cnblogs.com/xuzishuai/p/9083762.html
Copyright © 2011-2022 走看看