css:
test{font-weight:500;
font-family: "黑体";
font-size: 14px;
}
test p span{
width:50px;
height:15px;
display: inline-block;
border-right:2px solid white;
text-align: center;
}
test tex span:first-child{
width:25px;
text-align: left;
}
test clo span:nth-child(1){
background-color:#01E400;
}
test clo span:nth-child(2){
background-color: #FFFF00;
}
test clo span:nth-child(3){
background-color:#FF7E00;
}
test clo span:nth-child(4){
background-color: #FF0000;
}
test clo span:nth-child(5){
background-color: #99004C;
}
test clo span:nth-child(6){
background-color: #7E0023;
border-right:none;
}
html:
<div class="test"><p>PM25浓度示意图例(微克/立方米)</p>
<p class="clo"><span></span><span></span><span></span><span></span><span></span><span></span></p>
<p class="tex"><span>0</span><span>35</span><span>75</span><span>115</span><span>150</span><span>250</span></p>
</div>
欢迎分享,转载请注明来源:品搜搜测评网