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>
  • 相关阅读:
    English trip V1
    English trip M1
    every day a practice —— morning(5)
    English Voice of <<All Of Me>>
    bzoj 3561 DZY Loves Math VI
    luogu P4322 [JSOI2016]最佳团体
    luogu P3264 [JLOI2015]管道连接
    bzoj 5084 hashit
    luogu P6091 原根
    bzoj 5206 [Jsoi2017]原力
  • 原文地址:https://www.cnblogs.com/linding/p/14282227.html
Copyright © 2011-2022 走看看