ul li带背景颜色块状tag标签css_CSS学习

资料来源：网络整理时间：2023/3/4 0:55:22 共计：3586 浏览

zblog模板制作中，特别是博客、CMS模板经常用到上图所示的CSS，代码主要为ul li结构！

下面分享下这块儿的CSS代码：

//首先是上图HTML代码
<div class="com-title"><span>标签列表</span></div>    
	<ul class="ul_divTags_inner"><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-14.html">推荐</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-5.html">Ubuntu</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-1.html">硬件</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-2.html">Google</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-3.html">Android</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-4.html">Linux</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-6.html">CentOS</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-7.html">AMD</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-8.html">AlphaGo</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-9.html">PS4</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-10.html">系统</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-11.html">linux</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-12.html">Webassembly</a></li><li><a target="_blank" href="http://theme.b5b6.com/ydlinux/tags-13.html">浏览器</a></li></ul>

然后是CSS：

.ul_divTags_inner li{float: left; margin-right: 6px;line-height: 38px; font-size: 16px;}

.ul_divTags_inner li a{color: #ffffff; background-color: #00AA98; padding: 5px 6px;}

.ul_divTags_inner li a:hover{background-color: #414141;}

如果嫌HTML太乱，可以复制到编辑工具里进行整理下格式，这样就一目了然了。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：zblogphp模板制作——特效：菜单效果1_CSS学习 | ·下一条：标签CSS的权值_CSS学习