[html] 第660天 写一个标签云的布局

[haizhilin]

第660天 写一个标签云的布局

3+1官网

我也要出题

[起风了]

只能想到这种
https://codepen.io/TheWindRises/pen/eYBJWbB

<ul class="tag-cloud">
    <li>JavaScript</li>
    <li>技术</li>
    <li>CSS</li>
    <li>哲学</li>
    <li>React</li>
    <li>架构</li>
    <li>算法</li>
    <li>其他</li>
  </ul>
  <style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .tag-cloud {
      width: 200px;
      padding: 1em;
      border: 1px solid #eee;
    }
    .tag-cloud li {
      background-color: #ddd;
      margin-right: 0.4em;
      margin-bottom: 0.4em;
      padding: 0.2em 0.4em;
      display: inline-block;
      border-radius: 4px;
      font-size: 13px;
      color: #fff;
    }
    .tag-cloud li:nth-child(1) {background-color: orange;}
    .tag-cloud li:nth-child(2) {background-color: darkgreen;}
    .tag-cloud li:nth-child(3) {background-color: darkorange;}
    .tag-cloud li:nth-child(4) {background-color: orangered;}
    .tag-cloud li:nth-child(5) {background-color: dodgerblue;}
    .tag-cloud li:nth-child(6) {background-color: olivedrab;}
    .tag-cloud li:nth-child(7) {background-color: brown;}
    .tag-cloud li:nth-child(8) {background-color: blueviolet;}
  </style>