效果
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開發(fā)</a></li>
<li><a href="/">前端設(shè)計</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開發(fā)</a></li>
<li><a href="/">前端設(shè)計</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>
