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>
  • 相关阅读:
    英语老师不想让你知道的一些网站分享
    最近三周开发的桌面应用系统
    UML技术沙龙PPT
    Pandas时间处理的一些小方法
    合并函数总结
    开博宣言
    DBGrid中增加一列CHECKBOX
    关于Delphi的Hint
    操作EXCEL
    关于FastReport
  • 原文地址:https://www.cnblogs.com/linding/p/14282227.html
Copyright © 2011-2022 走看看