用ul做一个云标签

效果

Paste_Image.png

1、控制位置

ul>li 去掉原本样式

ul { list-style: none; }

ul>li 背景

.cloud ul li:nth-child(8n-7) {/* background: #8A9B0F; */}
  .cloud ul li:nth-child(8n-6) { background: #EB6841 }
  .cloud ul li:nth-child(8n-5) { background: #3FB8AF }
  .cloud ul li:nth-child(8n-4) { background: #FE4365 }
  .cloud ul li:nth-child(8n-3) { background: #FC9D9A }
  .cloud ul li:nth-child(8n-2) {background: #EDC951;}
  .cloud ul li:nth-child(8n-1) { background: #C8C8A9 }
  .cloud ul li:nth-child(8n) { background: #83AF9B }
  .cloud ul li:first-child {/* background: #036564 */}
  .cloud ul li:last-child { background: #3299BB }

ul>li 不独占一行

float: left;

    

      
个人博客
      
web开发
      
前端设计
      
Html
      
CSS3
      
Html5+css3
      
百度
      
Javasript
      
web开发
      
前端设计
      
Html
      
CSS3
      
Html5+css3
      
百度