zoukankan      html  css  js  c++  java
  • css弹性盒骰子

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>css弹性盒骰子</title>
      <style>
        * {
          margin: 0;
          padding: 0
        }
    
        div {
           200px;
          height: 200px;
          border: 1px solid #000;
          background: #ff0;
          float: left;
          display: flex;
          box-sizing: border-box;
        }
    
        span {
          display: block;
           50px;
          height: 50px;
          background: #f00;
          border-radius: 50%;
        }
    
        div:nth-of-type(1) {
          justify-content: center;
          align-items: center;
        }
    
        div:nth-of-type(2) {
          justify-content: space-around;
          align-items: center;
        }
    
        div:nth-of-type(3) {
          justify-content: space-between;
          align-items: center;
          padding: 10px;
        }
    
        div:nth-of-type(3) > span:nth-of-type(1) {
          align-self: flex-start;
        }
    
        div:nth-of-type(3) > span:nth-of-type(3) {
          align-self: flex-end;
        }
    
        div:nth-of-type(4) {
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
        }
    
        nav {
           100%;
          height: 50px;
          display: flex;
          justify-content: space-around;
        }
    
        div:nth-of-type(5) {
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
        }
    
        div:nth-of-type(6) {
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
        }
      </style>
    </head>
    <body>
    <div>
      <span></span>
    </div>
    <div>
      <span></span>
      <span></span>
    </div>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div>
      <nav>
        <span></span>
        <span></span>
      </nav>
      <nav>
        <span></span>
        <span></span>
      </nav>
    </div>
    <div>
      <nav>
        <span></span>
        <span></span>
      </nav>
      <nav>
        <span></span>
      </nav>
      <nav>
        <span></span>
        <span></span>
      </nav>
    </div>
    <div>
      <nav>
        <span></span>
        <span></span>
      </nav>
      <nav>
        <span></span>
        <span></span>
      </nav>
      <nav>
        <span></span>
        <span></span>
      </nav>
    </div>
    </body>
    </html>
  • 相关阅读:
    升级2010
    如何修改MSSQL的用户名
    减小delphi体积的方法
    Delphi调用大漠插件示例
    Delphi 7升级到XE2的字符串问题
    MSSQL 清空数据库中表的数据
    MSSQL 2008 密钥
    springboot 2.1.4 多数据源配置
    springboot 数据库连接 解决驼峰命名问题
    Flask 热更新
  • 原文地址:https://www.cnblogs.com/linding/p/14282227.html
Copyright © 2011-2022 走看看