用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;

<html>
<meta charset="utf-8">
<body>
<style>
.cloud{
  width: 300px; */
  margin-left: 100px;
  margin-top: 100px;
  background-color: beige;
}
.cloud ul { list-style: none; }
.cloud ul li {
  -o-transition: all 0.5s;
  background: #FC9D9A;
  margin: 2px;
  line-height: 24px;
  float: left;
  border-radius: 8px;
  margin: 10px 10px 0 0;
  padding: 3px 5px;
  -moz-transition: all 0.5s;
}
.cloud ul li a {
    color: #FFF;
}
.cloud a:link, a:visited {
  text-decoration: none;
}
.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 }
.cloud ul li:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }

</style>
<div class="cloud">
    <ul>
      <li><a href="/">个人博客</a></li>
      <li><a href="/">web开发</a></li>
      <li><a href="/">前端设计</a></li>
      <li><a href="/">Html</a></li>
      <li><a href="/">CSS3</a></li>
      <li><a href="/">Html5+css3</a></li>
      <li><a href="/">百度</a></li>
      <li><a href="/">Javasript</a></li>
      <li><a href="/">web开发</a></li>
      <li><a href="/">前端设计</a></li>
      <li><a href="/">Html</a></li>
      <li><a href="/">CSS3</a></li>
      <li><a href="/">Html5+css3</a></li>
      <li><a href="/">百度</a></li>
    </ul>
  </div>
</body>
</html>

最后编辑于：2017.12.07 02:31:15

用ul做一个云标签

推荐阅读更多精彩内容