zoukankan      html  css  js  c++  java
  • 骰子的布局(flex)

    骰子的布局(一个点)

    <!DOCTYPE html>            
    <html>            
    <head>            
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">      
        <title>骰子的布局(flex)</title>          
        <style type="text/css">    
            body{margin: 0}  
    
            .m-container{margin: 5px; padding: 5px; 100px;height: 100px;border:1px solid green;}
            .m-item {margin: 5px;  20px;height: 20px;border-radius: 10px;background-color: black;}
    
            .box1 {display: flex;justify-content: center;}  /*水平居中*/
            .box2 {display: flex;justify-content: flex-end;}  /*水平靠右*/
            .box3 {display: flex;align-items: center;}  /*垂直居中*/
            .box4 {display: flex;justify-content: center;align-items: center;}  /*水平垂直居中*/
            .box5 {display: flex;justify-content: center;align-items: flex-end;}  /*水平居中,垂直靠下*/
        </style>          
    </head>            
    <body>         
    
    <div class="m-container box1">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box2">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box3">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box4">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box5">
      <span class="m-item"></span>
    </div>
    
    </body>            
    </html>  

    骰子的布局(两个点)

    <!DOCTYPE html>            
    <html>            
    <head>            
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">      
        <title>骰子的布局(flex)</title>          
        <style type="text/css">    
            body{margin: 0}  
    
            .m-container{margin: 5px; padding: 5px; 100px;height: 100px;border:1px solid green;}
            .m-item {margin: 5px;  20px;height: 20px;border-radius: 10px;background-color: black;}
    
            .box1 {display: flex;justify-content: space-between;}  /*底部两端对齐*/
            .box2 {display: flex;flex-direction: column; justify-content: space-between;}  /*靠左两端对齐*/
            .box3 {display: flex;flex-direction: column; justify-content: space-between;align-items: center;}  /*水平居中,两端对齐*/
            .box4 {display: flex;flex-direction: column; justify-content: space-between;align-items: flex-end;}  /*水平靠右,两端对齐*/
            .box5 {display: flex;} 
            .box5 .m-item:nth-child(2) {align-self: center;}
            .box6 {display: flex;justify-content: space-between;} 
            .box6 .m-item:nth-child(2) {align-self: flex-end;}        
        </style>          
    </head>            
    <body>         
    
    <div class="m-container box1">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box2">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box3">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box4">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box5">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box6">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    </body>            
    </html>  




    备注:欢迎加入web前端求职招聘qq群:668352707

  • 相关阅读:
    C#中的扩展方法
    对象的序列化存入数据库,与反序列化
    PowerDesigner15:EAM(Enterprise Architecture Model)企业架构模组
    WPF优化:加速启动时间
    LINQ优化:将GroupBy换做Distinct
    WPF:CheckBox竖向的滑块效果
    微軟提議﹕c#編程四個注意
    Remoting:于.net框架下的序列化機制
    c#編寫聖誕樹算法﹐及相關問題。
    72
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924874.html
Copyright © 2011-2022 走看看