flex 布局

三栏布局页面不滚动头尾固定中间根据内容自缩放调整 —- ！！！不适应手机端

页面效果
中间多个板块
image.png

中间两个板块
image.png

页面部分

  1.  <div class="a-container">
  2.         <div class="a-header">
  3.          <div class="title"><h3>flex 页面布局</h3></div>
  4.         </div>
  5.         <div class="a-main">
  6.             <div>主题一</div>
  7.             <div>主题二</div>
  8.             <div>主题三</div>
  9.             <div>主题四</div>
  10.         </div>
  11.         <div class="a-footer">
  12.             <div class="copyright"> Copyright © 版权所有 | <span>备案号</span></div>
  13.         </div>
  14.     </div>

样式部分

  1. .a-container {
  2.             display: flex;
  3.             flex-direction: column;
  4.             font: normal 100% Helvetica, Arial, sans-serif;
  5.             margin: 0;
  6.             padding: 0;
  7.             width: 100%;
  8.             height: 100%;
  9.             position: fixed;
  10.             font-family: "Microsoft YaHei", Verdana, Geneva, sans-serif;
  11.             background: #D8A139;
  12.             border: 1px solid #000;
  13.         }
  14.         .a-container > *{padding:10px;flex:1 100%}
  15.         .a-main div,.a-footer div {
  16.             margin: 1em;
  17.         }
  18.         .a-main {
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.             border: 1px solid #000;
  23.         }
  24.         .a-main div {
  25.             border: 1px solid #000;
  26.             background: #0484D7;
  27.             color: #fff;
  28.             padding: 6em;
  29.         }
  30.         .a-header {
  31.             display: flex;
  32.             justify-content: center;
  33.             align-items: center;
  34.             max-height: 10em;
  35.             border: 1px solid #000;
  36.         }
  37.         .a-header .title {
  38.             width: 60%;
  39.             text-align: center;
  40.             font-size: 2em;
  41.             background-color: rgba(185, 185, 185, 0.5);
  42.         }
  43.         .a-footer {
  44.             display: flex;
  45.             justify-content: center;
  46.             align-items: center;
  47.             border: 1px solid #000;
  48.             font-size: .16em;
  49.             background: #000;
  50.             opacity: 0.6;
  51.             border-top: 1px solid rgba(255, 255, 255, 0.4);
  52.             max-height: 4em;
  53.             border: 1px solid #000;
  54.         }
  55.         .copyright span {
  56.             color: #ccc;
  57.         }

自适应页面卡片

image.png

