Open haizhilin2013 opened 3 years ago
只能想到这种 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>
第660天 写一个标签云的布局
3+1官网
我也要出题