CSS显示红黄绿灰小图片

最新推荐文章于 2023-06-26 07:54:07 发布

原创最新推荐文章于 2023-06-26 07:54:07 发布 · 976 阅读

CC 4.0 BY-SA版权

文章标签：

25 篇文章

订阅专栏

本文通过HTML和CSS实现了一组不同颜色的状态图标，这些图标可以根据后端的不同状态输出相应的颜色。

<style>
	.zhuangtai1{ width:15px; height:15px; background:#F00; border-radius:10px; display:block}
	</style>

<table>
	<tr>
	<td>
	<i class="zhuangtai1"></i>
	</td>
	</tr>
	<tr>
	<td>
	<i class="zhuangtai1" style="background:#060"></i>
	</td>
	</tr>
	<tr>
	<td>
	<i class="zhuangtai1" style="background:#F90"></i>
	</td>
	</tr>
	<tr>
	<td>
	<i class="zhuangtai1" style="background:#666"></i>
	</td>
	</tr>
	</table>

可以后台直接根据不同状态直接输出<i></i>