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>
  • 相关阅读:
    JS・TextArea 字符串长度限制
    JavaScript面试题目集锦
    IE内存泄露分析
    JS动态添加样式和脚本
    取消锚(<a/>)点击后页面跳转的几种方法
    JS代码片段整理
    IE缓存问题的解决方法
    字符串与数字 转换
    如何安装和配置Cassandra
    字类和超类的转化问题
  • 原文地址:https://www.cnblogs.com/linding/p/14282227.html
Copyright © 2011-2022 走看看