ul li带背景颜色块状tag标签css

第三方分享代码
admin 2017-03-02 CSS学习 130 0

zblog块状tag标签css.png

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太乱,可以复制到编辑工具里进行整理下格式,这样就一目了然了。

相关推荐

网友评论

  • (*)
还没有评论!