页面部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     body {font-family: sans-serif; }
  10.     p {color: #666;}
  11.     h2 {
  12.       font-size: 1.5em;
  13.       color: #e74c3c;  
  14.     }
  15.     .centered {
  16.         margin: 0 auto;
  17.         padding: 0 1em;
  18.     }
  19.     @media screen and (min-width: 52em) {
  20.         .centered {
  21.             max-width: 52em;
  22.         }
  23.     }
  24.     /* Card Based Layout - Base styles */
  25.     body {
  26.       background: #ecf0f1;
  27.       line-height: 1.4;
  28.     }
  29.     .card {
  30.         background: white;
  31.         margin-bottom: 2em;    
  32.     }
  33.     .card a {
  34.         color: black;
  35.         text-decoration: none;
  36.     }
  37.     .card a:hover {
  38.         box-shadow: 3px 3px 8px hsl(0, 0%, 70%);
  39.     }
  40.     .card-content {
  41.         padding: 1.4em;
  42.       text-align: center;
  43.     }
  44.     .card-content h2 {
  45.         margin-top: 0;
  46.         margin-bottom: .5em;
  47.         font-weight: normal;
  48.     }
  49.     .card-content p {
  50.         font-size: 95%;
  51.     }
  52.     img {
  53.       width: 100%;
  54.       height: auto;
  55.     }
  56.     /* Flexbox styles */
  57.     @media screen and (min-width: 40em) {  
  58.       .cards {
  59.         margin-top: -1em;
  60.         display: flex;
  61.         justify-content: space-between;
  62.         flex-wrap: wrap;
  63.       }
  64.       .card {
  65.         margin-bottom: 1em;
  66.         display: flex;
  67.         flex: 0 1 calc(50% - 0.5em);
  68.         /* width: calc(50% - 1em); */
  69.       }
  70.     } /* mq 40em*/
  72.     @media screen and (min-width: 60em) {
  73.       .cards {
  74.         margin-top: 10%;
  75.       }
  77.       .card {
  78.         margin-bottom: 2em;
  79.         display: flex;
  80.         flex: 0 1 calc(25% - 0.5em);
  81.         /* width: calc(33% - 1em); */
  82.       }
  84.       .card:nth-child(6){
  85.         padding: 0 6em;
  86.       }
  87.     } /* mq 60em*/
  88.     .card:nth-child(1){
  89.     }
  90.     .card:nth-child(2){
  91.     }
  92.     .card:nth-child(3){
  93.     }
  94.     .card:nth-child(4){
  95.     }
  96.     .card:nth-child(5){
  97.     }
  98.     .card:nth-child(6){
  99.     }
  100.     .card:nth-child(7){
  101.     }
  102.    </style>
  103. </head>
  104. <body>
  105.   <main class="main-area">
  107.     <div class="centered">
  109.       <section class="cards">
  111.         <article class="card">
  112.           <a href="#">
  113.             <figure class="thumbnail">
  114.             <img src="https://graph.baidu.com/resource/102e8c3b6a9bdd4d742e201555948681.jpg" alt="meow">
  115.             </figure>
  116.             <div class="card-content">
  117.               <h2>时间查询</h2>
  118.               <p>时间币：570币</p>
  119.             </div>
  120.             <!-- .card-content -->
  121.           </a>
  122.         </article>
  123.         <!-- .card -->
  125.         <article class="card">
  126.           <a href="#">
  127.             <figure class="thumbnail">
  128.               <img src="https://graph.baidu.com/resource/102e8c3b6a9bdd4d742e201555948681.jpg" alt="meow">
  129.             </figure>
  130.             <div class="card-content">
  131.               <h2>订单查询</h2>
  132.             </div>
  133.             <!-- .card-content -->
  134.           </a>
  135.         </article>
  136.         <!-- .card -->
  138.         <article class="card">
  139.           <a href="#">
  140.             <figure class="thumbnail">
  141.               <img src="https://graph.baidu.com/resource/102e8c3b6a9bdd4d742e201555948681.jpg" alt="meow">
  142.             </figure>
  143.             <div class="card-content">
  144.                 <h2>捐赠查询</h2>
  145.             </div>
  146.             <!-- .card-content -->
  147.           </a>
  148.         </article>
  149.         <!-- .card -->
  151.         <article class="card">
  152.           <a href="#">
  153.             <figure class="thumbnail">
  154.               <img src="https://graph.baidu.com/resource/102e8c3b6a9bdd4d742e201555948681.jpg" alt="meow">
  155.             </figure>
  156.             <div class="card-content">
  157.                 <h2>兑换查询</h2>
  158.             </div>
  159.             <!-- .card-content -->
  160.           </a>
  161.         </article>
  162.         <!-- .card -->
  163.         <article class="card">
  164.           <a href="#">
  165.             <figure class="thumbnail">
  166.             <img src="https://graph.baidu.com/resource/102e8c3b6a9bdd4d742e201555948681.jpg" alt="meow">
  167.             </figure>
  168.             <div class="card-content">
  169.                 <h2>网点查询</h2>
  170.             </div>
  171.             <!-- .card-content -->
  172.           </a>
  173.         </article>
  174.         <!-- .card -->
  175.         <article class="card">
  176.           <a href="#">
  177.             <figure class="thumbnail">
  178.             <img src="https://graph.baidu.com/resource/102e8c3b6a9bdd4d742e201555948681.jpg" alt="meow">
  179.             </figure>
  180.             <div class="card-content">
  181.                 <h2>志愿者排行榜</h2>
  182.             </div>
  183.             <!-- .card-content -->
  184.           </a>
  185.         </article>
  186.         <!-- .card -->
  188.         <article class="card">
  189.           <a href="#">
  190.             <figure class="thumbnail">
  191.             <img src="https://graph.baidu.com/resource/102e8c3b6a9bdd4d742e201555948681.jpg" alt="meow">
  192.             </figure>
  193.             <div class="card-content">
  194.                 <h2>物品兑换</h2>
  195.             </div>
  196.             <!-- .card-content -->
  197.           </a>
  198.         </article>
  199.         <!-- .card -->
  201.       </section>
  202.       <!-- .cards -->
  204.     </div>
  205.     <!-- .centered -->
  207.   </main>
  208. </body>
  209. </html>

absolute /relative 页面布局

登录页面制作

效果图

image.png

页面部分

  1. <div class="a-container">
  2.         <div class="a-left"></div>
  3.         <div class="a-right">
  4.            <form action="" class="a-form">
  5.                 <span class="logo">
  6.                         <img src="./src/assets/img/logo.png" />
  7.                 </span>
  8.                 <h3>互联网系统</h3>
  9.                <div>
  10.                    <label>账号
  11.                        <input type="text" placeholder="请输入用户名">
  12.                    </label>
  13.                </div>
  14.                <div>
  15.                     <label>密码
  16.                         <input type="text" placeholder="请输入密码">
  17.                     </label>
  18.                 </div>
  19.                 <div>
  20.                     <label>验证
  21.                         <input type="text" placeholder="请输入验证码">
  22.                     </label>
  23.                     </div>
  24.                 <div>
  25.                     <input type="button" value="点击登陆"></input>
  26.                 </div>
  27.            </form>
  28.         </div>
  29.     </div>

Css 样式部分

  1. .a-container {
  2.             background-color: #050714;
  3.             width: 99%;
  4.             height: 100%;
  5.             position:absolute;
  6.             margin: -8px;
  7.             padding: 0;
  8.         }
  9.         .a-left {
  10.             background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1020949186,1164682391&fm=26&gp=0.jpg) no-repeat 0 0 / 100% 100%;
  11.             width: 51.6%;
  12.             height: 75.6%;
  13.             position: relative;
  14.             top: 14%;
  15.             left: 9.5%;
  16.         }
  17.         .a-right {
  18.             display: flex;
  19.             background-color: #a8a5ae;
  20.             justify-content: center;
  21.             align-items: center;
  22.             width: 23.98%;
  23.             height: 75.8%;
  24.             position: relative;
  25.             top: -61.6%;
  26.             left: 61.11%;
  27.         }
  28.         .a-form {
  29.             font: normal 100% Helvetica, Arial, sans-serif;
  30.             font-size: .14em;
  31.             border: 1px solid  rgba(4, 131, 215, 0.116);
  32.             padding: 2em;
  33.             height: 75.8%;
  34.             width:100%; 
  35.             position: relative;
  36.             text-align: center;
  37.         }
  38.         .a-form h3 {
  39.             font-size: 14em;
  40.             text-align: center;
  41.         }
  42.         .a-form div {
  43.             padding-bottom: 1.5em;
  44.         }
  45.         input[type='text'] {
  46.             border: none;
  47.             border-bottom: 1px dotted  rgba(105, 107, 107, 0.418);
  48.            height: 2em;
  49.            color: #eee;
  50.            padding: .2em;
  51.         }
  52.         input[type='button'] {
  53.             width: 70%;
  54.             background: #0484D7;
  55.             color: #fff;
  56.             border: none;
  57.             border-radius: .4em;
  58.             padding: .4em;
  59.         }
  60.         .logo img {
  61.             width: 30%;
  62.             padding-bottom: .1em;
  63.         }
  64.         @media screen and (max-width: 1200px) { 
  65.             .a-left {
  66.                 width: 0%;
  67.             }   
  68.             .a-right {
  69.                 width: 80%;
  70.                 left: 9.5%;
  71.             }
  72.             .a-form {
  73.                 width:60%; 
  74.             }
  75.         }

垂直剧中 

  1. .main {
  2.             display: relative
  3.         }
  5.         .item {
  6.             transform: translate(-50%, -50%);
  7.             position: absolute;
  8.             top: 50%;
  9.             left: 50%;
  10.             background: #eee;
  11.         }
  12.         <div class="main">
  13.         <div class="item">item</div>
  14.     </div>

新时代布局

女神讲解连接 链接

经典布局案例

瀑布流布局

页面结构

  1. <div class="wrapper-container">
  2.   <div class="item"></div>
  3. </div>

CSS 样式

  1. .wrapper-container {
  2.   column-count: 2;
  3.   column-gap: 1vw;
  4.   padding-top: 1vw;
  5. }
  6. .item {
  7.   padding: 2vw;
  8.   border: 1px solid #dddfe4;
  9.   border-radius: 3px;
  10.   position: relative;
  11.   margin-bottom: 1vw;
  12.   break-inside: avoid;
  13. }